diff --git a/catalog/index.js b/catalog/index.js
index 312b8feb3..245a127b2 100644
--- a/catalog/index.js
+++ b/catalog/index.js
@@ -4,6 +4,7 @@ import { Catalog } from "catalog";
 
 import home from "./pages/home/index";
 import colors from "./pages/colors/index";
+import typography from "./pages/typography/index";
 import buttons from "./pages/buttons/index";
 import grid from "./pages/grid/index";
 import icons from "./pages/icons/index";
@@ -11,7 +12,7 @@ import icons from "./pages/icons/index";
 const theme = {
   pageHeadingBackground: "linear-gradient( 124deg, #009cde, #535eb2 )"
 };
-const pages = [home, colors, buttons, grid, icons];
+const pages = [home, colors, typography, buttons, grid, icons];
 
 const sizes = [
   { name: "mobile", width: 480 },
diff --git a/catalog/pages/colors/index.md b/catalog/pages/colors/index.md
index 77c8cf4f0..43f6c8030 100644
--- a/catalog/pages/colors/index.md
+++ b/catalog/pages/colors/index.md
@@ -1,59 +1,41 @@
-### Pacific
+### Heliotrope
 
 ```color-palette|horizontal
-colors: !import pacific
+colors: !import heliotrope
 ```
 
-### Sierra
-
-```color-palette|horizontal
-colors: !import sierra
-```
-
-### Cascade
-
-```color-palette|horizontal
-colors: !import cascade
-```
-
-### Rocky
-
-```color-palette|horizontal
-colors: !import rocky
-```
-
-### Ridge
+### Cruz
 
 ```color-palette|horizontal
-colors: !import ridge
+colors: !import cruz
 ```
 
-### Yosemite
+### Alert
 
 ```color-palette|horizontal
-colors: !import yosemite
+colors: !import alert
 ```
 
-### Helen
+### Caution
 
 ```color-palette|horizontal
-colors: !import helen
+colors: !import caution
 ```
 
-### Malibu
+### positive
 
 ```color-palette|horizontal
-colors: !import malibu
+colors: !import positive
 ```
 
-### Catalina
+### Onyx
 
 ```color-palette|horizontal
-colors: !import catalina
+colors: !import onyx
 ```
 
-### Cruz
+### White
 
 ```color-palette|horizontal
-colors: !import cruz
+colors: !import white
 ```
diff --git a/catalog/pages/grid/index.js b/catalog/pages/grid/index.js
index 97d5e627f..e4dfdda21 100644
--- a/catalog/pages/grid/index.js
+++ b/catalog/pages/grid/index.js
@@ -4,7 +4,7 @@ import { Container, Row, Column } from "../../../src/components/Grid";
 import colors from "../../../src/theme/colors";
 
 const contentStyles = {
-  backgroundColor: colors.pacific.base,
+  backgroundColor: colors.azure.base,
   textAlign: "center"
 };
 
diff --git a/catalog/pages/icons/index.js b/catalog/pages/icons/index.js
index 1f814799b..c440a29fc 100644
--- a/catalog/pages/icons/index.js
+++ b/catalog/pages/icons/index.js
@@ -9,7 +9,7 @@ import { Container, Row, Column } from "../../../src/components/Grid";
 import colors from "../../../src/theme/colors";
 
 const iconStyle = {
-  backgroundColor: colors.white,
+  backgroundColor: colors.white.base,
   padding: "20px",
   display: "flex",
   justifyContent: "center",
diff --git a/catalog/pages/typography/index.js b/catalog/pages/typography/index.js
new file mode 100644
index 000000000..da9ecc5be
--- /dev/null
+++ b/catalog/pages/typography/index.js
@@ -0,0 +1,45 @@
+import { pageLoader } from "catalog";
+
+import { colors, typography } from "../../../src/theme";
+import { Container, Row, Column } from "../../../src/components/Grid";
+
+const textStyle = {
+  backgroundColor: colors.white.base,
+  padding: "20px",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  fontSize: typography.size.bronto
+};
+
+const fontWeightLabelStyle = {
+  padding: "10px",
+  textAlign: "center"
+};
+
+const fontSizeRowStyle = {
+  padding: "20px",
+  display: "flex",
+  alignItems: "center"
+};
+
+const getFontWeightTextStyle = props => ({
+  ...textStyle,
+  ...props
+});
+
+export default {
+  path: "/typography",
+  title: "Typography",
+  imports: {
+    colors,
+    typography,
+    Container,
+    Row,
+    Column,
+    getFontWeightTextStyle,
+    fontWeightLabelStyle,
+    fontSizeRowStyle
+  },
+  content: pageLoader(() => import("./index.md"))
+};
diff --git a/catalog/pages/typography/index.md b/catalog/pages/typography/index.md
new file mode 100644
index 000000000..3e7ee0f09
--- /dev/null
+++ b/catalog/pages/typography/index.md
@@ -0,0 +1,98 @@
+### Font Weights
+
+```react
+<Container>
+<Row>
+  <Column medium={3}>
+    <div style={getFontWeightTextStyle({fontWeight: typography.weight.light})}>Aa</div>
+    <div style={fontWeightLabelStyle}>Light</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={getFontWeightTextStyle({fontWeight: typography.weight.regular})}>Aa</div>
+    <div style={fontWeightLabelStyle}>Regular</div>
+  </Column>
+
+  <Column medium={3}>
+    <div style={getFontWeightTextStyle({fontWeight: typography.weight.semiBold})}>Aa</div>
+    <div style={fontWeightLabelStyle}>Semi Bold</div>
+  </Column>
+
+  <Column medium={3}>
+     <div style={getFontWeightTextStyle({fontWeight: typography.weight.extraBold})}>Aa</div>
+    <div style={fontWeightLabelStyle}>Extra Bold</div>
+  </Column>
+</Row>
+
+</Container>
+```
+
+### Font Sizes
+
+```react
+const str = "Better is together";
+<Container>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2} >12 px</Column>
+    <Column medium={6} style={{fontSize: "12px"}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>14 px</Column>
+    <Column medium={6} style={{fontSize: "14px"}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>16 px</Column>
+    <Column medium={6} style={{fontSize: "16px"}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>20 px</Column>
+    <Column medium={6} style={{fontSize: "20px"}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>24 px</Column>
+    <Column medium={6} style={{fontSize: "24px"}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>32 px</Column>
+    <Column medium={6} style={{fontSize: "32px"}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>46 px</Column>
+    <Column medium={6} style={{fontSize: "42px"}}>{str}</Column>
+</Row>
+
+</Container>
+```
+
+### Text Variations
+
+```react
+const str = "Better is together";
+<Container>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2} >Primary</Column>
+    <Column medium={6} style={{color: colors.onyx.base}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>Seconday</Column>
+    <Column medium={6} style={{color: colors.onyx.light}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>Disabled</Column>
+    <Column medium={6} style={{color: colors.onyx.muted}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>Alert</Column>
+    <Column medium={6} style={{color: colors.alert.base}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>Caution</Column>
+    <Column medium={6} style={{color: colors.caution.base}}>{str}</Column>
+</Row>
+<Row style={fontSizeRowStyle}>
+    <Column medium={2}>Affirming</Column>
+    <Column medium={6} style={{color: colors.positive.base}}>{str}</Column>
+</Row>
+
+</Container>
+```
diff --git a/src/components/Button/__tests__/__snapshots__/index.spec.js.snap b/src/components/Button/__tests__/__snapshots__/index.spec.js.snap
index 9113f1156..5d025cb9e 100644
--- a/src/components/Button/__tests__/__snapshots__/index.spec.js.snap
+++ b/src/components/Button/__tests__/__snapshots__/index.spec.js.snap
@@ -16,26 +16,26 @@ exports[`<Button /> renders link button correctly 1`] = `
   align-items: center;
   font-size: 14px;
   font-weight: 600;
-  padding: 0 14px;
+  padding: 0 16px;
   height: 36px;
   width: 100%;
   min-width: 100px;
   text-align: center;
   text-transform: capitalize;
   border-radius: 2px;
-  margin-right: 14px;
+  margin-right: 16px;
   cursor: pointer;
-  color: #fff;
-  background-color: #009cde;
-  border: 1px solid #009cde;
+  color: rgba(255,255,255,1);
+  background-color: rgba(2,108,223,1);
+  border: 1px solid rgba(2,108,223,1);
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c0:disabled {
-  color: #fff;
-  background-color: #bfe6f7;
-  border: 1px solid #bfe6f7;
+  color: rgba(255,255,255,1);
+  background-color: rgba(2,108,223,0.2);
+  border: 1px solid rgba(2,108,223,0.2);
   cursor: not-allowed;
 }
 
@@ -63,24 +63,24 @@ exports[`<Button /> renders outline button correctly 1`] = `
   align-items: center;
   font-size: 14px;
   font-weight: 600;
-  padding: 0 14px;
+  padding: 0 16px;
   height: 36px;
   width: 100%;
   min-width: 100px;
   text-align: center;
   text-transform: capitalize;
   border-radius: 2px;
-  margin-right: 14px;
+  margin-right: 16px;
   cursor: pointer;
-  color: #009cde;
-  background-color: #fff;
-  border: 1px solid #009cde;
+  color: rgba(2,108,223,1);
+  background-color: rgba(255,255,255,1);
+  border: 1px solid rgba(2,108,223,1);
 }
 
 .c0:disabled {
-  color: #bfe6f7;
-  background-color: #fff;
-  border: 1px solid #bfe6f7;
+  color: rgba(2,108,223,0.2);
+  background-color: rgba(255,255,255,1);
+  border: 1px solid rgba(2,108,223,0.2);
   cursor: not-allowed;
 }
 
@@ -107,24 +107,24 @@ exports[`<Button /> renders outline disabled button correctly 1`] = `
   align-items: center;
   font-size: 14px;
   font-weight: 600;
-  padding: 0 14px;
+  padding: 0 16px;
   height: 36px;
   width: 100%;
   min-width: 100px;
   text-align: center;
   text-transform: capitalize;
   border-radius: 2px;
-  margin-right: 14px;
+  margin-right: 16px;
   cursor: pointer;
-  color: #009cde;
-  background-color: #fff;
-  border: 1px solid #009cde;
+  color: rgba(2,108,223,1);
+  background-color: rgba(255,255,255,1);
+  border: 1px solid rgba(2,108,223,1);
 }
 
 .c0:disabled {
-  color: #bfe6f7;
-  background-color: #fff;
-  border: 1px solid #bfe6f7;
+  color: rgba(2,108,223,0.2);
+  background-color: rgba(255,255,255,1);
+  border: 1px solid rgba(2,108,223,0.2);
   cursor: not-allowed;
 }
 
@@ -152,24 +152,24 @@ exports[`<Button /> renders standard button correctly 1`] = `
   align-items: center;
   font-size: 14px;
   font-weight: 600;
-  padding: 0 14px;
+  padding: 0 16px;
   height: 36px;
   width: 100%;
   min-width: 100px;
   text-align: center;
   text-transform: capitalize;
   border-radius: 2px;
-  margin-right: 14px;
+  margin-right: 16px;
   cursor: pointer;
-  color: #fff;
-  background-color: #009cde;
-  border: 1px solid #009cde;
+  color: rgba(255,255,255,1);
+  background-color: rgba(2,108,223,1);
+  border: 1px solid rgba(2,108,223,1);
 }
 
 .c0:disabled {
-  color: #fff;
-  background-color: #bfe6f7;
-  border: 1px solid #bfe6f7;
+  color: rgba(255,255,255,1);
+  background-color: rgba(2,108,223,0.2);
+  border: 1px solid rgba(2,108,223,0.2);
   cursor: not-allowed;
 }
 
@@ -196,24 +196,24 @@ exports[`<Button /> renders standard disabled button correctly 1`] = `
   align-items: center;
   font-size: 14px;
   font-weight: 600;
-  padding: 0 14px;
+  padding: 0 16px;
   height: 36px;
   width: 100%;
   min-width: 100px;
   text-align: center;
   text-transform: capitalize;
   border-radius: 2px;
-  margin-right: 14px;
+  margin-right: 16px;
   cursor: pointer;
-  color: #fff;
-  background-color: #009cde;
-  border: 1px solid #009cde;
+  color: rgba(255,255,255,1);
+  background-color: rgba(2,108,223,1);
+  border: 1px solid rgba(2,108,223,1);
 }
 
 .c0:disabled {
-  color: #fff;
-  background-color: #bfe6f7;
-  border: 1px solid #bfe6f7;
+  color: rgba(255,255,255,1);
+  background-color: rgba(2,108,223,0.2);
+  border: 1px solid rgba(2,108,223,0.2);
   cursor: not-allowed;
 }
 
diff --git a/src/components/Button/index.styles.js b/src/components/Button/index.styles.js
index e124ab633..8800d6054 100644
--- a/src/components/Button/index.styles.js
+++ b/src/components/Button/index.styles.js
@@ -5,24 +5,24 @@ import { spacing, typography, colors, constants } from "../../theme";
 const HEIGHT = "36px";
 const VARIANTS = {
   standard: {
-    color: colors.white,
-    backgroundColor: colors.pacific.base,
-    borderColor: colors.pacific.base
+    color: colors.white.base,
+    backgroundColor: colors.azure.base,
+    borderColor: colors.azure.base
   },
   standardDisabled: {
-    color: colors.white,
-    backgroundColor: colors.pacific.muted,
-    borderColor: colors.pacific.muted
+    color: colors.white.base,
+    backgroundColor: colors.azure.light,
+    borderColor: colors.azure.light
   },
   outline: {
-    color: colors.pacific.base,
-    backgroundColor: colors.white,
-    borderColor: colors.pacific.base
+    color: colors.azure.base,
+    backgroundColor: colors.white.base,
+    borderColor: colors.azure.base
   },
   outlineDisabled: {
-    color: colors.pacific.muted,
-    backgroundColor: colors.white,
-    borderColor: colors.pacific.muted
+    color: colors.azure.light,
+    backgroundColor: colors.white.base,
+    borderColor: colors.azure.light
   }
 };
 
@@ -32,14 +32,14 @@ export const StyledButton = styled.button`
   align-items: center;
   font-size: ${typography.size.hecto};
   font-weight: ${typography.weight.semiBold};
-  padding: 0 ${spacing.normal};
+  padding: 0 ${spacing.moderate};
   height: ${HEIGHT};
   width: 100%;
   min-width: 100px;
   text-align: center;
   text-transform: capitalize;
   border-radius: ${constants.borderRadius.small};
-  margin-right: ${spacing.normal};
+  margin-right: ${spacing.moderate};
   cursor: pointer;
 
   color: ${({ variant }) => VARIANTS[variant].color};
diff --git a/src/theme/colors.js b/src/theme/colors.js
index 51f1eb75a..8eeae6165 100644
--- a/src/theme/colors.js
+++ b/src/theme/colors.js
@@ -1,75 +1,53 @@
 const colors = {
-  black: "#000",
-  white: "#fff",
-  pacific: {
-    base: "#009cde",
-    dark: "#0075a7",
-    light: "#80ceef",
-    muted: "#bfe6f7",
-    background: "#dff3fb"
-  },
-  sierra: {
-    base: "#353c42",
-    dark: "#272d31",
-    light: "#999da0",
-    muted: "#cdced0",
-    background: "#e6e7e8"
-  },
-  cascade: {
-    base: "#69747c",
-    dark: "#4e565c",
-    light: "#b4b9bd",
-    muted: "#d9dcde",
-    background: "#eff0f1"
-  },
-  rocky: {
-    base: "#dfe4e7",
-    dark: "#a7abad",
-    light: "#eff2f3",
-    muted: "#f7f8f9",
-    background: "#fbfcfc"
-  },
-  ridge: {
-    base: "#f6f7f9",
-    dark: "#b9b9bb",
-    light: "#fbfbfc",
-    muted: "#fdfdfe",
-    background: "#fefefe"
-  },
-  yosemite: {
-    base: "#19ab20",
-    dark: "#138018",
-    light: "#8cd590",
-    muted: "#c6eac7",
-    background: "#e2f5e3"
-  },
-  helen: {
-    base: "#ff0000",
-    dark: "#bf0000",
-    light: "#ff8080",
-    muted: "#ffbfbf",
-    background: "#ffdfdf"
-  },
-  malibu: {
-    base: "#ffaa33",
-    dark: "#bf8026",
-    light: "#ffd599",
-    muted: "#ffeacc",
-    background: "#fff4e6"
-  },
-  catalina: {
-    base: "#d0006f",
-    dark: "#9c0053",
-    light: "#e880b7",
-    muted: "#f3bfdb",
-    background: "#ffdfdf"
+  azure: {
+    base: "rgba(2, 108, 223, 1)",
+    light: "rgba(2, 108, 223, 0.2)"
+  },
+  summerSky: "#3AC7FF",
+  blackPearl: "#1F262D",
+  slate: "#999999",
+  moonstone: "#D1D1D1",
+  shale: "#E6E6E6",
+  quartz: "#FAFAFA",
+  heliotrope: {
+    base: "#C56BFF",
+    dark: "#A145DC",
+    light: "#DCA6FF",
+    muted: "#F3E1FF"
   },
   cruz: {
     base: "#922f90",
     dark: "#6d236b",
     light: "#c897c7",
-    muted: "#e3cae3",
-    background: "#f2e6f1"
+    muted: "#e3cae3"
+  },
+  alert: {
+    base: "#D93A3A",
+    dark: "#AE393A",
+    light: "#EC9C9C",
+    muted: "#F5CDCD"
+  },
+  caution: {
+    base: "#F2BD2A",
+    dark: "#C19B2E",
+    light: "#F8DE94",
+    muted: "#FBEEC9"
+  },
+  positive: {
+    base: "#1BAB1E",
+    dark: "#208E25",
+    light: "#8DD58E",
+    muted: "#C5E9C6"
+  },
+  onyx: {
+    base: "rgba(0, 0, 15, 1)",
+    light: "rgba(0, 0, 15, 0.6)",
+    muted: "rgba(0, 0, 15, 0.4)"
+  },
+  white: {
+    base: "rgba(255, 255, 255, 1)",
+    light: "rgba(255, 255, 255, 0.7)",
+    muted: "rgba(255, 255, 255 0.5)"
   }
 };
 
diff --git a/src/theme/spacing.js b/src/theme/spacing.js
index 8e1a58893..7dc7aac34 100644
--- a/src/theme/spacing.js
+++ b/src/theme/spacing.js
@@ -1,13 +1,12 @@
 const spacing = {
-  slim: "3px",
-  cozy: "4px",
-  compact: "6px",
-  moderate: "9px",
-  normal: "14px",
-  expanded: "20px",
-  spacious: "30px",
-  giant: "46px",
-  colossal: "68px",
+  slim: "4px",
+  cozy: "8px",
+  moderate: "16px",
+  normal: "24px",
+  shakira: "32px",
+  spacious: "48px",
+  giant: "64px",
+  colossal: "88px",
   gutters: {
     small: 16,
     mediumAndUp: 24
diff --git a/src/theme/typography.js b/src/theme/typography.js
index cc3ca1521..e3e5dd10a 100644
--- a/src/theme/typography.js
+++ b/src/theme/typography.js
@@ -3,23 +3,16 @@ const typography = {
     light: 300,
     regular: 400,
     semiBold: 600,
-    bold: 700,
-    black: 900
+    extraBold: 800
   },
   size: {
-    milli: "10px",
-    centi: "11px",
-    uno: "13px",
+    uno: "12px",
     hecto: "14px",
     kilo: "16px",
-    mega: "18px",
     giga: "20px",
-    tera: "23px",
-    peta: "26px",
-    exa: "29px",
+    tera: "24px",
     zetta: "32px",
-    yotta: "36px",
-    bronto: "41px"
+    bronto: "46px"
   }
 };