diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index 10fbdf90..cc0111db 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -7,7 +7,8 @@ const {
   forms,
   links,
   tables,
-  typography
+  typography,
+  colors
 } = constants;
 
 const {
@@ -36,7 +37,7 @@ module.exports = styled.div`
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
-  color: #373A3C;
+  color: ${colors.fonts.regular};
   background-color: #FFFFFF;
 
   /**************************************************************************
diff --git a/ui/src/shared/constants/colors.js b/ui/src/shared/constants/colors.js
index 8026a1d9..9673add9 100644
--- a/ui/src/shared/constants/colors.js
+++ b/ui/src/shared/constants/colors.js
@@ -48,7 +48,7 @@ const colors = {
   ...brandInactive,
   ...notifications,
   ...metrics,
-  ...fonts
+  fonts
 };
 
 module.exports = colors;
diff --git a/ui/stories/index.js b/ui/stories/index.js
index 23d73418..dbc98099 100644
--- a/ui/stories/index.js
+++ b/ui/stories/index.js
@@ -217,16 +217,20 @@ storiesOf('Radio', module)
 
 storiesOf('Input', module)
   .add('Default', () => (
-    <Input placeholder="I am the placeholder" />
+    <Base>
+      <Input placeholder="I am the placeholder" />
+    </Base>
   ))
   .add('type=email', () => (
-    <Input
-      label='Email Address'
-      placeholder='Enter email'
-      type='email'
-    >
-      <small>We&apos;ll never share your email with anyone else.</small>
-    </Input>
+    <Base>
+      <Input
+        label='Email Address'
+        placeholder='Enter email'
+        type='email'
+      >
+        <small>We&apos;ll never share your email with anyone else.</small>
+      </Input>
+    </Base>
   ));
 
 storiesOf('Modal', module)