base.css

/* Color palette */
:root {
  --black: #333333;
  --greyish-brown: #565656;
  --lightgrey: #f0f0f0;
  --punchcodegreen: #7eff83;
  --light-grey: #dcdedc;
  --white: #ffffff;
  --error: #ff0043;
  --darkest: #1e1b1c;
  --lightgreen: #eeffef;
}

/* Text styles */

h1 {
  font-family: 'MaisonMono', sans-serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 1.29;
  text-align: left;
  color: #333333;
  color: var(--black);
}

h3 {
  font-family: 'Klim', sans-serif;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.33;
  text-align: right;
  color: #1e1b1c;
  color: var(--darkest);
}

.feature-body-copy {
  font-family: 'Klim', sans-serif;
  font-size: 24px;
  line-height: 1.33;
  text-align: left;
  color: #565656;
  color: var(--greyish-brown);
}

.primary-button {
  font-family: 'Klim', sans-serif;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  color: #1e1b1c;
  color: var(--darkest);
}

h6 {
  font-family: 'Klim', sans-serif;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.52;
  text-align: center;
  color: #1e1b1c;
  color: var(--darkest);
}

.body-copy {
  font-family: 'Klim', sans-serif;
  font-size: 21px;
  line-height: 1.52;
  text-align: left;
  color: #1e1b1c;
  color: var(--darkest);
}

.top-nav {
  font-family: 'GTPressura', sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2.2px;
  text-align: left;
  color: #000000;
}

.secondary-button {
  font-family: 'MaisonMono', sans-serif;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  color: #000000;
}

.tertiary-button {
  font-family: 'MaisonMono', sans-serif;
  font-size: 18px;
  font-weight: 300;
  text-align: center;
  color: #ffffff;
  color: var(--white);
}

fonts.css

@font-face {
  font-family: 'GTPressura';
  src: local('☺︎'),
       url('./fonts/grillitype/GT-Pressura-Bold.eot?') format('eot'),
       url('./fonts/grillitype/GT-Pressura-Bold.woff2') format('woff2')
       url('./fonts/grillitype/GT-Pressura-Bold.woff') format('woff');
  font-weight:normal;
  font-variant:normal;
}
@font-face {
  font-family: 'Klim';
  src: local('☺︎'),
       url('./fonts/klim/klim-Regular.eot?') format('eot'),
       url('./fonts/klim/klim-Regular.woff2') format('woff2'),
       url('./fonts/klim/klim-Regular.woff') format('woff');
  font-weight:normal;
  font-style:normal;
  font-variant:normal;
}
@font-face {
  font-family: 'Klim';
  src: local('☺︎'),
       url('./fonts/klim/klim-Bold.eot?') format('eot'),
       url('./fonts/klim/klim-Bold.woff2') format('woff2'),
       url('./fonts/klim/klim-Bold.woff') format('woff');
  font-weight:bold;
  font-style:normal;
  font-variant:normal;
}
@font-face {
  font-family: 'Klim';
  src: local('☺︎'),
       url('./fonts/klim/klim-RegularItalic.eot?') format('eot'),
       url('./fonts/klim/klim-RegularItalic.woff2') format('woff2'),
       url('./fonts/klim/klim-RegularItalic.woff') format('woff');
  font-weight:normal;
  font-style:italic;
  font-variant:normal;
}
@font-face {
  font-family: 'MaisonMono';
  src: local('☺︎'),
       url('./fonts/milieu-grotesque/MaisonMonoWEB-Light.woff2') format('woff2'),
       url('./fonts/milieu-grotesque/MaisonMonoWEB-Light.woff') format('woff');
  font-weight:normal;
  font-variant:normal;
}

index.js

import './styles/fonts.css'
import 'normalize.css/normalize.css'
import './styles/base.css'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
import registerServiceWorker from './registerServiceWorker'
import ReactGA from 'react-ga'

// google analytics
ReactGA.initialize('UA-110065913-1')

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();