diff --git a/src/containers/StyleguidePage/Colors.example.js b/src/containers/StyleguidePage/Colors.example.js
new file mode 100644
index 00000000..e926eaa0
--- /dev/null
+++ b/src/containers/StyleguidePage/Colors.example.js
@@ -0,0 +1,118 @@
+import React, { PropTypes } from 'react';
+import css from './StyleguidePage.css';
+import mpCSS from '../../marketplace.css';
+
+const ColorCard = props => {
+  const { mpColor, name, usage } = props;
+  const colorClasses = mpColor || css.color;
+
+  return (
+    <div className={css.colorCard}>
+      <div className={colorClasses} />
+      <div className={css.colorDescription}>
+        <p>
+          <span>{name}</span>
+          <br />
+          <span className={mpCSS.tinyFont}>{usage}</span>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const { string } = PropTypes;
+
+// Jest test strip off CSS classes (css is an empty object). Otherwise this could be required prop.
+const defaultProps = { mpColor: undefined };
+// Create a real undefined value, not just injecting a hopefully undefined object.
+delete defaultProps.mpColor;
+ColorCard.defaultProps = defaultProps;
+
+ColorCard.propTypes = {
+  mpColor: string,
+  name: string.isRequired,
+  usage: string.isRequired,
+};
+
+const MarketplaceColors = () => {
+  return (
+    <div className={css.content}>
+      <p className={css.spacing2x}>
+        Marketplace colors have three groups: branding color and its variations, action colors, and
+        grey palette for fine tuning UI elements.
+      </p>
+      <p className={css.spacing2x}>
+        N.B. you should import marketplace.css where ever you are going to use marketplace variables
+        (e.g. <i>@import '../../marketplace.css';</i>).
+      </p>
+      <div className={css.colorsContainer}>
+        <div className={css.colorsGroup}>
+          <ColorCard
+            mpColor={css.marketplaceColorBackground}
+            name="--marketplaceColor"
+            usage="e.g. color: var(--marketplaceColor);"
+          />
+          <ColorCard
+            mpColor={css.marketplaceColorLightBackground}
+            name="--marketplaceColorLight"
+            usage="e.g. color: var(--marketplaceColorLight);"
+          />
+          <ColorCard
+            mpColor={css.marketplaceColorDarkBackground}
+            name="--marketplaceColorDark"
+            usage="e.g. color: var(--marketplaceColorDark);"
+          />
+        </div>
+        <div className={css.colorsGroup}>
+          <ColorCard
+            mpColor={css.successColorBackground}
+            name="--successColor"
+            usage="e.g. color: var(--successColor);"
+          />
+          <ColorCard
+            mpColor={css.failColorBackground}
+            name="--failColor"
+            usage="e.g. color: var(--failColor);"
+          />
+          <ColorCard
+            mpColor={css.attentionColorBackground}
+            name="--attentionColor"
+            usage="e.g. color: var(--attentionColor);"
+          />
+        </div>
+        <div className={css.colorsGroup}>
+          <ColorCard
+            mpColor={css.matterColorDarkBackground}
+            name="--matterColorDark"
+            usage="e.g. color: var(--matterColorDark);"
+          />
+          <ColorCard
+            mpColor={css.matterColorBackground}
+            name="--matterColor"
+            usage="e.g. color: var(--matterColor);"
+          />
+          <ColorCard
+            mpColor={css.matterColorAntiBackground}
+            name="--matterColorAnti"
+            usage="e.g. color: var(--matterColorAnti);"
+          />
+          <ColorCard
+            mpColor={css.matterColorNegativeBackground}
+            name="--matterColorNegative"
+            usage="e.g. color: var(--matterColorNegative);"
+          />
+          <ColorCard
+            mpColor={css.matterColorLightBackground}
+            name="--matterColorLight"
+            usage="e.g. color: var(--matterColorLight);"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Colors = {
+  component: MarketplaceColors,
+  props: {},
+};
diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css
index aed201aa..3b915541 100644
--- a/src/containers/StyleguidePage/StyleguidePage.css
+++ b/src/containers/StyleguidePage/StyleguidePage.css
@@ -1,6 +1,4 @@
-:root {
-  --spacing-unit: 6px;
-}
+@import '../../marketplace.css';
 
 .root {
   padding: 1rem 0;
@@ -11,11 +9,14 @@
   padding: 12px;
 }
 
-/* Typography.example */
-.content {
-
+.selectedGroup {
+  font-weight: bold;
 }
 
+
+/* Typography.example */
+.typographyContent {}
+
 .baselines {
   background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 5h10M0 11h10M0 17h10" stroke="#f1f1f1"/><path d="M0 23h10" stroke="#ddd" stroke-width="1"/></svg>');
   background-repeat: repeat;
@@ -26,23 +27,14 @@
   }
 }
 
-
 .spacing2x {
-  margin: calc(2 * var(--spacing-unit)) 0;
+  margin: calc(2 * var(--spacingUnit)) 0;
 }
 
 .fontsContainer {
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(4 * var(--spacing-unit));
-
-  &::after {
-    content: ".";
-    visibility: hidden;
-    display: block;
-    height: 0;
-    clear: both;
-  }
+  margin-top: calc(4 * var(--spacingUnit));
 }
 
 .fontCard {
@@ -55,8 +47,8 @@
    * box-sizing: border-box;
    * In this case, we'll adjust margin-bottoms (24px - 4px = 20px)
    */
-  margin-bottom: calc(4 * var(--spacing-unit) - 4px);
-  margin-right: calc(2 * var(--spacing-unit));
+  margin-bottom: calc(4 * var(--spacingUnit) - 4px);
+  margin-right: calc(2 * var(--spacingUnit));
 }
 
 .element {
@@ -69,7 +61,7 @@
   flex-grow: 1;
   width: 100%;
   background-color: #f1f1f1;
-  padding: calc(2 * var(--spacing-unit));
+  padding: calc(2 * var(--spacingUnit));
 
   border-style: solid;
   border-color: #aaa;
@@ -77,6 +69,95 @@
   border-top-color: transparent;
 }
 
-.selectedGroup {
-  font-weight: bold;
+/* Colors.example */
+
+.colorsContent,
+.colorsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.colorsGroup {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: calc(4 * var(--spacingUnit));
+}
+
+.colorCard {
+  flex-basis: 275px;
+  height: 275px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: calc(4 * var(--spacingUnit));
+  margin-right: calc(2 * var(--spacingUnit));
+  overflow: hidden;
+
+  border: 1px solid var(--matterColorNegative);
+}
+
+.color {
+  width: 100%;
+  height: 66.6%;
+}
+
+.colorDescription {
+  flex-grow: 1;
+  width: 100%;
+  background-color: #fff;
+  padding: calc(2 * var(--spacingUnit));
+}
+
+.marketplaceColorBackground {
+  composes: color;
+  background-color: var(--marketplaceColor);
+}
+
+.marketplaceColorLightBackground {
+  composes: color;
+  background-color: var(--marketplaceColorLight);
+}
+
+.marketplaceColorDarkBackground {
+  composes: color;
+  background-color: var(--marketplaceColorDark);
+}
+
+.successColorBackground {
+  composes: color;
+  background-color: var(--successColor);
+}
+
+.failColorBackground {
+  composes: color;
+  background-color: var(--failColor);
+}
+
+.attentionColorBackground {
+  composes: color;
+  background-color: var(--attentionColor);
+}
+
+.matterColorBackground {
+  composes: color;
+  background-color: var(--matterColor);
+}
+
+.matterColorAntiBackground {
+  composes: color;
+  background-color: var(--matterColorAnti);
+}
+
+.matterColorDarkBackground {
+  composes: color;
+  background-color: var(--matterColorDark);
+}
+
+.matterColorNegativeBackground {
+  composes: color;
+  background-color: var(--matterColorNegative);
+}
+
+.matterColorLightBackground {
+  composes: color;
+  background-color: var(--matterColorLight);
 }
diff --git a/src/examples.js b/src/examples.js
index f0f91cb4..cb139c66 100644
--- a/src/examples.js
+++ b/src/examples.js
@@ -23,6 +23,7 @@ import * as BookingDatesForm from './containers/BookingDatesForm/BookingDatesFor
 import * as ChangeAccountPasswordForm
   from './containers/ChangeAccountPasswordForm/ChangeAccountPasswordForm.example';
 import * as ChangePasswordForm from './containers/ChangePasswordForm/ChangePasswordForm.example';
+import * as Colors from './containers/StyleguidePage/Colors.example';
 import * as EditListingDescriptionForm
   from './containers/EditListingDescriptionForm/EditListingDescriptionForm.example';
 import * as EditListingLocationForm
@@ -47,6 +48,7 @@ export {
   BookingInfo,
   ChangeAccountPasswordForm,
   ChangePasswordForm,
+  Colors,
   CurrencyInput,
   DateInput,
   EditListingDescriptionForm,
diff --git a/src/marketplace.css b/src/marketplace.css
index 1818067d..5eb69f48 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -1,5 +1,27 @@
 @import "sanitize.css";
 
+:root {
+  /* Colors */
+  --marketplaceColor: #C0392B;
+  --marketplaceColorLight: #FF4C38;
+  --marketplaceColorDark: #8C291E;
+
+  --successColor: #2ECC71;
+  --failColor: #FF0000;
+  --attentionColor: #FFAA00;
+
+  --matterColorDark: #000000;
+  --matterColor: #4A4A4A;
+  --matterColorAnti: #B2B2B2;
+  --matterColorNegative: #E7E7E7;
+  --matterColorLight: #FFFFFF;
+
+  /* Spacing units */
+  /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */
+  --spacingUnit: 6px;
+  --spacingUnitDesktop: 8px;
+}
+
 /* FONTS */
 h1, h2, h3, h4, h5, h6, p, pre {
   margin: 0;
@@ -118,11 +140,10 @@ pre,
   /* TODO Desktop styles needs to be extracted */
 }
 
-/* COLORS */
 /* Base font color */
 html,
 .textColor {
-  color: #4A4A4A;
+  color: var(--matterColor);
 }
 
 /* NORMALIZATIONS for other elements */