diff --git a/src/App.js b/src/App.js
index 7fb4518..722898f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,7 +11,6 @@ import NoMatch from './views/NoMatch'
 import Nav from './components/Nav'
 import GithubCorner from './components/GithubCorner'
 import ServiceWorkerNotifications from './components/ServiceWorkerNotifications'
-import globalStyles from './globalStyles'
 import data from './data.json'
 
 class App extends Component {
@@ -19,10 +18,6 @@ class App extends Component {
     data
   }
 
-  componentWillMount () {
-    globalStyles()
-  }
-
   getDocument = (collection, name) =>
     this.state.data[collection] &&
     this.state.data[collection].filter(page => page.name === name)[0]
diff --git a/src/globalStyles.css b/src/globalStyles.css
new file mode 100644
index 0000000..7b1656a
--- /dev/null
+++ b/src/globalStyles.css
@@ -0,0 +1,254 @@
+:root {
+  --primary: #ff3d3d;
+  --secondary: #212121;
+  --lightGrey: whitesmoke;
+  --midGrey: #cacaca;
+  --font-primary: 'Open Sans', sans-serif;
+  --font-system: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 62.5%;
+  min-height: 100%;
+  background: var(--lightGrey);
+}
+
+body {
+  font-family: var(--font-system);
+  min-height: 100%;
+  position: relative;
+  background: white;
+  color: var(--secondary);
+  font-size: 1.6em;
+  font-weight: 300;
+  letter-spacing: 0.01em;
+  line-height: 1.6;
+  -webkit-font-smoothing: antialiased;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+a {
+  color: var(--primary);
+}
+
+strong {
+  font-weight: 600;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  margin-bottom: 0.5em;
+}
+
+pre {
+  background: var(--lightGrey);
+  line-height: 1.45;
+  font-size: 85%;
+  border-radius: 3px;
+  padding: 16px;
+}
+
+code {
+  font-size: 85%;
+  padding: 0.15em 0;
+  background: var(--lightGrey);
+  border-radius: 3px;
+}
+code:before,
+code:after {
+  letter-spacing: -0.2em;
+  content: '\00a0';
+}
+pre code {
+  font-size: inherit;
+}
+pre code:before,
+pre code:after {
+  display: none;
+}
+
+/* Utility Classes */
+.light {
+  background-color: var(--lightGrey);
+}
+.white {
+  background-color: white;
+}
+.dark {
+  background-color: var(--primary);
+  color: white;
+}
+.dark h1,
+.dark h2,
+.dark h3,
+.dark h4,
+.dark h5,
+.dark h6 {
+  color: white;
+}
+
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.taCenter {
+  text-align: center;
+}
+.taLeft {
+  text-align: left;
+}
+.taRight {
+  text-align: right;
+}
+
+/* Layout */
+
+.Section {
+  width: 100%;
+  padding: 5rem 0;
+}
+.Section.thick {
+  padding: 10rem 0;
+}
+.Section.thin {
+  padding: 2.5rem 0;
+}
+.Section.noPadding {
+  padding: 0;
+}
+
+.Container {
+  max-width: 1467px;
+  width: 90vw;
+  margin: 0 auto;
+}
+.Container.skinny {
+  max-width: 888px;
+}
+.Container.skinnier {
+  max-width: 555px;
+}
+
+/* Flex */
+
+.Flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}
+.Flex.column {
+  flex-direction: column;
+}
+.Flex.justifyCenter {
+  justify-content: center;
+}
+.Flex.justifyEnd {
+  justify-content: flex-end;
+}
+.Flex.justifyBetween {
+  justify-content: space-between;
+}
+.Flex.justifyAround {
+  justify-content: space-around;
+}
+.Flex.alignStart {
+  align-items: flex-start;
+}
+.Flex.alignEnd {
+  align-items: flex-end;
+}
+.Flex.alignStretch {
+  align-items: stretch;
+}
+.Flex.fill {
+  height: 100%;
+  width: 100%;
+}
+
+/* Buttons */
+
+.Button {
+  border-radius: none;
+  display: inline-block;
+  background: var(--primary);
+  color: white;
+  text-transform: uppercase;
+  padding: 1.5rem;
+  border: 1px solid;
+  border-radius: 0.1rem;
+  border-color: var(--primary);
+  text-decoration: none;
+  font-size: 1.8rem;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  cursor: pointer;
+  max-width: 35rem;
+}
+.Button:hover,
+.Button:focus {
+  background: white;
+  border-color: currentColor;
+  color: var(--tertiary);
+}
+.Button[disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+  cursor: progress;
+}
+.Button.Button--tertiary {
+  background: var(--tertiary);
+  border-color: var(--tertiary);
+}
+.Button.Button--tertiary:hover,
+.Button.Button--tertiary:focus {
+  background: transparent;
+  border-color: currentColor;
+  color: var(--tertiary);
+}
+.Button.Button--inverted {
+  background: white;
+  border-color: white;
+  color: var(--tertiary);
+}
+.Button.Button--inverted:hover,
+.Button.Button--inverted:focus {
+  background: transparent;
+  border-color: currentColor;
+  color: white;
+  background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0)),
+    linear-gradient(
+      -32deg,
+      rgba(255, 255, 255, 0),
+      rgba(255, 255, 255, 0.05) 50%,
+      rgba(255, 255, 255, 0) 50%,
+      rgba(255, 255, 255, 0)
+    );
+}
diff --git a/src/globalStyles.js b/src/globalStyles.js
deleted file mode 100644
index d68f246..0000000
--- a/src/globalStyles.js
+++ /dev/null
@@ -1,93 +0,0 @@
-import { injectGlobal } from 'styled-components'
-import { normalize } from 'polished'
-
-export const font = {
-  primary: `'Open Sans', sans-serif`,
-  system: `-apple-system, BlinkMacSystemFont,
-    "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans",
-    "Droid Sans", "Helvetica Neue", sans-serif`
-}
-
-export const color = {
-  primary: '#ff3d3d',
-  secondary: '#212121',
-  lightGrey: 'whitesmoke'
-}
-
-export default () => injectGlobal`
-  ${normalize()}
-
-  html {
-    box-sizing: border-box;
-    font-size: 62.5%;
-    background: ${color.lightGrey};
-  }
-
-  body {
-    font-family: ${font.system};
-    min-height: 100vh;
-    position: relative;
-    background: white;
-    color: ${color.secondary};
-    font-size: 1.6em;
-    font-weight: 300;
-    letter-spacing: .01em;
-    line-height: 1.6;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  a {
-    color: ${color.primary};
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  p {
-    margin-top: 0;
-    margin-bottom: 1em;
-  }
-
-  h1, h2, h3, h4, h5 ,h6{
-    margin: 0;
-    margin-bottom: 0.5em;
-  }
-
-  pre {
-    background: ${color.lightGrey};
-    line-height: 1.45;
-    font-size: 85%;
-    border-radius: 3px;
-    padding: 16px;
-  }
-
-  code {
-    font-size: 85%;
-    padding: 0.15em 0;
-    background: ${color.lightGrey};
-    border-radius: 3px;
-
-    &:before,
-    &:after {
-      letter-spacing: -0.2em;
-      content: "\00a0";
-    }
-
-    pre & {
-      font-size: inherit;
-
-      &:before,
-      &:after {
-        display: none;
-      }
-    }
-  }
-`
diff --git a/src/index.js b/src/index.js
index 87119c4..f01f9c9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,8 @@ import App from './App'
 import registerServiceWorker from './registerServiceWorker'
 import './netlifyIdentity'
 import 'normalize.css'
+import './globalStyles.css'
+
 const rootEl = document.getElementById('root')
 render(<App />, rootEl)