diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js
index 8eeca76c..988e7787 100644
--- a/ui/src/components/colors/story.js
+++ b/ui/src/components/colors/story.js
@@ -18,17 +18,30 @@ const {
 } = constants;
 
 const StyledWrapper = styled.div`
-  display: inline-block;
-  float: left;
   margin-left: 20px;
+  margin-bottom: 20px;
+  border: solid 1px ${colors.base.grey};
+  padding: 18px;
+  
 `;
 
 const Square = styled.div`
   display: inline-block;
-  width: 100px;
+  border: solid 1px ${colors.base.grey};
+  width: 100%;
   height: 100px
 `;
 
+const StyledP = styled.p`
+  margin: 0;
+`;
+
+const  convertCase = (val) => {
+  const result = val.replace( /([A-Z])/g, " $1" );
+  return val.charAt(0).toUpperCase() + result.slice(1); // capitalize the first
+  // letter - as an example.
+}
+
 storiesOf('Colors', module)
   .add('default', () => {
     const renderColors = Object.keys(colors.base).map( (color, index) => {
@@ -38,11 +51,22 @@ storiesOf('Colors', module)
       `;
 
       return (
-        <Column xs={2} key={index}>
+        <Column xs={6} md={3} key={index}>
           <StyledWrapper>
             <StyledSquare />
-            <p>Alias: {color}</p>
-            <p>Hex: {colors.base[color]}</p>
+            <StyledP>
+              <strong>Name</strong>:
+              <br />{convertCase(color)}
+            </StyledP>
+
+            <StyledP>
+              <strong>Const</strong>:
+              <br />{color}
+            </StyledP>
+
+            <StyledP>
+              <strong>Hex</strong>: {colors.base[color].toUpperCase()}
+            </StyledP>
           </StyledWrapper>
         </Column>
       );
diff --git a/ui/src/components/typography/story.js b/ui/src/components/typography/story.js
new file mode 100644
index 00000000..fe74a933
--- /dev/null
+++ b/ui/src/components/typography/story.js
@@ -0,0 +1,54 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const constants = require('../../shared/constants');
+const Column = require('../column');
+const Row = require('../row');
+const BaseElements = require('../base-elements');
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  storiesOf
+} = require('@kadira/storybook');
+
+const {
+  colors
+} = constants;
+
+const {
+  H1,
+  H2,
+  H3,
+  P,
+} = BaseElements;
+
+const StyledWrapper = styled.div`
+  display: inline-block;
+  float: left;
+  margin-left: 20px;
+`;
+
+const Square = styled.div`
+  display: inline-block;
+  width: 100px;
+  height: 100px
+`;
+
+storiesOf('Typography', module)
+  .add('default', () => {
+    return (
+      <Row>
+        <Column>
+          <H2>Special Heading - H1</H2>
+          <ul>
+            <li>Size - 36px</li>
+            <li>Line Height - 42px</li>
+            <li>Color- <pre>Some Hex</pre></li>
+          </ul>
+        </Column>
+      </Row>
+    );
+  });
\ No newline at end of file
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 06a89c72..42a33500 100644
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@@ -5,7 +5,7 @@
 * there. Lets try and keep different color variations down ot a minimum.
 * */
 
-const base = {
+let base = {
   primary: '#1838c0',
   primaryLight: '#3b46cc',
   primaryDark: '#12279f',
@@ -17,9 +17,66 @@ const base = {
   greyLight: '#e9e9e9',
   greyDark: '#d8d8d8',
   greyDarker: '#919191',
-  red: '#DA4B42',
-  yellow: '#E4A800',
   green: '#00AF66',
+  greenDark: '#009858',
+  orange: '#E38200',
+  orangeDark: '#CB7400',
+  yellow: '#E4A800',
+  red: '#DA4B42',
+  redDark: '#CD251B',
+};
+
+/*
+Color Object example
+
+const color_name = {
+  color_name: '#FFFFFF',
+  color_name_style1: '#FFF000',
+  color_name_style2: '#FFF333',
+};
+*/
+
+const primary = {
+  primary: '#3B47CC',
+  primaryHover: '#1838C0',
+  primaryActive: '#12279F',
+  primaryDestaurated: '#3B4AAF',
+  primaryDesaturatedHover: '#34429D',
+  primaryDestauratedActive: '#2D3884',
+  primaryDark: '#2D3884',
+  primaryDarkHover: '#34429D',
+  primaryDarkActive: '#2D3884',
+};
+
+const secondary = {
+  secondary: '#464646',
+  secondaryHover: '#3F3F3F',
+  secondaryActive: '#343434',
+};
+
+const white = {
+  white: '#FFFFFF',
+  whiteHover: '#F8F8F8',
+  whiteActive: '#E9E9E9',
+};
+
+const grey = {
+  grey: '#D8D8D8',
+}
+
+base = {
+  ...primary,
+  ...secondary,
+  ...white,
+  ...grey,
+  disabled: "#FAFAFA",
+  background: "#FAFAFA",
+  green: '#00AF66',
+  greenDark: '#009858',
+  orange: '#E38200',
+  orangeDark: '#CB7400',
+  red: '#DA4B42',
+  redDark: '#CD251B',
 };
 
 const fonts = {