Add spacing variables and update typography

src/components/footer/_footer.scss

@@ -33,7 +33,7 @@
     text-decoration: none;
 
     .icon {
-      @include font-size(9);
+      font-size: rem(48px);
     }
   }
 

src/stylesheets/components/_components-breadcrumbs.scss

@@ -8,8 +8,8 @@
 .breadcrumbs {
   @include font-size(0);
   list-style: none;
-  margin: 0;
-  padding: em(12 0);
+  margin: em(0 0 $spacing-large);
+  padding: 0;
 
   &__crumb {
     display: inline-block;

src/stylesheets/components/_components-buttons.scss

@@ -14,8 +14,8 @@
   color: $colour-nice-white;
   cursor: pointer;
   display: inline-block;
-  margin: 0 em(4) 0 0;
-  padding: 0 em(12);
+  margin: em(0 $spacing-x-small 0 0);
+  padding: em($spacing-x-small $spacing-medium);
   position: relative;
   text-decoration: none;
   vertical-align: top;

src/stylesheets/components/_components-phase.scss

@@ -15,13 +15,13 @@
 .phase-banner {
   border-bottom: 1px solid $colour-border;
   display: table;
-  margin: 0 0 em(24);
-  padding: em(4) 0;
+  margin: em(0 0 $spacing-large);
+  padding: em($spacing-x-small 0);
   width: 100%;
 
   &__tag {
     display: table-cell;
-    padding: 0 em(8) 0 0;
+    padding: em(0 $spacing-small 0 0);
   }
 
   &__label {
@@ -46,12 +46,13 @@
 /// @see .phase-banner
 /// @since 0.1.0
 .phase-tag {
+  @include font-size(-1);
   background-color: $colour-grey-1;
   color: $colour-nice-white;
   display: inline-block;
-  font-weight: 700;
+  font-weight: 900;
   letter-spacing: 1px;
-  padding: 0 .3rem;
+  padding: em($spacing-xx-small $spacing-small);
   text-decoration: none;
   text-transform: uppercase;
   vertical-align: middle;

src/stylesheets/settings/_settings-colours.scss

@@ -91,7 +91,7 @@ $colour-teal-3: #15434a;
 
 /// Page background colour
 /// @since 0.2.0
-$colour-page: $colour-nice-white;
+$colour-page: #fafafa;
 
 /// Link text colour
 /// @since 0.2.0

src/stylesheets/settings/_settings-spacing.scss

@@ -0,0 +1,31 @@
+////
+/// @group spacing
+////
+
+/// Extra extra small spacing
+/// @since 0.2.0
+$spacing-xx-small: 2;
+
+/// Extra small spacing
+/// @since 0.2.0
+$spacing-x-small: 4;
+
+/// Small spacing
+/// @since 0.2.0
+$spacing-small: 8;
+
+/// Medium spacing
+/// @since 0.2.0
+$spacing-medium: 16;
+
+/// Large spacing
+/// @since 0.2.0
+$spacing-large: 32;
+
+/// Extra large spacing
+/// @since 0.2.0
+$spacing-x-large: 48;
+
+/// Extra extra large spacing
+/// @since 0.2.0
+$spacing-xx-large: 64;

src/stylesheets/settings/_settings.scss

@@ -1,3 +1,4 @@
 @import 'settings-modular-scale',
 'settings-colours',
-'settings-variables';
+'settings-variables',
+'settings-spacing';

src/stylesheets/typography/_typography-global.scss

@@ -87,7 +87,7 @@ p,
     // TODO: Drop cap needs some work
     &--drop-cap {
       &:first-letter {
-        @include font-size($scale: 11);
+        font-size: 200%;
         float: left;
         font-weight: 300;
         padding: em(0 2px 0 0);

src/stylesheets/typography/_typography-headings.scss

@@ -27,47 +27,41 @@ h6,
 /// @since 0.1.0
 @mixin h1 {
   @include font(h1);
-  font-weight: 900;
 }
 
 /// Secondary heading. Used for h2 tag but can be used directly
 /// for semantic classes for visual styling.
 /// @since 0.1.0
 @mixin h2 {
   @include font(h2);
-  font-weight: 900;
 }
 
 /// Tertiary heading. Used for h3 tag but can be used directly
 /// for semantic classes for visual styling.
 /// @since 0.1.0
 @mixin h3 {
   @include font(h3);
-  font-weight: 900;
 }
 
 /// Fourth level heading. Used for h4 tag but can be used directly
 /// for semantic classes for visual styling.
 /// @since 0.1.0
 @mixin h4 {
   @include font(h4);
-  font-weight: 900;
 }
 
 /// Fifth level heading. Used for h5 tag but can be used directly
 /// for semantic classes for visual styling.
 /// @since 0.1.0
 @mixin h5 {
   @include font(h5);
-  font-weight: 900;
 }
 
 /// Sixth level heading. Used for h6 tag but can be used directly
 /// for semantic classes for visual styling.
 /// @since 0.1.0
 @mixin h6 {
   @include font(h6);
-  font-weight: 900;
 }
 
 h1,

src/stylesheets/typography/_typography-helpers.scss

@@ -35,7 +35,11 @@
 ///   $font-size: get-font-size(h1)
 /// @since 0.1.0
 @function get-font-size($scale) {
-  @return $nice-base-font-size * power($nice-type-ratio, get-scale-integer($scale));
+  $scale-integer: get-scale-integer($scale);
+  $font-map: map-get($font-sizes, $scale-integer);
+  @debug $scale-integer;
+  @debug $font-map;
+  @return map-get($font-map, fs);
 }
 
 /// Gets a numeric line height (in px) from a given scale multiplier.
@@ -48,7 +52,9 @@
 ///   $line-height: get-line-height(h1)
 /// @since 0.1.0
 @function get-line-height($scale) {
-  @return $nice-base-line-height + $nice-baseline * 2 * get-scale-integer($scale);
+  $scale-integer: get-scale-integer($scale);
+  $font-map: map-get($font-sizes, $scale-integer);
+  @return map-get($font-map, lh);
 }
 
 /// Applies font size and line-height for the given scale.
@@ -84,8 +90,10 @@
 @mixin font($scale) {
   @include font-size($scale);
 
-  $line-height: get-line-height($scale);
+  $scale-integer: get-scale-integer($scale);
+  $font-map: map-get($font-sizes, $scale-integer);
 
-  margin-bottom: rem($nice-base-font-size);
-  margin-top: rem(max($nice-base-font-size, $line-height / 2));
+  font-weight: map-get($font-map, fw);
+  margin-bottom: rem(map-get($font-map, mb));
+  margin-top: rem(map-get($font-map, mt));
 }

src/stylesheets/typography/_typography-settings.scss

@@ -12,11 +12,80 @@
 /// @prop {Integer} p [0] Paragraph
 /// @since 0.1.0
 $named-font-sizes: (
-  h1: 3,
-  h2: 2,
-  h3: 1,
-  h4: 0,
-  h5: 0,
-  h6: 0,
+  h1: 7,
+  h2: 6,
+  h3: 5,
+  h4: 4,
+  h5: 3,
+  h6: 2,
+  lead: 1,
   p: 0
 );
+
+/// Numeric font sizes
+/// @since 0.2.0
+$font-sizes: (
+  -1: (
+    fs: 14,
+    lh: 4 * 5,
+    fw: 400,
+    mb: $spacing-medium,
+    mt: $spacing-medium
+  ),
+  0: (
+    fs: 4 * 4,
+    lh: 4 * 6,
+    fw: 400,
+    mb: $spacing-medium,
+    mt: $spacing-medium
+  ),
+  1: (
+    fs: 4 * 5,
+    lh: 4 * 7,
+    fw: 400,
+    mb: $spacing-medium,
+    mt: $spacing-medium
+  ),
+  2: (
+    fs: 3 * 5,
+    lh: 4 * 5,
+    fw: 700,
+    mb: $spacing-medium,
+    mt: $spacing-large
+  ),
+  3: (
+    fs: 4 * 4,
+    lh: 4 * 5,
+    fw: 700,
+    mb: $spacing-medium,
+    mt: $spacing-large
+  ),
+  4: (
+    fs: 4 * 5,
+    lh: 4 * 7,
+    fw: 700,
+    mb: $spacing-medium,
+    mt: $spacing-large
+  ),
+  5: (
+    fs: 4 * 6,
+    lh: 4 * 8,
+    fw: 700,
+    mb: $spacing-medium,
+    mt: $spacing-large
+  ),
+  6: (
+    fs: 4 * 9,
+    lh: 4 * 11,
+    fw: 700,
+    mb: $spacing-medium,
+    mt: $spacing-large
+  ),
+  7: (
+    fs: 4 * 11,
+    lh: 4 * 12,
+    fw: 900,
+    mb: $spacing-medium,
+    mt: 0,
+  )
+);