Cleans up and refactors CSS

48 files changed, 145 insertions, 1292 deletions

diff --git a/src/css/imports/_background-position.css b/src/css/imports/_background-position.css
index 4d850b6..8da6ef5 100755
--- a/src/css/imports/_background-position.css
+++ b/src/css/imports/_background-position.css
@@ -1,126 +1,105 @@
-/*
-
-    BACKGROUND POSITION
-
-    Base:
-    bg = background
-
-    Modifiers:
-    -center = center center
-    -top = top center
-    -right = center right
-    -bottom = bottom center
-    -left = center left
-
-    Media Query Extensions:
-      -ns = not-small
-      -m  = medium
-      -l  = large
-
- */
-
 .bg-center { 
   background-repeat: no-repeat;
-  background-position: center center; 
+  background-position: center center;
 }
 
-.bg-top {    
-  background-repeat: no-repeat; 
-  background-position: top center;    
+.bg-top {
+  background-repeat: no-repeat;
+  background-position: top center;
 }
 
-.bg-right {  
-  background-repeat: no-repeat; 
-  background-position: center right;  
+.bg-right {
+  background-repeat: no-repeat;
+  background-position: center right;
 }
 
-.bg-bottom { 
-  background-repeat: no-repeat; 
-  background-position: bottom center; 
+.bg-bottom {
+  background-repeat: no-repeat;
+  background-position: bottom center;
 }
 
-.bg-left {   
-  background-repeat: no-repeat; 
-  background-position: center left;   
+.bg-left {
+  background-repeat: no-repeat;
+  background-position: center left;
 }
 
 @media (--breakpoint-not-small) {
-  .bg-center-ns { 
+  .bg-center-ns {
     background-repeat: no-repeat;
-    background-position: center center; 
+    background-position: center center;
   }
 
-  .bg-top-ns {    
-    background-repeat: no-repeat; 
-    background-position: top center;    
+  .bg-top-ns {
+    background-repeat: no-repeat;
+    background-position: top center;
   }
 
-  .bg-right-ns {  
-    background-repeat: no-repeat; 
-    background-position: center right;  
+  .bg-right-ns {
+    background-repeat: no-repeat;
+    background-position: center right;
   }
 
-  .bg-bottom-ns { 
-    background-repeat: no-repeat; 
-    background-position: bottom center; 
+  .bg-bottom-ns {
+    background-repeat: no-repeat;
+    background-position: bottom center;
   }
 
-  .bg-left-ns {   
-    background-repeat: no-repeat; 
-    background-position: center left;   
+  .bg-left-ns {
+    background-repeat: no-repeat;
+    background-position: center left;
   }
 }
 
 @media (--breakpoint-medium) {
-  .bg-center-m { 
+  .bg-center-m {
     background-repeat: no-repeat;
-    background-position: center center; 
+    background-position: center center;
   }
 
-  .bg-top-m {    
-    background-repeat: no-repeat; 
-    background-position: top center;    
+  .bg-top-m {
+    background-repeat: no-repeat;
+    background-position: top center;
   }
 
-  .bg-right-m {  
-    background-repeat: no-repeat; 
-    background-position: center right;  
+  .bg-right-m {
+    background-repeat: no-repeat;
+    background-position: center right;
   }
 
-  .bg-bottom-m { 
-    background-repeat: no-repeat; 
-    background-position: bottom center; 
+  .bg-bottom-m {
+    background-repeat: no-repeat;
+    background-position: bottom center;
   }
 
-  .bg-left-m {   
-    background-repeat: no-repeat; 
-    background-position: center left;   
+  .bg-left-m {
+    background-repeat: no-repeat;
+    background-position: center left;
   }
 }
 
 @media (--breakpoint-large) {
-  .bg-center-l { 
+  .bg-center-l {
     background-repeat: no-repeat;
-    background-position: center center; 
+    background-position: center center;
   }
 
-  .bg-top-l {    
-    background-repeat: no-repeat; 
-    background-position: top center;    
+  .bg-top-l {
+    background-repeat: no-repeat;
+    background-position: top center;
   }
 
-  .bg-right-l {  
-    background-repeat: no-repeat; 
-    background-position: center right;  
+  .bg-right-l {
+    background-repeat: no-repeat;
+    background-position: center right;
   }
 
-  .bg-bottom-l { 
-    background-repeat: no-repeat; 
-    background-position: bottom center; 
+  .bg-bottom-l {
+    background-repeat: no-repeat;
+    background-position: bottom center;
   }
 
-  .bg-left-l {   
-    background-repeat: no-repeat; 
-    background-position: center left;   
+  .bg-left-l {
+    background-repeat: no-repeat;
+    background-position: center left;
   }
 }
diff --git a/src/css/imports/_background-size.css b/src/css/imports/_background-size.css
index 18afe5c..bcb90a0 100755
--- a/src/css/imports/_background-size.css
+++ b/src/css/imports/_background-size.css
@@ -1,22 +1,5 @@
-/*
-
-   BACKGROUND SIZE
-   Docs: http://tachyons.io/docs/themes/background-size/
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-/*
-  Often used in combination with background image set as an inline style
-  on an html element.
-*/
-
-  .cover { background-size: cover!important; }
-  .contain { background-size: contain!important; }
+.cover { background-size: cover!important; }
+.contain { background-size: contain!important; }
 
 @media (--breakpoint-not-small) {
   .cover-ns { background-size: cover!important; }
diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css
index 8cde05d..232122f 100755
--- a/src/css/imports/_border-radius.css
+++ b/src/css/imports/_border-radius.css
@@ -1,7 +1,11 @@
 .br0 {        border-radius: 0!important; }
+
 .br1 {        border-radius: var(--border-radius); }
+
 .br-100 {     border-radius: 100%; }
+
 .br-pill {    border-radius: 9999px; }
+
 .br--bottom {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
@@ -21,9 +25,13 @@
 
 @media (--breakpoint-not-small) {
 .br0-ns {     border-radius: 0; }
+
 .br1-ns {     border-radius: var(--border-radius); }
+
 .br-100-ns {  border-radius: 100%; }
+
 .br-pill-ns { border-radius: 9999px; }
+
 .br--bottom-ns {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
@@ -44,9 +52,13 @@
 
 @media (--breakpoint-medium) {
 .br0-m {     border-radius: 0; }
+
 .br1-m {     border-radius: var(--border-radius); }
+
 .br-100-m {  border-radius: 100%; }
+
 .br-pill-m { border-radius: 9999px; }
+
 .br--bottom-m {
 		border-top-left-radius: 0;
 		border-top-right-radius: 0;
@@ -67,9 +79,13 @@
 
 @media (--breakpoint-large) {
 .br0-l {     border-radius: 0; }
+
 .br1-l {     border-radius: var(--border-radius); }
+
 .br-100-l {  border-radius: 100%; }
+
 .br-pill-l { border-radius: 9999px; }
+
 .br--bottom-l {
 		border-radius-top-left: 0;
 		border-radius-top-right: 0;
diff --git a/src/css/imports/_border-style.css b/src/css/imports/_border-style.css
index b9eb61b..ec3c8d4 100755
--- a/src/css/imports/_border-style.css
+++ b/src/css/imports/_border-style.css
@@ -1,26 +1,3 @@
-/*
-
-   BORDER STYLES
-   Docs: http://tachyons.io/docs/themes/borders/
-
-   Depends on base border module in _borders.css
-
-   Base:
-     b = border-style
-
-   Modifiers:
-     --none   = none
-     --dotted = dotted
-     --dashed = dashed
-     --solid  = solid
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
- */
-
 .b--dotted { border-style: dotted; }
 .b--dashed { border-style: dashed; }
 .b--solid {  border-style: solid; }
diff --git a/src/css/imports/_border-widths.css b/src/css/imports/_border-widths.css
index 2af7d7e..9067787 100755
--- a/src/css/imports/_border-widths.css
+++ b/src/css/imports/_border-widths.css
@@ -1,26 +1,3 @@
-/*
-
-   BORDER WIDTHS
-   Docs: http://tachyons.io/docs/themes/borders/
-
-   Base:
-     bw = border-width
-
-   Modifiers:
-     0 = 0 width border
-     1 = 1st step in border-width scale
-     2 = 2nd step in border-width scale
-     3 = 3rd step in border-width scale
-     4 = 4th step in border-width scale
-     5 = 5th step in border-width scale
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .bw0 { border-width: 0; }
 .bw1 { border-width: .125rem; }
 .bw2 { border-width: var(--spacing-extra-small); }
diff --git a/src/css/imports/_borders.css b/src/css/imports/_borders.css
index ce49e42..42cbe8e 100755
--- a/src/css/imports/_borders.css
+++ b/src/css/imports/_borders.css
@@ -1,32 +1,9 @@
-/*
-
-    BORDERS
-    Docs: http://tachyons.io/docs/themes/borders/
-
-    Base:
-      b = border
-
-    Modifiers:
-      a = all
-      t = top
-      r = right
-      b = bottom
-      l = left
-      n = none
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-  .ba { border-style: solid; border-width: 1px; }
-  .bt { border-top-style: solid; border-top-width: 1px; }
-  .br { border-right-style: solid; border-right-width: 1px; }
-  .bb { border-bottom-style: solid; border-bottom-width: 1px; }
-  .bl { border-left-style: solid; border-left-width: 1px; }
-  .bn { border-style: none; border-width: 0; }
+.ba { border-style: solid; border-width: 1px; }
+.bt { border-top-style: solid; border-top-width: 1px; }
+.br { border-right-style: solid; border-right-width: 1px; }
+.bb { border-bottom-style: solid; border-bottom-width: 1px; }
+.bl { border-left-style: solid; border-left-width: 1px; }
+.bn { border-style: none; border-width: 0; }
 
 
 @media (--breakpoint-not-small) {
@@ -55,4 +32,3 @@
   .bl-l { border-left-style: solid; border-left-width: 1px; }
   .bn-l { border-style: none; border-width: 0; }
 }
-
diff --git a/src/css/imports/_box-shadow.css b/src/css/imports/_box-shadow.css
deleted file mode 100755
index e744bc7..0000000
--- a/src/css/imports/_box-shadow.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-
-  BOX-SHADOW
-  Docs: http://tachyons.io/docs/themes/box-shadow/
-
-  Media Query Extensions:
-   -ns = not-small
-   -m  = medium
-   -l  = large
-
- */
-
-.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
-.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-
-@media (--breakpoint-not-small) {
-  .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-}
-
-@media (--breakpoint-medium) {
-  .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-}
-
-@media (--breakpoint-large) {
-  .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-  .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
-}
diff --git a/src/css/imports/_clears.css b/src/css/imports/_clears.css
index 14d8e1d..43bf2b2 100755
--- a/src/css/imports/_clears.css
+++ b/src/css/imports/_clears.css
@@ -1,13 +1,3 @@
-/*
-
-   CLEARFIX
-   http://tachyons.io/docs/layout/clearfix/
-
-*/
-
-/* Nicolas Gallaghers Clearfix solution
-   Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
-
 .cf:before,
 .cf:after { content: " "; display: table; }
 .cf:after { clear: both; }
diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css
index 7449191..f13fe57 100755
--- a/src/css/imports/_colors.css
+++ b/src/css/imports/_colors.css
@@ -1,17 +1,3 @@
-/* Color variables */
-
-:root {
-  --primary: rgba(255, 68, 0, 1);
-  --highlight: rgba(254, 213, 198, 1);
-  --white: rgba(255, 255, 255, 1);
-  --off-white: rgba(255, 253, 252, 1);
-  --grey-1: rgba(245, 243, 242, 1);
-  --grey-2: rgba(235, 231, 230, 1);
-  --grey-3: rgba(89, 87, 86, 1);
-  --grey-4: rgba(66, 64, 64, 1);
-  --black: rgba(43, 37, 35, 1);
-}
-
 /* Text colors */
 
 .primary {
diff --git a/src/css/imports/_coordinates.css b/src/css/imports/_coordinates.css
index 53e43de..749fed8 100755
--- a/src/css/imports/_coordinates.css
+++ b/src/css/imports/_coordinates.css
@@ -1,30 +1,3 @@
-/*
-
-   COORDINATES
-   Docs: http://tachyons.io/docs/layout/position/
-
-   Use in combination with the position module.
-
-   Base:
-     top
-     bottom
-     right
-     left
-
-   Modifiers:
-     -0  = literal value 0
-     -1  = literal value 1
-     -2  = literal value 2
-     --1 = literal value -1
-     --2 = literal value -2
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .top-0    { top:    0; }
 .right-0  { right:  0; }
 .bottom-0 { bottom: 0; }
diff --git a/src/css/imports/_debug-children.css b/src/css/imports/_debug-children.css
index 10204da..8ce1039 100755
--- a/src/css/imports/_debug-children.css
+++ b/src/css/imports/_debug-children.css
@@ -1,14 +1,3 @@
-/*
-
-  DEBUG CHILDREN
-  Docs: http://tachyons.io/docs/debug/
-
-  Just add the debug class to any element to see outlines on its
-  children.
-
-*/
-
 .debug * { outline: 1px solid gold; }
 .debug-white * { outline: 1px solid white; }
 .debug-black * { outline: 1px solid black; }
-
diff --git a/src/css/imports/_debug-grid.css b/src/css/imports/_debug-grid.css
index c5beeb8..2aa48fa 100755
--- a/src/css/imports/_debug-grid.css
+++ b/src/css/imports/_debug-grid.css
@@ -1,14 +1,3 @@
-/*
-
-   DEBUG GRID
-   http://tachyons.io/docs/debug-grid/
-
-   Can be useful for debugging layout issues
-   or helping to make sure things line up perfectly.
-   Just tack one of these classes onto a parent element.
-
-*/
-
 .debug-grid {
   background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left;
 }
diff --git a/src/css/imports/_debug.css b/src/css/imports/_debug.css
index f09f2b5..3054635 100755
--- a/src/css/imports/_debug.css
+++ b/src/css/imports/_debug.css
@@ -1,16 +1,3 @@
-/* 
- 
-  DEBUG (PESTICIDE)
-  Docs: http://tachyons.io/docs/debug/
-
-  This is a partial you have to manually include in your
-  build file. It places a different colored outline on 
-  each element which can help you debug layout issues.
-  There is also a handy chrome extension that can 
-  be found at http://pesticide.io
-
-*/
-
 body {        outline: 1px solid  #2980B9!important; }
 article {     outline: 1px solid  #3498DB!important; }
 nav {         outline: 1px solid  #0088C3!important; }
@@ -129,4 +116,3 @@ rp {          outline: 1px solid #803E49!important; }
 span {        outline: 1px solid #CC2643!important; }
 br {          outline: 1px solid #DB687D!important; }
 wbr {         outline: 1px solid #DB175B!important; }
-
diff --git a/src/css/imports/_display.css b/src/css/imports/_display.css
index 13ef1be..0a7c8f7 100755
--- a/src/css/imports/_display.css
+++ b/src/css/imports/_display.css
@@ -1,29 +1,3 @@
-/*
-
-   DISPLAY
-   Docs: http://tachyons.io/docs/layout/display
-
-   Base:
-    d = display
-
-   Modifiers:
-    n     = none
-    b     = block
-    ib    = inline-block
-    it    = inline-table
-    t     = table
-    tc    = table-cell
-    tr    = table-row
-    tcol  = table-column
-    tcolg = table-column-group
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .dn {              display: none; }
 .di {              display: inline; }
 .db {              display: block; }
@@ -101,4 +75,3 @@
     width: 100%;
   }
 }
-
diff --git a/src/css/imports/_flexbox.css b/src/css/imports/_flexbox.css
index 19409b6..e573a69 100755
--- a/src/css/imports/_flexbox.css
+++ b/src/css/imports/_flexbox.css
@@ -1,14 +1,3 @@
-/*
-
-  FLEXBOX
-
-  Media Query Extensions:
-   -ns = not-small
-   -m  = medium
-   -l  = large
-
-*/
-
 .flex { display: flex; }
 .inline-flex { display: inline-flex; }
 
diff --git a/src/css/imports/_floats.css b/src/css/imports/_floats.css
index d5b3912..8735205 100755
--- a/src/css/imports/_floats.css
+++ b/src/css/imports/_floats.css
@@ -1,31 +1,3 @@
-/*
-
-   FLOATS
-   http://tachyons.io/docs/layout/floats/
-
-   1. Floated elements are automatically rendered as block level elements.
-      Setting floats to display inline will fix the double margin bug in
-      ie6. You know... just in case.
-
-   2. Don't forget to clearfix your floats with .cf
-
-   Base:
-     f = float
-
-   Modifiers:
-     l = left
-     r = right
-     n = none
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-
-
 .fl { float: left;  _display: inline; }
 .fr { float: right; _display: inline; }
 .fn { float: none; }
diff --git a/src/css/imports/_font-family.css b/src/css/imports/_font-family.css
deleted file mode 100755
index f71d65d..0000000
--- a/src/css/imports/_font-family.css
+++ /dev/null
@@ -1,99 +0,0 @@
-/*
-
-   FONT FAMILY GROUPS
-   Docs: http://tachyons.io/docs/typography/font-family/
-
-*/
-
-
-.sans-serif {
-  font-family: Nunito Sans, -apple-system, BlinkMacSystemFont,
-               'avenir next', avenir,
-               helvetica, 'helvetica neue',
-               ubuntu,
-               roboto, noto,
-               'segoe ui', arial,
-               sans-serif;
-}
-
-.serif {
-  font-family: georgia,
-               times,
-               serif;
-}
-
-.system-sans-serif {
-  font-family: sans-serif;
-}
-
-.system-serif {
-  font-family: serif;
-}
-
-
-/* Monospaced Typefaces (for code) */
-
-/* From http://cssfontstack.com */
-code, .code {
-  font-family: Consolas,
-               monaco,
-               monospace;
-}
-
-.courier {
-  font-family: 'Courier Next',
-               courier,
-               monospace;
-}
-
-
-/* Sans-Serif Typefaces */
-
-.helvetica {
-  font-family: 'helvetica neue', helvetica,
-               sans-serif;
-}
-
-.avenir {
-  font-family: 'avenir next', avenir,
-               sans-serif;
-}
-
-
-/* Serif Typefaces */
-
-.athelas {
-  font-family: athelas,
-               georgia,
-               serif;
-}
-
-.georgia {
-  font-family: georgia,
-               serif;
-}
-
-.times {
-  font-family: times,
-               serif;
-}
-
-.bodoni {
-  font-family: "Bodoni MT",
-                serif;
-}
-
-.calisto {
-  font-family: "Calisto MT",
-                serif;
-}
-
-.garamond {
-  font-family: garamond,
-               serif;
-}
-
-.baskerville {
-  font-family: baskerville,
-               serif;
-}
diff --git a/src/css/imports/_font-style.css b/src/css/imports/_font-style.css
index d095dfe..08f20af 100755
--- a/src/css/imports/_font-style.css
+++ b/src/css/imports/_font-style.css
@@ -1,15 +1,3 @@
-/*
-
-   FONT STYLE
-   Docs: http://tachyons.io/docs/typography/font-style/
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .i         { font-style: italic; }
 .fs-normal { font-style: normal; }
 
diff --git a/src/css/imports/_font-weight.css b/src/css/imports/_font-weight.css
index 990a05a..fabba82 100755
--- a/src/css/imports/_font-weight.css
+++ b/src/css/imports/_font-weight.css
@@ -1,29 +1,3 @@
-/*
-
-   FONT WEIGHT
-   Docs: http://tachyons.io/docs/typography/font-weight/
-
-   Base
-     fw = font-weight
-
-   Modifiers:
-     1 = literal value 100
-     2 = literal value 200
-     3 = literal value 300
-     4 = literal value 400
-     5 = literal value 500
-     6 = literal value 600
-     7 = literal value 700
-     8 = literal value 800
-     9 = literal value 900
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .normal { font-weight: normal; }
 .b      { font-weight: bold; }
 .fw1    { font-weight: 100; }
diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css
index 3d7cab3..553bc4c 100755
--- a/src/css/imports/_forms.css
+++ b/src/css/imports/_forms.css
@@ -61,8 +61,8 @@ label
 {
   font-size: .875rem;
   font-weight: 800;
-  color: var(--primary);
-  background-color: var(--grey-2);
+  color: var(--white);
+  background-color: var(--primary);
   border-radius: var(--border-radius);
   padding: var(--spacing-extra-small) var(--spacing-small);
   position: absolute;
diff --git a/src/css/imports/_heights.css b/src/css/imports/_heights.css
index 6ada204..68487ab 100755
--- a/src/css/imports/_heights.css
+++ b/src/css/imports/_heights.css
@@ -1,38 +1,3 @@
-/*
-
-   HEIGHTS
-   Docs: http://tachyons.io/docs/layout/heights/
-
-   Base:
-     h = height
-     min-h = min-height
-     min-vh = min-height vertical screen height
-     vh = vertical screen height
-
-   Modifiers
-     1 = 1st step in height scale
-     2 = 2nd step in height scale
-     3 = 3rd step in height scale
-     4 = 4th step in height scale
-     5 = 5th step in height scale
-
-     -25   = literal value 25%
-     -50   = literal value 50%
-     -75   = literal value 75%
-     -100  = literal value 100%
-
-     -auto = string value of auto
-     -inherit = string value of inherit
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-/* Height Scale */
-
 .h1 { height: var(--spacing-medium); }
 .h2 { height: 2rem; }
 .h3 { height: 4rem; }
diff --git a/src/css/imports/_images.css b/src/css/imports/_images.css
index 4cc50a4..23bab47 100755
--- a/src/css/imports/_images.css
+++ b/src/css/imports/_images.css
@@ -2,6 +2,7 @@ img {
   max-width: 100%;
 }
 
+/* Remove border-radiius from full-width images */
 img:not(.w-100) {
   border-radius: var(--border-radius);
 }
diff --git a/src/css/imports/_letter-spacing.css b/src/css/imports/_letter-spacing.css
deleted file mode 100755
index d226513..0000000
--- a/src/css/imports/_letter-spacing.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
-
-   LETTER SPACING
-   Docs: http://tachyons.io/docs/typography/tracking/
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-.tracked       { letter-spacing:  .1em; }
-.tracked-tight { letter-spacing: -.05em; }
-.tracked-mega  { letter-spacing:  .25em; }
-
-@media (--breakpoint-not-small) {
-  .tracked-ns       { letter-spacing:  .1em; }
-  .tracked-tight-ns { letter-spacing: -.05em; }
-  .tracked-mega-ns  { letter-spacing:  .25em; }
-}
-
-@media (--breakpoint-medium) {
-  .tracked-m       { letter-spacing:  .1em; }
-  .tracked-tight-m { letter-spacing: -.05em; }
-  .tracked-mega-m  { letter-spacing:  .25em; }
-}
-
-@media (--breakpoint-large) {
-  .tracked-l       { letter-spacing:  .1em; }
-  .tracked-tight-l { letter-spacing: -.05em; }
-  .tracked-mega-l  { letter-spacing:  .25em; }
-}
diff --git a/src/css/imports/_line-height.css b/src/css/imports/_line-height.css
index afbef0d..8d08a4c 100755
--- a/src/css/imports/_line-height.css
+++ b/src/css/imports/_line-height.css
@@ -1,18 +1,6 @@
-/*
-
-   LINE HEIGHT / LEADING
-   Docs: http://tachyons.io/docs/typography/line-height
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-  .lh-solid { line-height: 1; }
-  .lh-title { line-height: 1.25; }
-  .lh-copy  { line-height: 1.5; }
+.lh-solid { line-height: 1; }
+.lh-title { line-height: 1.25; }
+.lh-copy  { line-height: 1.5; }
 
 @media (--breakpoint-not-small) {
   .lh-solid-ns { line-height: 1; }
@@ -31,4 +19,3 @@
   .lh-title-l { line-height: 1.25; }
   .lh-copy-l  { line-height: 1.5; }
 }
-
diff --git a/src/css/imports/_links.css b/src/css/imports/_links.css
index 243b5f0..7d7da39 100755
--- a/src/css/imports/_links.css
+++ b/src/css/imports/_links.css
@@ -1,13 +1,6 @@
-/*
-
-   LINKS
-   Docs: http://tachyons.io/docs/elements/links/
-
-*/
-
 .link {
   text-decoration: none;
-  transition: color .15s ease-in;
+  transition: var(--hover-transition);
   color: inherit;
 }
 
diff --git a/src/css/imports/_lists.css b/src/css/imports/_lists.css
index 88ca28d..13f96b7 100755
--- a/src/css/imports/_lists.css
+++ b/src/css/imports/_lists.css
@@ -1,8 +1 @@
-/*
-
-   LISTS
-   http://tachyons.io/docs/elements/lists/
-
-*/
-
-.list {         list-style-type: none; }
+.list { list-style-type: none; }
diff --git a/src/css/imports/_max-widths.css b/src/css/imports/_max-widths.css
index 516a31a..821e117 100755
--- a/src/css/imports/_max-widths.css
+++ b/src/css/imports/_max-widths.css
@@ -1,41 +1,8 @@
-/*
-
-   MAX WIDTHS
-   Docs: http://tachyons.io/docs/layout/max-widths/
-
-   Base:
-     mw = max-width
-
-   Modifiers
-     1 = 1st step in width scale
-     2 = 2nd step in width scale
-     3 = 3rd step in width scale
-     4 = 4th step in width scale
-     5 = 5th step in width scale
-     6 = 6st step in width scale
-     7 = 7nd step in width scale
-     8 = 8rd step in width scale
-     9 = 9th step in width scale
-
-     -100 = literal value 100%
-
-     -none  = string value none
-
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-/* Max Width Percentages */
-
 .mw-100  { max-width: 100%; }
 
 /* Max Width Scale */
 
-.mw1  {  max-width: var(--spacing-medium); }
+.mw1  {  max-width: 1rem; }
 .mw2  {  max-width: 2rem; }
 .mw3  {  max-width: 4rem; }
 .mw4  {  max-width: 8rem; }
@@ -52,7 +19,7 @@
 @media (--breakpoint-not-small) {
   .mw-100-ns  { max-width: 100%; }
 
-  .mw1-ns  {  max-width: var(--spacing-medium); }
+  .mw1-ns  {  max-width: 1rem; }
   .mw2-ns  {  max-width: 2rem; }
   .mw3-ns  {  max-width: 4rem; }
   .mw4-ns  {  max-width: 8rem; }
@@ -68,7 +35,7 @@
 @media (--breakpoint-medium) {
   .mw-100-m  { max-width: 100%; }
 
-  .mw1-m  {  max-width: var(--spacing-medium); }
+  .mw1-m  {  max-width: 1rem; }
   .mw2-m  {  max-width: 2rem; }
   .mw3-m  {  max-width: 4rem; }
   .mw4-m  {  max-width: 8rem; }
@@ -84,7 +51,7 @@
 @media (--breakpoint-large) {
   .mw-100-l  { max-width: 100%; }
 
-  .mw1-l  {  max-width: var(--spacing-medium); }
+  .mw1-l  {  max-width: 1rem; }
   .mw2-l  {  max-width: 2rem; }
   .mw3-l  {  max-width: 4rem; }
   .mw4-l  {  max-width: 8rem; }
diff --git a/src/css/imports/_module-template.css b/src/css/imports/_module-template.css
deleted file mode 100755
index 0447e0c..0000000
--- a/src/css/imports/_module-template.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/*
-
-  MODULE NAME
-
-  Use this scaffolding to create or extend your own modules with tachyons
-  style architecture.
-
-*/
-
-
-@media (--breakpoint-not-small) {
-
-}
-
-@media (--breakpoint-medium) {
-
-}
-
-@media (--breakpoint-large) {
-
-}
-
diff --git a/src/css/imports/_overflow.css b/src/css/imports/_overflow.css
index 82ca8eb..d65b69d 100755
--- a/src/css/imports/_overflow.css
+++ b/src/css/imports/_overflow.css
@@ -1,14 +1,3 @@
-/*
-
-    OVERFLOW
-
-    Media Query Extensions:
-      -ns = not-small
-      -m  = medium
-      -l  = large
-
- */
-
 .overflow-visible { overflow: visible; }
 .overflow-hidden { overflow: hidden; }
 .overflow-scroll { overflow: scroll; }
diff --git a/src/css/imports/_position.css b/src/css/imports/_position.css
index eaccbdf..93f147f 100755
--- a/src/css/imports/_position.css
+++ b/src/css/imports/_position.css
@@ -1,15 +1,3 @@
-/*
-
-   POSITIONING
-   Docs: http://tachyons.io/docs/layout/position/
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .static { position: static; }
 .relative  { position: relative; }
 .absolute  { position: absolute; }
diff --git a/src/css/imports/_skins-pseudo.css b/src/css/imports/_skins-pseudo.css
deleted file mode 100755
index 44f1f02..0000000
--- a/src/css/imports/_skins-pseudo.css
+++ /dev/null
@@ -1,159 +0,0 @@
-/* 
-  
-   SKINS:PSEUDO
-
-   Customize the color of an element when
-   it is focused or hovered over.
- 
- */
-
-.hover-black:hover, 
-.hover-black:focus { color: var(--black); }
-.hover-near-black:hover, 
-.hover-near-black:focus { color: var(--near-black); }
-.hover-dark-gray:hover, 
-.hover-dark-gray:focus { color: var(--dark-gray); }
-.hover-mid-gray:hover, 
-.hover-mid-gray:focus { color: var(--mid-gray); }
-.hover-gray:hover, 
-.hover-gray:focus { color: var(--gray); }
-.hover-silver:hover, 
-.hover-silver:focus { color: var(--silver); }
-.hover-light-silver:hover, 
-.hover-light-silver:focus { color: var(--light-silver); }
-.hover-moon-gray:hover, 
-.hover-moon-gray:focus { color: var(--moon-gray); }
-.hover-light-gray:hover, 
-.hover-light-gray:focus { color: var(--light-gray); }
-.hover-near-white:hover, 
-.hover-near-white:focus { color: var(--near-white); }
-.hover-white:hover, 
-.hover-white:focus { color: var(--white); }
-
-.hover-bg-black:hover, 
-.hover-bg-black:focus { background-color: var(--black); }
-.hover-bg-near-black:hover, 
-.hover-bg-near-black:focus { background-color: var(--near-black); }
-.hover-bg-dark-gray:hover, 
-.hover-bg-dark-gray:focus { background-color: var(--dark-gray); }
-.hover-bg-dark-gray:focus, 
-.hover-bg-mid-gray:hover { background-color: var(--mid-gray); }
-.hover-bg-gray:hover, 
-.hover-bg-gray:focus { background-color: var(--gray); }
-.hover-bg-silver:hover, 
-.hover-bg-silver:focus { background-color: var(--silver); }
-.hover-bg-light-silver:hover, 
-.hover-bg-light-silver:focus { background-color: var(--light-silver); }
-.hover-bg-moon-gray:hover, 
-.hover-bg-moon-gray:focus { background-color: var(--moon-gray); }
-.hover-bg-light-gray:hover, 
-.hover-bg-light-gray:focus { background-color: var(--light-gray); }
-.hover-bg-near-white:hover, 
-.hover-bg-near-white:focus { background-color: var(--near-white); }
-.hover-bg-white:hover, 
-.hover-bg-white:focus { background-color: var(--white); }
-.hover-bg-transparent:hover, 
-.hover-bg-transparent:focus { background-color: var(--transparent); }
-
-.hover-dark-red:hover,
-.hover-dark-red:focus { color: var(--dark-red); }
-.hover-red:hover,
-.hover-red:focus { color: var(--red); }
-.hover-light-red:hover,
-.hover-light-red:focus { color: var(--light-red); }
-.hover-orange:hover,
-.hover-orange:focus { color: var(--orange); }
-.hover-gold:hover,
-.hover-gold:focus { color: var(--gold); }
-.hover-yellow:hover,
-.hover-yellow:focus { color: var(--yellow); }
-.hover-light-yellow:hover,
-.hover-light-yellow:focus { color: var(--light-yellow); }
-.hover-purple:hover,
-.hover-purple:focus { color: var(--purple); }
-.hover-light-purple:hover,
-.hover-light-purple:focus { color: var(--light-purple); }
-.hover-dark-pink:hover,
-.hover-dark-pink:focus { color: var(--dark-pink); }
-.hover-hot-pink:hover,
-.hover-hot-pink:focus { color: var(--hot-pink); }
-.hover-pink:hover,
-.hover-pink:focus { color: var(--pink); }
-.hover-light-pink:hover,
-.hover-light-pink:focus { color: var(--light-pink); }
-.hover-dark-green:hover,
-.hover-dark-green:focus { color: var(--dark-green); }
-.hover-green:hover,
-.hover-green:focus { color: var(--green); }
-.hover-light-green:hover,
-.hover-light-green:focus { color: var(--light-green); }
-.hover-navy:hover,
-.hover-navy:focus { color: var(--navy); }
-.hover-dark-blue:hover,
-.hover-dark-blue:focus { color: var(--dark-blue); }
-.hover-blue:hover,
-.hover-blue:focus { color: var(--blue); }
-.hover-light-blue:hover,
-.hover-light-blue:focus { color: var(--light-blue); }
-.hover-lightest-blue:hover,
-.hover-lightest-blue:focus { color: var(--lightest-blue); }
-.hover-washed-blue:hover,
-.hover-washed-blue:focus { color: var(--washed-blue); }
-.hover-washed-green:hover,
-.hover-washed-green:focus { color: var(--washed-green); }
-.hover-washed-yellow:hover,
-.hover-washed-yellow:focus { color: var(--washed-yellow); }
-.hover-washed-red:hover,
-.hover-washed-red:focus { color: var(--washed-red); }
-
-.hover-bg-dark-red:hover,
-.hover-bg-dark-red:focus { background-color: var(--dark-red); }
-.hover-bg-red:hover,
-.hover-bg-red:focus { background-color: var(--red); }
-.hover-bg-light-red:hover,
-.hover-bg-light-red:focus { background-color: var(--light-red); }
-.hover-bg-orange:hover,
-.hover-bg-orange:focus { background-color: var(--orange); }
-.hover-bg-gold:hover,
-.hover-bg-gold:focus { background-color: var(--gold); }
-.hover-bg-yellow:hover,
-.hover-bg-yellow:focus { background-color: var(--yellow); }
-.hover-bg-light-yellow:hover,
-.hover-bg-light-yellow:focus { background-color: var(--light-yellow); }
-.hover-bg-purple:hover,
-.hover-bg-purple:focus { background-color: var(--purple); }
-.hover-bg-light-purple:hover,
-.hover-bg-light-purple:focus { background-color: var(--light-purple); }
-.hover-bg-dark-pink:hover,
-.hover-bg-dark-pink:focus { background-color: var(--dark-pink); }
-.hover-bg-hot-pink:hover,
-.hover-bg-hot-pink:focus { background-color: var(--hot-pink); }
-.hover-bg-pink:hover,
-.hover-bg-pink:focus { background-color: var(--pink); }
-.hover-bg-light-pink:hover,
-.hover-bg-light-pink:focus { background-color: var(--light-pink); }
-.hover-bg-dark-green:hover,
-.hover-bg-dark-green:focus { background-color: var(--dark-green); }
-.hover-bg-green:hover,
-.hover-bg-green:focus { background-color: var(--green); }
-.hover-bg-light-green:hover,
-.hover-bg-light-green:focus { background-color: var(--light-green); }
-.hover-bg-navy:hover,
-.hover-bg-navy:focus { background-color: var(--navy); }
-.hover-bg-dark-blue:hover,
-.hover-bg-dark-blue:focus { background-color: var(--dark-blue); }
-.hover-bg-blue:hover,
-.hover-bg-blue:focus { background-color: var(--blue); }
-.hover-bg-light-blue:hover,
-.hover-bg-light-blue:focus { background-color: var(--light-blue); }
-.hover-bg-lightest-blue:hover,
-.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); }
-.hover-bg-washed-blue:hover,
-.hover-bg-washed-blue:focus { background-color: var(--washed-blue); }
-.hover-bg-washed-green:hover,
-.hover-bg-washed-green:focus { background-color: var(--washed-green); }
-.hover-bg-washed-yellow:hover,
-.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); }
-.hover-bg-washed-red:hover,
-.hover-bg-washed-red:focus { background-color: var(--washed-red); }
-
diff --git a/src/css/imports/_skins.css b/src/css/imports/_skins.css
deleted file mode 100755
index 9c1dcff..0000000
--- a/src/css/imports/_skins.css
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
-
-   SKINS
-   Docs: http://tachyons.io/docs/themes/skins/
-
-   Classes for setting foreground and background colors on elements.
-   If you haven't declared a border color, but set border on an element, it will
-   be set to the current text color.
-
-*/
-
-/* Text colors */
-
-.black-90 {         color: var(--black-90); }
-.black-80 {         color: var(--black-80); }
-.black-70 {         color: var(--black-70); }
-.black-60 {         color: var(--black-60); }
-.black-50 {         color: var(--black-50); }
-.black-40 {         color: var(--black-40); }
-.black-30 {         color: var(--black-30); }
-.black-20 {         color: var(--black-20); }
-.black-10 {         color: var(--black-10); }
-.black-05 {         color: var(--black-05); }
-
-.white-90 {         color: var(--white-90); }
-.white-80 {         color: var(--white-80); }
-.white-70 {         color: var(--white-70); }
-.white-60 {         color: var(--white-60); }
-.white-50 {         color: var(--white-50); }
-.white-40 {         color: var(--white-40); }
-.white-30 {         color: var(--white-30); }
-.white-20 {         color: var(--white-20); }
-.white-10 {         color: var(--white-10); }
-
-.black {         color: var(--black); }
-.near-black {    color: var(--near-black); }
-.dark-gray {     color: var(--dark-gray); }
-.mid-gray {      color: var(--mid-gray); }
-.gray {          color: var(--gray); }
-.silver  {       color: var(--silver); }
-.light-silver {  color: var(--light-silver); }
-.moon-gray {     color: var(--moon-gray); }
-.light-gray {    color: var(--light-gray); }
-.near-white {    color: var(--near-white); }
-.white {         color: var(--white); }
-
-.dark-red { color: var(--dark-red); }
-.red { color: var(--red); }
-.light-red { color: var(--light-red); }
-.orange { color: var(--orange); }
-.gold { color: var(--gold); }
-.yellow { color: var(--yellow); }
-.light-yellow { color: var(--light-yellow); }
-.purple { color: var(--purple); }
-.light-purple { color: var(--light-purple); }
-.dark-pink { color: var(--dark-pink); }
-.hot-pink { color: var(--hot-pink); }
-.pink { color: var(--pink); }
-.light-pink { color: var(--light-pink); }
-.dark-green { color: var(--dark-green); }
-.green { color: var(--green); }
-.light-green { color: var(--light-green); }
-.navy { color: var(--navy); }
-.dark-blue { color: var(--dark-blue); }
-.blue { color: var(--blue); }
-.light-blue { color: var(--light-blue); }
-.lightest-blue { color: var(--lightest-blue); }
-.washed-blue { color: var(--washed-blue); }
-.washed-green { color: var(--washed-green); }
-.washed-yellow { color: var(--washed-yellow); }
-.washed-red { color: var(--washed-red); }
-
-.bg-black-90 {         background-color: var(--black-90); }
-.bg-black-80 {         background-color: var(--black-80); }
-.bg-black-70 {         background-color: var(--black-70); }
-.bg-black-60 {         background-color: var(--black-60); }
-.bg-black-50 {         background-color: var(--black-50); }
-.bg-black-40 {         background-color: var(--black-40); }
-.bg-black-30 {         background-color: var(--black-30); }
-.bg-black-20 {         background-color: var(--black-20); }
-.bg-black-10 {         background-color: var(--black-10); }
-.bg-black-05 {         background-color: var(--black-05); }
-.bg-white-90 {        background-color: var(--white-90); }
-.bg-white-80 {        background-color: var(--white-80); }
-.bg-white-70 {        background-color: var(--white-70); }
-.bg-white-60 {        background-color: var(--white-60); }
-.bg-white-50 {        background-color: var(--white-50); }
-.bg-white-40 {        background-color: var(--white-40); }
-.bg-white-30 {        background-color: var(--white-30); }
-.bg-white-20 {        background-color: var(--white-20); }
-.bg-white-10 {        background-color: var(--white-10); }
-
-
-
-/* Background colors */
-
-.bg-black {         background-color: var(--black); }
-.bg-near-black {    background-color: var(--near-black); }
-.bg-dark-gray {     background-color: var(--dark-gray); }
-.bg-mid-gray {      background-color: var(--mid-gray); }
-.bg-gray {          background-color: var(--gray); }
-.bg-silver  {       background-color: var(--silver); }
-.bg-light-silver {  background-color: var(--light-silver); }
-.bg-moon-gray {     background-color: var(--moon-gray); }
-.bg-light-gray {    background-color: var(--light-gray); }
-.bg-near-white {    background-color: var(--near-white); }
-.bg-white {         background-color: var(--white); }
-.bg-transparent {   background-color: var(--transparent); }
-
-.bg-dark-red { background-color: var(--dark-red); }
-.bg-red { background-color: var(--red); }
-.bg-light-red { background-color: var(--light-red); }
-.bg-orange { background-color: var(--orange); }
-.bg-gold { background-color: var(--gold); }
-.bg-yellow { background-color: var(--yellow); }
-.bg-light-yellow { background-color: var(--light-yellow); }
-.bg-purple { background-color: var(--purple); }
-.bg-light-purple { background-color: var(--light-purple); }
-.bg-dark-pink { background-color: var(--dark-pink); }
-.bg-hot-pink { background-color: var(--hot-pink); }
-.bg-pink { background-color: var(--pink); }
-.bg-light-pink { background-color: var(--light-pink); }
-.bg-dark-green { background-color: var(--dark-green); }
-.bg-green { background-color: var(--green); }
-.bg-light-green { background-color: var(--light-green); }
-.bg-navy { background-color: var(--navy); }
-.bg-dark-blue { background-color: var(--dark-blue); }
-.bg-blue { background-color: var(--blue); }
-.bg-light-blue { background-color: var(--light-blue); }
-.bg-lightest-blue { background-color: var(--lightest-blue); }
-.bg-washed-blue { background-color: var(--washed-blue); }
-.bg-washed-green { background-color: var(--washed-green); }
-.bg-washed-yellow { background-color: var(--washed-yellow); }
-.bg-washed-red { background-color: var(--washed-red); }
diff --git a/src/css/imports/_states.css b/src/css/imports/_states.css
index f8f22a7..0dff909 100755
--- a/src/css/imports/_states.css
+++ b/src/css/imports/_states.css
@@ -1,12 +1,12 @@
 /* Focus states */
-input:focus, textarea:focus a:focus {
-  box-shadow: 0 0 0 2px var(--primary);
-  outline: 0;
+input:focus, textarea:focus, a:focus {
+  box-shadow: inset 0 0 0 2px var(--primary);
+  outline: 0!important;
 }
 
 button:focus {
-  box-shadow: 0 0 0 4px var(--primary);
-  outline: 0;
+  box-shadow: inset 0 0 0 4px var(--primary);
+  outline: 0!important;
 }
 
 .raise {
@@ -41,43 +41,6 @@ button:focus {
   text-decoration: underline;
 }
 
-/* Can combine this with overflow-hidden to make background images grow on hover
- * even if you are using background-size: cover */
-
-.grow {
-  -moz-osx-font-smoothing: grayscale;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  transition: transform 0.25s ease-out;
-}
-
-.grow:hover,
-.grow:focus {
-  transform: scale(1.05);
-}
-
-.grow:active {
-  transform: scale(.90);
-}
-
-.grow-large {
-  -moz-osx-font-smoothing: grayscale;
-  backface-visibility: hidden;
-  transform: translateZ(0);
-  transition: transform .25s ease-in-out;
-}
-
-.grow-large:hover,
-.grow-large:focus {
-  transform: scale(1.2);
-}
-
-.grow-large:active {
-  transform: scale(.95);
-}
-
-/* Add pointer on hover */
-
 .pointer:hover {
   cursor: pointer;
 }
diff --git a/src/css/imports/_styles.css b/src/css/imports/_styles.css
index 1b6eca0..687e1ba 100755
--- a/src/css/imports/_styles.css
+++ b/src/css/imports/_styles.css
@@ -1,11 +1,15 @@
-/*
-
-  STYLES
-
-  Add custom styles here.
-
-*/
-
 ::selection {
   background-color: var(--highlight);
 }
+
+/* Used in the navbar */
+.divider-grey {
+  box-shadow: inset 0 -4px 0 var(--grey-1);
+  /* Link hover states */
+  & a {
+    transition: var(--hover-transition);
+  }
+  & ul a:hover {
+    box-shadow: inset 0 -4px 0 var(--primary);
+  }
+}
diff --git a/src/css/imports/_text-align.css b/src/css/imports/_text-align.css
index b1e8bca..afe3b22 100755
--- a/src/css/imports/_text-align.css
+++ b/src/css/imports/_text-align.css
@@ -1,23 +1,3 @@
-/*
-
-  TEXT ALIGN
-  Docs: http://tachyons.io/docs/typography/text-align/
-
-  Base
-    t = text-align
-
-  Modifiers
-    l = left
-    r = right
-    c = center
-
-  Media Query Extensions:
-    -ns = not-small
-    -m  = medium
-    -l  = large
-
-*/
-
 .tl  { text-align: left; }
 .tr  { text-align: right; }
 .tc  { text-align: center; }
@@ -39,4 +19,3 @@
   .tr-l  { text-align: right; }
   .tc-l  { text-align: center; }
 }
-
diff --git a/src/css/imports/_text-decoration.css b/src/css/imports/_text-decoration.css
index 574de27..38a813e 100755
--- a/src/css/imports/_text-decoration.css
+++ b/src/css/imports/_text-decoration.css
@@ -1,16 +1,3 @@
-/*
-
-   TEXT DECORATION
-   Docs: http://tachyons.io/docs/typography/text-decoration/
-
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .strike       { text-decoration: line-through; }
 .underline    { text-decoration: underline; }
 .no-underline { text-decoration: none; }
diff --git a/src/css/imports/_text-transform.css b/src/css/imports/_text-transform.css
index 50ae73e..f4b73da 100755
--- a/src/css/imports/_text-transform.css
+++ b/src/css/imports/_text-transform.css
@@ -1,24 +1,3 @@
-/*
-
-   TEXT TRANSFORM
-   Docs: http://tachyons.io/docs/typography/text-transform/
-
-   Base:
-     tt = text-transform
-
-   Modifiers
-     c = capitalize
-     l = lowercase
-     u = uppercase
-     n = none
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .ttc { text-transform: capitalize; }
 .ttl { text-transform: lowercase; }
 .ttu { text-transform: uppercase; }
diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css
index dd320a5..33436fb 100755
--- a/src/css/imports/_type-scale.css
+++ b/src/css/imports/_type-scale.css
@@ -1,15 +1,3 @@
-.f-6,
-.f-headline {
-  font-size: 6rem;
-}
-.f-5,
-.f-subheadline {
-  font-size: 5rem;
-}
-
-
-/* Type Scale */
-
 .f1 { font-size: 3rem; }
 .f2 { font-size: 2.25rem; }
 .f3 { font-size: 1.5rem; }
diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css
index 3aba6ea..bf6483d 100755
--- a/src/css/imports/_typography.css
+++ b/src/css/imports/_typography.css
@@ -1,20 +1,22 @@
 html {
-  font-size: 18px;
+  font-size: var(--font-size);
   @media (--breakpoint-medium) {
-    font-size: 20px;
+    font-size: var(--font-size-m);
   }
   @media (--breakpoint-large) {
-    font-size: 22px;
+    font-size: var(--font-size-l);
   }
+  background-color: var(--black);
 }
 
 
 body {
+  font-family: var(--font-family);
   font-size: var(--spacing-medium);
-  line-height: 1.5;
+  line-height: var(--line-height);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background-color: var(--white);
+  background-color: var(--off-white);
  }
 
 p {
diff --git a/src/css/imports/_utilities.css b/src/css/imports/_utilities.css
index 01da910..809a749 100755
--- a/src/css/imports/_utilities.css
+++ b/src/css/imports/_utilities.css
@@ -1,22 +1,3 @@
-/*
-
-   UTILITIES
-
-*/
-
-/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
- * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
- * Make sure there are no height and width attributes on the embedded media.
- * Adapted from: https://github.com/suitcss/components-flex-embed
- *
- * Example:
- *
- * <div class="aspect-ratio aspect-ratio--16x9">
- *  <iframe class="aspect-ratio--object"></iframe>
- * </div>
- *
- * */
-
 .aspect-ratio {
   height: 0;
   position: relative;
@@ -50,32 +31,7 @@
     z-index: 100;
 }
 
-.overflow-container {
-  overflow-y: scroll;
-}
-
 .center {
   margin-right: auto;
   margin-left: auto;
 }
-
-.fade-bottom-light {
-  position: relative;
-}
-
-.fade-bottom-light:after {
-
-    content: "";
-    position: absolute;
-    z-index: 1;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    background-image: linear-gradient(to bottom, color(#F0F2F5 alpha(-100%)), var(--white) 90%);
-    width: 100%;
-    height: 3rem;
-  }
-
-.divider {
-  box-shadow: inset 0 -4px 0 var(--grey-1);
-}
diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css
index 177b1c1..fca464b 100644
--- a/src/css/imports/_variables.css
+++ b/src/css/imports/_variables.css
@@ -1,14 +1,33 @@
 :root {
-  --border-radius: .25rem;
-  --hover-transition: all 150ms ease;
+	/* Colors */
+	--primary: rgba(255, 68, 0, 1);
+	--highlight: rgba(254, 213, 198, 1);
+	--white: rgba(255, 255, 255, 1);
+	--off-white: rgba(255, 253, 252, 1);
+	--grey-1: rgba(245, 243, 242, 1);
+	--grey-2: rgba(235, 231, 230, 1);
+	--grey-3: rgba(89, 87, 86, 1);
+	--grey-4: rgba(66, 64, 64, 1);
+	--black: rgba(43, 37, 35, 1);
 
-  /* Sizing */
-  --spacing-none: 0;
-  --spacing-extra-small: .25rem;
-  --spacing-small: .5rem;
-  --spacing-medium: 1rem;
-  --spacing-large: 2rem;
-  --spacing-extra-large: 4rem;
-  --spacing-extra-extra-large: 8rem;
-  --spacing-extra-extra-extra-large: 16rem;
+	/* Typography */
+	--font-family: Nunito Sans, -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
+	--line-height: 1.5;
+	--font-size: 18px;
+	--font-size-m: 20px;
+	--font-size-l: 22px;
+
+	/* Sizing */
+	--spacing-none: 0;
+	--spacing-extra-small: .25rem;
+	--spacing-small: .5rem;
+	--spacing-medium: 1rem;
+	--spacing-large: 2rem;
+	--spacing-extra-large: 4rem;
+	--spacing-extra-extra-large: 8rem;
+	--spacing-extra-extra-extra-large: 16rem;
+
+	/* Miscelaneous */
+	--border-radius: .25rem;
+	--hover-transition: all 150ms ease;
 }
diff --git a/src/css/imports/_vertical-align.css b/src/css/imports/_vertical-align.css
index 83f9114..26b1a89 100755
--- a/src/css/imports/_vertical-align.css
+++ b/src/css/imports/_vertical-align.css
@@ -1,14 +1,3 @@
-/*
-
-   VERTICAL ALIGN
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .v-base     { vertical-align: baseline; }
 .v-mid      { vertical-align: middle; }
 .v-top      { vertical-align: top; }
diff --git a/src/css/imports/_visibility.css b/src/css/imports/_visibility.css
index f5a8c44..bce1dc0 100755
--- a/src/css/imports/_visibility.css
+++ b/src/css/imports/_visibility.css
@@ -1,20 +1,3 @@
-/*
-
-   VISIBILITY
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-
-/*
-    Text that is hidden but accessible
-    Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
-*/
-
 .clip {
   position: fixed !important;
   _position: absolute !important;
@@ -48,4 +31,3 @@
     clip: rect(1px, 1px, 1px, 1px);
   }
 }
-
diff --git a/src/css/imports/_white-space.css b/src/css/imports/_white-space.css
index 3902f1f..e216c79 100755
--- a/src/css/imports/_white-space.css
+++ b/src/css/imports/_white-space.css
@@ -1,15 +1,3 @@
-/*
-
-   WHITE SPACE
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-
 .ws-normal { white-space: normal; }
 .nowrap { white-space: nowrap; }
 .pre { white-space: pre; }
@@ -31,4 +19,3 @@
   .nowrap-l { white-space: nowrap; }
   .pre-l { white-space: pre; }
 }
-
diff --git a/src/css/imports/_widths.css b/src/css/imports/_widths.css
index d02a240..65f3601 100755
--- a/src/css/imports/_widths.css
+++ b/src/css/imports/_widths.css
@@ -1,43 +1,3 @@
-/*
-
-   WIDTHS
-   Docs: http://tachyons.io/docs/layout/widths/
-
-   Base:
-     w = width
-
-   Modifiers
-     1 = 1st step in width scale
-     2 = 2nd step in width scale
-     3 = 3rd step in width scale
-     4 = 4th step in width scale
-     5 = 5th step in width scale
-
-     -10  = literal value 10%
-     -20  = literal value 20%
-     -25  = literal value 25%
-     -33  = literal value 33%
-     -34  = literal value 34%
-     -40  = literal value 40%
-     -50  = literal value 50%
-     -60  = literal value 60%
-     -75  = literal value 75%
-     -80  = literal value 80%
-     -100 = literal value 100%
-
-     -third = 100% / 3 (Not supported in opera mini or IE8)
-     -auto  = string value auto
-
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-/* Width Scale */
-
 .w1 {    width: var(--spacing-medium); }
 .w2 {    width: 2rem; }
 .w3 {    width: 4rem; }
diff --git a/src/css/imports/_word-break.css b/src/css/imports/_word-break.css
index bc88931..63f87df 100755
--- a/src/css/imports/_word-break.css
+++ b/src/css/imports/_word-break.css
@@ -1,17 +1,3 @@
-/*
-
-  WORD BREAK
-
-   Base:
-     word = word-break
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .word-normal { word-break: normal; }
 .word-wrap { word-break: break-all; }
 .word-nowrap { word-break: keep-all; }
@@ -33,4 +19,3 @@
   .word-wrap-l { word-break: break-all; }
   .word-nowrap-l { word-break: keep-all; }
 }
-
diff --git a/src/css/imports/_z-index.css b/src/css/imports/_z-index.css
index 9f4d863..edf3a1e 100755
--- a/src/css/imports/_z-index.css
+++ b/src/css/imports/_z-index.css
@@ -1,38 +1,3 @@
-/*
-
-  Z-INDEX
-
-  Base
-    z = z-index
-
-  Modifiers
-    -0 = literal value 0
-    -1 = literal value 1
-    -2 = literal value 2
-    -3 = literal value 3
-    -4 = literal value 4
-    -5 = literal value 5
-    -999 = literal value 999
-    -9999 = literal value 9999
-
-    -max = largest accepted z-index value as integer
-
-    -inherit = string value inherit
-    -initial = string value initial
-    -unset = string value unset
-
-  MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
-  Spec: http://www.w3.org/TR/CSS2/zindex.html
-  Articles:
-    https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-
-  Tips on extending:
-  There might be a time worth using negative z-index values.
-  Or if you are using tachyons with another project, you might need to
-  adjust these values to suit your needs.
-
-*/
-
 .z-0 { z-index: 0; }
 .z-1 { z-index: 1; }
 .z-2 { z-index: 2; }
@@ -50,4 +15,3 @@
 .z-inherit { z-index: inherit; }
 .z-initial { z-index: initial; }
 .z-unset { z-index: unset; }
-
diff --git a/src/css/main.css b/src/css/main.css
index f3709f4..077cb74 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -38,19 +38,16 @@
 @import './imports/_border-style';
 @import './imports/_border-widths';
 @import './imports/_border-colors';
-@import './imports/_box-shadow';
 @import './imports/_code';
 @import './imports/_coordinates';
 @import './imports/_clears';
 @import './imports/_display';
 @import './imports/_flexbox';
 @import './imports/_floats';
-@import './imports/_font-family';
 @import './imports/_font-style';
 @import './imports/_font-weight';
 @import './imports/_forms';
 @import './imports/_heights';
-@import './imports/_letter-spacing';
 @import './imports/_line-height';
 @import './imports/_links';
 @import './imports/_lists';