Added the initial typographical styles

src/index.html

@@ -10,6 +10,10 @@
     <meta name="description" content="A single page application to support connecting constituents with their elected representatives.">
     <meta name="author" content="Cole Brown">
 
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link rel="preconnect" href="https://code.jquery.com/">
+
+    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300&family=Roboto+Slab:wght@600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles/main.css">
     <meta name="theme-color" content="">
 </head>
@@ -26,7 +30,7 @@
         </header>
 
         <main role="main" class="main">
-            <h1>Connet with your MP</h1>
+            <h1>Connect with your MP</h1>
 
             <section class="page-section page-section--form">
                 <form>

src/styles/core/_typography.scss

@@ -0,0 +1,153 @@
+// ----------------------------------------------------------------------------
+// Typography
+// ----------------------------------------------------------------------------
+//
+// Contains all site-wide typography styles. All base level HTML typographical
+// elements are styled here first, with mixins and variables to help with
+// granular includes at the component level.
+//
+// ----------------------------------------------------------------------------
+
+// -------------------------------------
+// Font Family Variables
+// -------------------------------------
+$font--primary: 'Lato', Tahoma, sans-serif;
+$font--header: 'Roboto Slab', Georgia, serif;
+
+
+
+// -------------------------------------
+// Typography Mixins
+// -------------------------------------
+// Default font mixin
+// This makes no assumption about sizes
+@mixin font-default {
+    font-family: $font--primary;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.625;
+}
+
+// Header font mixin
+// This makes no assumption about sizes
+@mixin font-header {
+    font-family: $font--header;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 1.2;
+}
+
+
+
+// -------------------------------------
+// Base Styles
+// -------------------------------------
+body {
+    @include font-default;
+    @include font-size(16);
+}
+
+body,
+input,
+textarea,
+button,
+select {
+    -webkit-font-smoothing: antialiased;
+    text-size-adjust: 100%;
+}
+
+p {
+    margin: $paragraph-gutter;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+a {
+    color: $primary-color;
+
+    &:hover {
+        color: rgba($primary-color, .7);
+    }
+
+    &:focus {
+        color: inherit;
+    }
+}
+
+small {
+    font-size: 80%;
+}
+
+// Lists
+ul,
+ol,
+dl {
+    margin: $paragraph-gutter;
+
+    &:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
+// -------------------------------------
+// Headings
+// -------------------------------------
+@include headings(1, 6) {
+    @include font-header;
+}
+
+h1,
+.h1 {
+    @include font-size(42);
+
+    @include bp(laptop) {
+        @include font-size(60);
+    }
+}
+
+h2,
+.h2 {
+    @include font-size(36);
+
+    @include bp(laptop) {
+        @include font-size(42);
+    }
+}
+
+h3,
+.h3 {
+    @include font-size(30);
+
+    @include bp(laptop) {
+        @include font-size(36);
+    }
+}
+
+h4,
+.h4 {
+    @include font-size(24);
+
+    @include bp(laptop) {
+        @include font-size(30);
+    }
+}
+
+h5,
+.h5 {
+    @include font-size(20);
+
+    @include bp(laptop) {
+        @include font-size(24);
+    }
+}
+
+h6,
+.h6 {
+    @include font-size(18);
+
+    @include bp(laptop) {
+        @include font-size(20);
+    }
+}

src/styles/main.scss

@@ -5,12 +5,13 @@
 
 // Tools
 @import './tools/variables';
+@import './tools/functions';
 @import './tools/mixins';
 @import './tools/helpers';
 
 // Core
 @import './core/grid';
-// @import './core/typography';
+@import './core/typography';
 // @import './core/forms';
 // @import './core/button/button';
 // @import './core/button/button--text';

src/styles/tools/_functions.scss

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------------
+// Functions
+// ----------------------------------------------------------------------------
+//
+// Global functions to help make math easy
+//
+// ----------------------------------------------------------------------------
+
+// Convert pixels to REMs
+@function calculate-rem($size) {
+    $rem-size: $size / 16;
+    @return $rem-size * 1rem;
+}

src/styles/tools/_variables.scss

@@ -15,9 +15,17 @@
 
 // Universal Colors
 $black: #000;
+$grey: #999;
 $white: #fff;
 
 // Theme Colors
+$primary-color: $black;
+$secondary-color: $white;
+
+$text-color: $black;
+$text-color-contrast: $white;
+$text-color-disabled: $grey;
+
 
 // -------------------------------------
 //  Media Query Breakpoints
@@ -29,6 +37,10 @@ $container--desktop: 1280px !default;
 $site-width: 1440px !default;
 
 
-// Spacing
 
+// -------------------------------------
+// Spacing
+// -------------------------------------
 $site-gutter: 20px;
+$section-gutter: ($site-gutter * 2) $site-gutter; // for padding value
+$paragraph-gutter: 0 0 20px !default; // for margin value