diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js
index 04605b4e..06e1315b 100644
--- a/frontend/src/components/breadcrumb/index.js
+++ b/frontend/src/components/breadcrumb/index.js
@@ -20,7 +20,7 @@ const {
 } = constants;
 
 const {
-  H1,
+  H2,
 } = BaseElements;
 
 const {
@@ -66,6 +66,10 @@ function getNameLink(name) {
   }));
 }
 
+const StyledH2 = styled(H2)`
+  color: ${colors.base.primary};
+`;
+
 const Breadcrumb = ({
   children,
   links = [],
@@ -76,9 +80,9 @@ const Breadcrumb = ({
       <Row>
         <Column xs={12}>
           <StyledDiv>
-            <H1>
+            <StyledH2>
               {getNameLink(name)}
-            </H1>
+            </StyledH2>
           </StyledDiv>
         </Column>
       </Row>
diff --git a/ui/src/components/base-elements/story.js b/ui/src/components/base-elements/story.js
index e483a915..3316265a 100644
--- a/ui/src/components/base-elements/story.js
+++ b/ui/src/components/base-elements/story.js
@@ -4,9 +4,17 @@ const {
   storiesOf
 } = require('@kadira/storybook');
 
+const constants = require('../../shared/constants');
+
+const Column = require('../column');
+const Row = require('../row');
 const Base = require('../base');
 const BaseElements = require('./');
 
+const {
+  colors
+} = constants;
+
 const {
   H1,
   H2,
@@ -41,4 +49,60 @@ storiesOf('Base Elements', module)
       <Small>This is a Small</Small>
     </Base>
   ))
+  .add('Style Guide', () => (
+    <Base>
+      <div>
+        <Row>
+          <Column>
+            <H1>Special Heading - H1</H1>
+            <ul>
+              <li>Size - 36px</li>
+              <li>Line Height - 42px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <H2>Standard Heading - H2</H2>
+            <ul>
+              <li>Size - 24px</li>
+              <li>Line Height - 36px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <H3>Sub Heading - H3</H3>
+            <ul>
+              <li>Size - 16px</li>
+              <li>Line Height - 24px</li>
+              <li>Color - <code>{colors.base.secondary}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <P>Body Copy</P>
+            <ul>
+              <li>Size - 16px</li>
+              <li>Line Height - 24px</li>
+              <li>Color - <code>{colors.base.text}</code></li>
+            </ul>
+          </Column>
+        </Row>
+        <Row>
+          <Column>
+            <Small>Small Body Copy</Small>
+            <ul>
+              <li>Size - 14px</li>
+              <li>Line Height - 18px</li>
+              <li>Color - <code>{colors.base.text}</code></li>
+            </ul>
+          </Column>
+        </Row>
+      </div>
+    </Base>
+  ))
 ;
\ No newline at end of file
diff --git a/ui/src/components/colors/story.js b/ui/src/components/colors/story.js
index 25abeab6..bd7cd9d3 100644
--- a/ui/src/components/colors/story.js
+++ b/ui/src/components/colors/story.js
@@ -43,37 +43,39 @@ const convertCase = (val) => {
 
 storiesOf('Colors', module)
   .add('default', () => {
-    const renderColors = Object.keys(colors.base).sort().map( (color, index) => {
+    const renderColors = Object.keys(colors.base)
+        .sort()
+        .map( (color, index) => {
 
-      const StyledSquare = styled(Square)`
-        background: ${colors.base[color]}
-      `;
+          const StyledSquare = styled(Square)`
+            background: ${colors.base[color]}
+          `;
 
-      return (
-        <Column
-          key={index}
-          md={3}
-          xs={6}
-        >
-          <StyledWrapper>
-            <StyledSquare />
-            <StyledP>
-              <strong>Name</strong>:
-              <br />{convertCase(color)}
-            </StyledP>
+          return (
+            <Column
+              key={index}
+              md={3}
+              xs={6}
+            >
+              <StyledWrapper>
+                <StyledSquare />
+                <StyledP>
+                  <strong>Name</strong>:
+                  <br />{convertCase(color)}
+                </StyledP>
 
-            <StyledP>
-              <strong>Const</strong>:
-              <br />{color}
-            </StyledP>
+                <StyledP>
+                  <strong>Const</strong>:
+                  <br />{color}
+                </StyledP>
 
-            <StyledP>
-              <strong>Hex</strong>: {colors.base[color].toUpperCase()}
-            </StyledP>
-          </StyledWrapper>
-        </Column>
-      );
-    });
+                <StyledP>
+                  <strong>Hex</strong>: {colors.base[color].toUpperCase()}
+                </StyledP>
+              </StyledWrapper>
+            </Column>
+          );
+        });
 
     return (
       <Row>
diff --git a/ui/src/components/typography/story.js b/ui/src/components/typography/story.js
deleted file mode 100644
index fe74a933..00000000
--- a/ui/src/components/typography/story.js
+++ /dev/null
@@ -1,54 +0,0 @@
-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/composers.js b/ui/src/shared/composers/index.js
similarity index 100%
rename from ui/src/shared/composers.js
rename to ui/src/shared/composers/index.js
diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js
new file mode 100644
index 00000000..e732e33d
--- /dev/null
+++ b/ui/src/shared/composers/typography.js
@@ -0,0 +1,28 @@
+const Styled = require('styled-components');
+const constants = require('../../shared/constants');
+
+const {
+  colors
+} = constants;
+
+const {
+  css
+} = Styled;
+
+module.export = {
+  libreFranklin: css`
+    font-family: 'LibreFranklin', Helvetica, sans-serif;
+  `,
+  bold: css`
+    font-weight: 600;
+  `,
+  regular: css`
+    font-weight: normal;
+  `,
+  titleColor: css`
+    color: ${colors.base.secondary};
+  `,
+  bodyColor: css`
+    color: ${colors.base.text};
+  `,
+};
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 61815a27..46af4bae 100644
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@@ -46,8 +46,8 @@ const base = {
   ...white,
   text: '#646464',
   grey: '#D8D8D8',
-  disabled: "#FAFAFA",
-  background: "#FAFAFA",
+  disabled: '#FAFAFA',
+  background: '#FAFAFA',
   green: '#00AF66',
   greenDark: '#009858',
   orange: '#E38200',