diff --git a/.storybook/metamask-storybook-theme.js b/.storybook/metamask-storybook-theme.js
index 707afc6e9..6623f4fe0 100644
--- a/.storybook/metamask-storybook-theme.js
+++ b/.storybook/metamask-storybook-theme.js
@@ -7,4 +7,8 @@ export default create({
   base: 'light',
   brandTitle: 'MetaMask Storybook',
   brandImage: logo,
+
+  // Typography
+  fontBase: 'Euclid, Roboto, Helvetica, Arial, sans-serif',
+  fontCode: 'Inconsolata, monospace',
 });
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 3f66a651e..4ac472636 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -7,50 +7,21 @@
 
 <style>
   * {
-    --blue-500: #037dd6;
-    --blue-400: #1098fc;
     --gray-pre-bg: #f8f8f8;
-    --font-family-base: Euclid, Roboto, Helvetica, Arial, sans-serif;
     --font-family-monospace: Inconsolata, monospace;
     --font-size-code: 0.875rem;
-    --line-height-code: 19px;
-    --font-size-base: 1rem;
-    --line-height-base: 1.7;
-
-    font-family: var(--font-family-base) !important;
-  }
-
-  h1,
-  h2 {
-    font-weight: bold !important;
-  }
-
-  p,
-  li {
-    font-size: var(--font-size-base) !important;
-    line-height: var(--line-height-base) !important;
   }
 
   .docblock-source {
     background: var(--gray-pre-bg) !important;
   }
 
-  code {
+  .docblock-source code {
     font-family: var(--font-family-monospace) !important;
     font-size: var(--font-size-code) !important;
   }
-  code * {
+  .docblock-source code * {
     font-family: var(--font-family-monospace) !important;
     font-size: var(--font-size-code) !important;
   }
-
-  a {
-    color: var(--blue-500) !important;
-  }
-
-  a:hover,
-  a:active,
-  a:focus {
-    color: var(--blue-400) !important;
-  }
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 89fdb4252..9e6fe2206 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { addDecorator, addParameters } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs } from '@storybook/addon-knobs';
 import { Provider } from 'react-redux';
 import configureStore from '../ui/store/store';
 import '../ui/css/index.scss';
@@ -13,6 +12,7 @@ import testData from './test-data.js';
 import { Router } from 'react-router-dom';
 import { createBrowserHistory } from 'history';
 import { _setBackgroundConnection } from '../ui/store/actions';
+import MetaMaskStorybookTheme from './metamask-storybook-theme';
 
 addParameters({
   backgrounds: {
@@ -22,6 +22,9 @@ addParameters({
       { name: 'dark', value: '#333333' },
     ],
   },
+  docs: {
+    theme: MetaMaskStorybookTheme,
+  },
   options: {
     storySort: {
       order: ['Getting Started', 'Components', ['UI', 'App'], 'Pages'],
@@ -82,5 +85,4 @@ const metamaskDecorator = (story, context) => {
   );
 };
 
-addDecorator(withKnobs);
 addDecorator(metamaskDecorator);