WIP

22 files changed, 351 insertions, 395 deletions

diff --git a/src/css/imports/_border-radius.css b/src/css/imports/_border-radius.css
index 2422bd2..8cde05d 100755
--- a/src/css/imports/_border-radius.css
+++ b/src/css/imports/_border-radius.css
@@ -1,119 +1,89 @@
-/*
-
-   BORDER RADIUS
-   Docs: http://tachyons.io/docs/themes/border-radius/
-
-   Base:
-     br   = border-radius
-
-   Modifiers:
-     0    = 0/none
-     1    = 1st step in scale
-     2    = 2nd step in scale
-     3    = 3rd step in scale
-     4    = 4th step in scale
-
-   Literal values:
-     -100 = 100%
-     -pill = 9999px
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
-  :root {
-    --border-radius: .25rem;
-  }
-
-  .br0 {        border-radius: 0; }
-  .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;
-  }
-  .br--top {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-  }
-  .br--right {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-  }
-  .br--left {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-  }
+.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;
+}
+.br--top {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+}
+.br--right {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+}
+.br--left {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+}
 
 @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;
-  }
-  .br--top-ns {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-  }
-  .br--right-ns {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-  }
-  .br--left-ns {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-  }
+.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;
+}
+.br--top-ns {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+}
+.br--right-ns {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+}
+.br--left-ns {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+}
 }
 
 @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;
-  }
-  .br--top-m {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-  }
-  .br--right-m {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-  }
-  .br--left-m {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-  }
+.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;
+}
+.br--top-m {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+}
+.br--right-m {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+}
+.br--left-m {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+}
 }
 
 @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;
-  }
-  .br--top-l {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-  }
-  .br--right-l {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-  }
-  .br--left-l {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-  }
+.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;
+}
+.br--top-l {
+		border-bottom-left-radius: 0;
+		border-bottom-right-radius: 0;
+}
+.br--right-l {
+		border-top-left-radius: 0;
+		border-bottom-left-radius: 0;
+}
+.br--left-l {
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+}
 }
diff --git a/src/css/imports/_border-widths.css b/src/css/imports/_border-widths.css
index e3b6885..2af7d7e 100755
--- a/src/css/imports/_border-widths.css
+++ b/src/css/imports/_border-widths.css
@@ -23,9 +23,9 @@
 
 .bw0 { border-width: 0; }
 .bw1 { border-width: .125rem; }
-.bw2 { border-width: .25rem; }
-.bw3 { border-width: .5rem; }
-.bw4 { border-width: 1rem; }
+.bw2 { border-width: var(--spacing-extra-small); }
+.bw3 { border-width: var(--spacing-small); }
+.bw4 { border-width: var(--spacing-medium); }
 .bw5 { border-width: 2rem; }
 
 /* Resets */
@@ -37,9 +37,9 @@
 @media (--breakpoint-not-small) {
   .bw0-ns { border-width: 0; }
   .bw1-ns { border-width: .125rem; }
-  .bw2-ns { border-width: .25rem; }
-  .bw3-ns { border-width: .5rem; }
-  .bw4-ns { border-width: 1rem; }
+  .bw2-ns { border-width: var(--spacing-extra-small); }
+  .bw3-ns { border-width: var(--spacing-small); }
+  .bw4-ns { border-width: var(--spacing-medium); }
   .bw5-ns { border-width: 2rem; }
   .bt-0-ns { border-top-width: 0; }
   .br-0-ns { border-right-width: 0; }
@@ -50,9 +50,9 @@
 @media (--breakpoint-medium) {
   .bw0-m { border-width: 0; }
   .bw1-m { border-width: .125rem; }
-  .bw2-m { border-width: .25rem; }
-  .bw3-m { border-width: .5rem; }
-  .bw4-m { border-width: 1rem; }
+  .bw2-m { border-width: var(--spacing-extra-small); }
+  .bw3-m { border-width: var(--spacing-small); }
+  .bw4-m { border-width: var(--spacing-medium); }
   .bw5-m { border-width: 2rem; }
   .bt-0-m { border-top-width: 0; }
   .br-0-m { border-right-width: 0; }
@@ -63,9 +63,9 @@
 @media (--breakpoint-large) {
   .bw0-l { border-width: 0; }
   .bw1-l { border-width: .125rem; }
-  .bw2-l { border-width: .25rem; }
-  .bw3-l { border-width: .5rem; }
-  .bw4-l { border-width: 1rem; }
+  .bw2-l { border-width: var(--spacing-extra-small); }
+  .bw3-l { border-width: var(--spacing-small); }
+  .bw4-l { border-width: var(--spacing-medium); }
   .bw5-l { border-width: 2rem; }
   .bt-0-l { border-top-width: 0; }
   .br-0-l { border-right-width: 0; }
diff --git a/src/css/imports/_buttons.css b/src/css/imports/_buttons.css
index 57cb4ff..effdd3b 100644
--- a/src/css/imports/_buttons.css
+++ b/src/css/imports/_buttons.css
@@ -1,7 +1,7 @@
 .btn {
   display: inline-block;
   padding: 12px 16px 10px;
-  font-size: 1rem;
+  font-size: var(--spacing-medium);
   line-height: 1.25;
   background-color: var(--white);
   border-radius: var(--border-radius);
@@ -10,4 +10,5 @@
   color: var(--primary);
   text-align: center;
   box-shadow: inset 0 0 0 2px var(--primary);
+  transition: var(--hover-transition);
 }
diff --git a/src/css/imports/_cms.css b/src/css/imports/_cms.css
index e82565e..a259cd2 100644
--- a/src/css/imports/_cms.css
+++ b/src/css/imports/_cms.css
@@ -1,13 +1,92 @@
 .cms {
-  & h1, h2, h3, h4, h5, h6 {
-    font-weight: bold;
+
+	/* Headings */
+	& h1, & h2, & h3, & h4, & h5, & h6 {
+		font-weight: bold;
+		line-height: 1.25;
+    margin-bottom: var(--spacing-small);
   }
-  & a {
+
+  & h1 {
+    font-size: 2.25rem;
+  }
+
+  & h2 {
+    font-size: 1.5rem;
+  }
+
+  & h3 {
+    font-size: 1.25rem;
+  }
+
+  & h4 {
+    font-size: 1rem;;
+  }
+
+  & h5 {
+    font-size: .875rem;
+  }
+
+	/* Links */
+	& a {
+		color: var(--primary);
+		transition: var(--hover-transition);
+		&:hover {
+			background-color: var(--highlight);
+			color: var(--black);
+		}
+	}
+
+	/* Lists */
+	& ul, & ol, & li {
+		position: relative;
+	}
+
+	& ul, & ol {
+		margin-bottom: var(--spacing-medium);
+	}
+
+	& ul ul, & ol ol {
+		padding-left: var(--spacing-small);
+	}
+
+	& ul {
+		margin-left: 1.33rem;
+		& >li:before {
+			content: '★';
+			left: -1.33rem;
+			position: absolute;
+			color: var(--primary);
+		}
+	}
+
+	& ol {
+		list-style: none;
+		margin-left: var(--spacing-medium);
+		counter-reset: i 0;
+    & >li:before {
+      font-weight: 800;
+      left: -var(--spacing-medium);
+      position: absolute;
+      height: 100%;
+      content: counter(i);
+      counter-increment: i;
+      color: var(--primary);
+    }
+	}
+
+  /* Blockquotes */
+  & blockquote {
+    background-color: var(--grey-1);
+    display: block;
+    border-radius: var(--border-radius);
+    padding: var(--spacing-medium);
     color: var(--primary);
-    transition: var(--hover-transition);
-    &:hover {
-      background-color: var(--highlight);
-      color: var(--black);
+    font-weight: 700;
+    font-size: 1.25rem;;
+    margin-bottom: var(--spacing-medium);
+    & p {
+      margin: 0;
     }
   }
 }
diff --git a/src/css/imports/_code.css b/src/css/imports/_code.css
index ac691f3..0c7c820 100755
--- a/src/css/imports/_code.css
+++ b/src/css/imports/_code.css
@@ -1,11 +1,8 @@
-/*
-
-   CODE
-
-*/
-
-.pre {
+pre {
   overflow-x: auto;
   overflow-y: hidden;
-  overflow:   scroll;
+  overflow: scroll;
+  margin-bottom: var(--spacing-medium);
+  background-color: var(--grey-1);
+  padding: var(--spacing-small);
 }
diff --git a/src/css/imports/_colors.css b/src/css/imports/_colors.css
index 9d09e73..7449191 100755
--- a/src/css/imports/_colors.css
+++ b/src/css/imports/_colors.css
@@ -87,8 +87,8 @@
 }
 
 .bg-fix-primary {
-  padding: 0 .5rem;
+  padding: 0 var(--spacing-small);
   & :first-child {
-    box-shadow: .5rem 0 0 var(--primary), -.5rem 0 0 var(--primary);
+    box-shadow: var(--spacing-small) 0 0 var(--primary), -var(--spacing-small) 0 0 var(--primary);
   }
 }
diff --git a/src/css/imports/_coordinates.css b/src/css/imports/_coordinates.css
index bf8e6d7..53e43de 100755
--- a/src/css/imports/_coordinates.css
+++ b/src/css/imports/_coordinates.css
@@ -30,20 +30,20 @@
 .bottom-0 { bottom: 0; }
 .left-0   { left:   0; }
 
-.top-1    { top:    1rem; }
-.right-1  { right:  1rem; }
-.bottom-1 { bottom: 1rem; }
-.left-1   { left:   1rem; }
+.top-1    { top:    var(--spacing-medium); }
+.right-1  { right:  var(--spacing-medium); }
+.bottom-1 { bottom: var(--spacing-medium); }
+.left-1   { left:   var(--spacing-medium); }
 
 .top-2    { top:    2rem; }
 .right-2  { right:  2rem; }
 .bottom-2 { bottom: 2rem; }
 .left-2   { left:   2rem; }
 
-.top--1    { top:    -1rem; }
-.right--1  { right:  -1rem; }
-.bottom--1 { bottom: -1rem; }
-.left--1   { left:   -1rem; }
+.top--1    { top:    -var(--spacing-medium); }
+.right--1  { right:  -var(--spacing-medium); }
+.bottom--1 { bottom: -var(--spacing-medium); }
+.left--1   { left:   -var(--spacing-medium); }
 
 .top--2    { top:    -2rem; }
 .right--2  { right:  -2rem; }
@@ -63,18 +63,18 @@
   .left-0-ns    { left:  0; }
   .right-0-ns   { right: 0; }
   .bottom-0-ns  { bottom: 0; }
-  .top-1-ns     { top:   1rem; }
-  .left-1-ns    { left:  1rem; }
-  .right-1-ns   { right: 1rem; }
-  .bottom-1-ns  { bottom: 1rem; }
+  .top-1-ns     { top:   var(--spacing-medium); }
+  .left-1-ns    { left:  var(--spacing-medium); }
+  .right-1-ns   { right: var(--spacing-medium); }
+  .bottom-1-ns  { bottom: var(--spacing-medium); }
   .top-2-ns     { top:   2rem; }
   .left-2-ns    { left:  2rem; }
   .right-2-ns   { right: 2rem; }
   .bottom-2-ns  { bottom: 2rem; }
-  .top--1-ns    { top:    -1rem; }
-  .right--1-ns  { right:  -1rem; }
-  .bottom--1-ns { bottom: -1rem; }
-  .left--1-ns   { left:   -1rem; }
+  .top--1-ns    { top:    -var(--spacing-medium); }
+  .right--1-ns  { right:  -var(--spacing-medium); }
+  .bottom--1-ns { bottom: -var(--spacing-medium); }
+  .left--1-ns   { left:   -var(--spacing-medium); }
   .top--2-ns    { top:    -2rem; }
   .right--2-ns  { right:  -2rem; }
   .bottom--2-ns { bottom: -2rem; }
@@ -92,18 +92,18 @@
   .left-0-m    { left:  0; }
   .right-0-m   { right: 0; }
   .bottom-0-m  { bottom: 0; }
-  .top-1-m     { top:   1rem; }
-  .left-1-m    { left:  1rem; }
-  .right-1-m   { right: 1rem; }
-  .bottom-1-m  { bottom: 1rem; }
+  .top-1-m     { top:   var(--spacing-medium); }
+  .left-1-m    { left:  var(--spacing-medium); }
+  .right-1-m   { right: var(--spacing-medium); }
+  .bottom-1-m  { bottom: var(--spacing-medium); }
   .top-2-m     { top:   2rem; }
   .left-2-m    { left:  2rem; }
   .right-2-m   { right: 2rem; }
   .bottom-2-m  { bottom: 2rem; }
-  .top--1-m    { top:    -1rem; }
-  .right--1-m  { right:  -1rem; }
-  .bottom--1-m { bottom: -1rem; }
-  .left--1-m   { left:   -1rem; }
+  .top--1-m    { top:    -var(--spacing-medium); }
+  .right--1-m  { right:  -var(--spacing-medium); }
+  .bottom--1-m { bottom: -var(--spacing-medium); }
+  .left--1-m   { left:   -var(--spacing-medium); }
   .top--2-m    { top:    -2rem; }
   .right--2-m  { right:  -2rem; }
   .bottom--2-m { bottom: -2rem; }
@@ -121,18 +121,18 @@
   .left-0-l    { left:  0; }
   .right-0-l   { right: 0; }
   .bottom-0-l  { bottom: 0; }
-  .top-1-l     { top:   1rem; }
-  .left-1-l    { left:  1rem; }
-  .right-1-l   { right: 1rem; }
-  .bottom-1-l  { bottom: 1rem; }
+  .top-1-l     { top:   var(--spacing-medium); }
+  .left-1-l    { left:  var(--spacing-medium); }
+  .right-1-l   { right: var(--spacing-medium); }
+  .bottom-1-l  { bottom: var(--spacing-medium); }
   .top-2-l     { top:   2rem; }
   .left-2-l    { left:  2rem; }
   .right-2-l   { right: 2rem; }
   .bottom-2-l  { bottom: 2rem; }
-  .top--1-l    { top:    -1rem; }
-  .right--1-l  { right:  -1rem; }
-  .bottom--1-l { bottom: -1rem; }
-  .left--1-l   { left:   -1rem; }
+  .top--1-l    { top:    -var(--spacing-medium); }
+  .right--1-l  { right:  -var(--spacing-medium); }
+  .bottom--1-l { bottom: -var(--spacing-medium); }
+  .left--1-l   { left:   -var(--spacing-medium); }
   .top--2-l    { top:    -2rem; }
   .right--2-l  { right:  -2rem; }
   .bottom--2-l { bottom: -2rem; }
diff --git a/src/css/imports/_forms.css b/src/css/imports/_forms.css
index 12ee7c6..3d7cab3 100755
--- a/src/css/imports/_forms.css
+++ b/src/css/imports/_forms.css
@@ -1,9 +1,3 @@
-/*
-
-   FORMS
-
-*/
-
 fieldset
 {
   position: relative;
@@ -24,9 +18,10 @@ input, textarea {
   background-color: var(--grey-2);
   border-radius: var(--border-radius);
   padding: 12px 16px 10px;
-  font-size: 1rem;
+  font-size: var(--spacing-medium);
   line-height: 1.25;
   position: relative;
+  transition: var(--hover-transition);
   z-index: 2;
   &:focus {
     background-color: var(--white);
@@ -40,25 +35,25 @@ input, textarea {
 
 ::-webkit-input-placeholder {
    color: var(--black);
-   font-size: 1rem;
+   font-size: var(--spacing-medium);
    line-height: normal;
 }
 
 :-moz-placeholder {
    color: var(--black);
-   font-size: 1rem;
+   font-size: var(--spacing-medium);
    line-height: normal;
 }
 
 ::-moz-placeholder {
    color: var(--black);
-   font-size: 1rem;
+   font-size: var(--spacing-medium);
    line-height: normal;
 }
 
 :-ms-input-placeholder {
    color: var(--black);
-   font-size: 1rem;
+   font-size: var(--spacing-medium);
    line-height: normal;
 }
 
@@ -68,10 +63,11 @@ label
   font-weight: 800;
   color: var(--primary);
   background-color: var(--grey-2);
-  border-radius: .25rem;
-  padding: .25rem .5rem;
+  border-radius: var(--border-radius);
+  padding: var(--spacing-extra-small) var(--spacing-small);
   position: absolute;
   left: 0;
+  top: 0;
   pointer-events: none;
   opacity: 0;
   line-height: 1;
diff --git a/src/css/imports/_heights.css b/src/css/imports/_heights.css
index 44108db..6ada204 100755
--- a/src/css/imports/_heights.css
+++ b/src/css/imports/_heights.css
@@ -33,7 +33,7 @@
 
 /* Height Scale */
 
-.h1 { height: 1rem; }
+.h1 { height: var(--spacing-medium); }
 .h2 { height: 2rem; }
 .h3 { height: 4rem; }
 .h4 { height: 8rem; }
@@ -64,7 +64,7 @@
 .h-inherit {  height: inherit; }
 
 @media (--breakpoint-not-small) {
-  .h1-ns {  height: 1rem; }
+  .h1-ns {  height: var(--spacing-medium); }
   .h2-ns {  height: 2rem; }
   .h3-ns {  height: 4rem; }
   .h4-ns {  height: 8rem; }
@@ -84,7 +84,7 @@
 }
 
 @media (--breakpoint-medium) {
-  .h1-m { height: 1rem; }
+  .h1-m { height: var(--spacing-medium); }
   .h2-m { height: 2rem; }
   .h3-m { height: 4rem; }
   .h4-m { height: 8rem; }
@@ -104,7 +104,7 @@
 }
 
 @media (--breakpoint-large) {
-  .h1-l { height: 1rem; }
+  .h1-l { height: var(--spacing-medium); }
   .h2-l { height: 2rem; }
   .h3-l { height: 4rem; }
   .h4-l { height: 8rem; }
diff --git a/src/css/imports/_images.css b/src/css/imports/_images.css
index 0298cea..4cc50a4 100755
--- a/src/css/imports/_images.css
+++ b/src/css/imports/_images.css
@@ -1,11 +1,7 @@
-/*
-
-   IMAGES
-   Docs: http://tachyons.io/docs/elements/images/
-
-*/
-
-/* Responsive images! */
-
-img { max-width: 100%; }
+img {
+  max-width: 100%;
+}
 
+img:not(.w-100) {
+  border-radius: var(--border-radius);
+}
diff --git a/src/css/imports/_max-widths.css b/src/css/imports/_max-widths.css
index e4175fa..516a31a 100755
--- a/src/css/imports/_max-widths.css
+++ b/src/css/imports/_max-widths.css
@@ -35,7 +35,7 @@
 
 /* Max Width Scale */
 
-.mw1  {  max-width: 1rem; }
+.mw1  {  max-width: var(--spacing-medium); }
 .mw2  {  max-width: 2rem; }
 .mw3  {  max-width: 4rem; }
 .mw4  {  max-width: 8rem; }
@@ -52,7 +52,7 @@
 @media (--breakpoint-not-small) {
   .mw-100-ns  { max-width: 100%; }
 
-  .mw1-ns  {  max-width: 1rem; }
+  .mw1-ns  {  max-width: var(--spacing-medium); }
   .mw2-ns  {  max-width: 2rem; }
   .mw3-ns  {  max-width: 4rem; }
   .mw4-ns  {  max-width: 8rem; }
@@ -68,7 +68,7 @@
 @media (--breakpoint-medium) {
   .mw-100-m  { max-width: 100%; }
 
-  .mw1-m  {  max-width: 1rem; }
+  .mw1-m  {  max-width: var(--spacing-medium); }
   .mw2-m  {  max-width: 2rem; }
   .mw3-m  {  max-width: 4rem; }
   .mw4-m  {  max-width: 8rem; }
@@ -84,7 +84,7 @@
 @media (--breakpoint-large) {
   .mw-100-l  { max-width: 100%; }
 
-  .mw1-l  {  max-width: 1rem; }
+  .mw1-l  {  max-width: var(--spacing-medium); }
   .mw2-l  {  max-width: 2rem; }
   .mw3-l  {  max-width: 4rem; }
   .mw4-l  {  max-width: 8rem; }
diff --git a/src/css/imports/_media-queries.css b/src/css/imports/_media-queries.css
index d3be559..872aef2 100755
--- a/src/css/imports/_media-queries.css
+++ b/src/css/imports/_media-queries.css
@@ -1,5 +1,5 @@
 @custom-media --breakpoint-not-small screen and (min-width: 40em);
 
-@custom-media --breakpoint-medium screen and (min-width: 40em) and (max-width: 60em);
+@custom-media --breakpoint-medium screen and (min-width: 50em);
 
 @custom-media --breakpoint-large screen and (min-width: 60em);
diff --git a/src/css/imports/_outlines.css b/src/css/imports/_outlines.css
index 9a292fd..2026e99 100755
--- a/src/css/imports/_outlines.css
+++ b/src/css/imports/_outlines.css
@@ -1,14 +1,3 @@
-/*
-
-   OUTLINES
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .outline { outline: 1px solid; }
 .outline-transparent { outline: 1px solid transparent; }
 .outline-0 { outline: 0; }
diff --git a/src/css/imports/_reset.css b/src/css/imports/_reset.css
index d0a1f31..48eeccc 100755
--- a/src/css/imports/_reset.css
+++ b/src/css/imports/_reset.css
@@ -48,7 +48,7 @@ table {
 }
 
 input, textarea {
-	font-size: 1rem;
+	font-size: var(--spacing-medium);
 	border: none;
 	font-family: inherit;
 	border: 0;
diff --git a/src/css/imports/_spacing.css b/src/css/imports/_spacing.css
index 41d4118..46ffdaa 100755
--- a/src/css/imports/_spacing.css
+++ b/src/css/imports/_spacing.css
@@ -1,51 +1,3 @@
-/* Variables */
-
-:root {
-  --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;
-}
-
-/*
-   SPACING
-   Docs: http://tachyons.io/docs/layout/spacing/
-
-   An eight step powers of two scale ranging from 0 to 16rem.
-
-   Base:
-     p = padding
-     m = margin
-
-   Modifiers:
-     a = all
-     h = horizontal
-     v = vertical
-     t = top
-     r = right
-     b = bottom
-     l = left
-
-     0 = none
-     1 = 1st step in spacing scale
-     2 = 2nd step in spacing scale
-     3 = 3rd step in spacing scale
-     4 = 4th step in spacing scale
-     5 = 5th step in spacing scale
-     6 = 6th step in spacing scale
-     7 = 7th step in spacing scale
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-
-*/
-
 .pa0 { padding: var(--spacing-none); }
 .pa1 { padding: var(--spacing-extra-small); }
 .pa2 { padding: var(--spacing-small); }
@@ -276,9 +228,9 @@
   margin-right: var(--spacing-extra-extra-extra-large);
 }
 
-.mhn1 { margin-left: -.25rem; margin-right: -.25rem; }
-.mhn2 { margin-left: -.5rem; margin-right: -.5rem; }
-.mhn3 { margin-left: -1rem; margin-right: -1rem; }
+.mhn1 { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+.mhn2 { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+.mhn3 { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
 
 @media (--breakpoint-not-small) {
   .pa0-ns  {  padding: var(--spacing-none); }
@@ -502,9 +454,9 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
-  .mhn1-ns { margin-left: -.25rem; margin-right: -.25rem; }
-  .mhn2-ns { margin-left: -.5rem; margin-right: -.5rem; }
-  .mhn3-ns { margin-left: -1rem; margin-right: -1rem; }
+  .mhn1-ns { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+  .mhn2-ns { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+  .mhn3-ns { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
 
 }
 
@@ -731,9 +683,9 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
-  .mhn1-m { margin-left: -.25rem; margin-right: -.25rem; }
-  .mhn2-m { margin-left: -.5rem; margin-right: -.5rem; }
-  .mhn3-m { margin-left: -1rem; margin-right: -1rem; }
+  .mhn1-m { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+  .mhn2-m { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+  .mhn3-m { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
 
 }
 
@@ -960,7 +912,7 @@
     margin-right: var(--spacing-extra-extra-extra-large);
   }
 
-  .mhn1-l { margin-left: -.25rem; margin-right: -.25rem; }
-  .mhn2-l { margin-left: -.5rem; margin-right: -.5rem; }
-  .mhn3-l { margin-left: -1rem; margin-right: -1rem; }
+  .mhn1-l { margin-left: -var(--spacing-extra-small); margin-right: -var(--spacing-extra-small); }
+  .mhn2-l { margin-left: -var(--spacing-small); margin-right: -var(--spacing-small); }
+  .mhn3-l { margin-left: -var(--spacing-medium); margin-right: -var(--spacing-medium); }
 }
diff --git a/src/css/imports/_hovers.css b/src/css/imports/_states.css
index a10c718..f8f22a7 100755
--- a/src/css/imports/_hovers.css
+++ b/src/css/imports/_states.css
@@ -1,32 +1,29 @@
-@media (--breakpoint-large) {
-  .raise {
-    transform: none;
-    transition: var(--hover-transition);
-  }
-  .raise:hover,
-  .raise:focus {
-    transform: translateY(-.1rem);
-    transition: var(--hover-transition);
-  }
-  .raise:active {
-    opacity: .5; transition: var(--hover-transition);
-  }
+/* Focus states */
+input:focus, textarea:focus a:focus {
+  box-shadow: 0 0 0 2px var(--primary);
+  outline: 0;
 }
 
-/*
+button:focus {
+  box-shadow: 0 0 0 4px var(--primary);
+  outline: 0;
+}
 
-  Hide child & reveal on hover:
+.raise {
+  transition: var(--hover-transition);
+  transform: translateY(0) translateZ(0);
+}
 
-  Put the hide-child class on a parent element and any nested element with the
-  child class will be hidden and displayed on hover or focus.
+.raise:hover,
+.raise:focus {
+  transition: var(--hover-transition);
+  transform: translateY(-.12rem) translateZ(0);
+}
 
-  <div class="hide-child">
-    <div class="child"> Hidden until hover or focus </div>
-    <div class="child"> Hidden until hover or focus </div>
-    <div class="child"> Hidden until hover or focus </div>
-    <div class="child"> Hidden until hover or focus </div>
-  </div>
-*/
+.raise:active {
+  transition: var(--hover-transition);
+  opacity: .5;
+}
 
 .hide-child .child {
   opacity: 0;
diff --git a/src/css/imports/_tables.css b/src/css/imports/_tables.css
index d1f145a..ca6ca41 100755
--- a/src/css/imports/_tables.css
+++ b/src/css/imports/_tables.css
@@ -1,35 +1,30 @@
-/*
-
-  TABLES
-  Docs: http://tachyons.io/docs/elements/tables/
-
-*/
-
-.collapse {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-.striped--light-silver:nth-child(odd) {
-  background-color: var(--light-silver);
+table
+{
+  border-radius: var(--border-radius);
+  overflow: hidden;
 }
 
-.striped--moon-gray:nth-child(odd) {
-  background-color: var(--moon-gray);
+td, th {
+  padding: $spacing-medium;
 }
 
-.striped--light-gray:nth-child(odd) {
-  background-color: var(--light-gray);
+th:not(:first-child), td:not(:first-child) {
+  text-align: right;
 }
 
-.striped--near-white:nth-child(odd) {
-  background-color: var(--near-white);
+th {
+  color: var(--grey-3);
+  font-weight: 700;
+  white-space: nowrap;
+   {
+    white-space: wrap;
+  }
 }
 
-.stripe-light:nth-child(odd) {
-  background-color: var(--white-10);
+tr th {
+  text-align: center;
 }
 
-.stripe-dark:nth-child(odd) {
-  background-color: var(--black-10);
+tbody tr:nth-child(even) {
+  background-color: var(--grey-1);
 }
diff --git a/src/css/imports/_type-scale.css b/src/css/imports/_type-scale.css
index dab4aa6..dd320a5 100755
--- a/src/css/imports/_type-scale.css
+++ b/src/css/imports/_type-scale.css
@@ -1,51 +1,3 @@
-/*
-
-   TYPE SCALE
-   Docs: http://tachyons.io/docs/typography/scale/
-
-   Base:
-    f = font-size
-
-   Modifiers
-     1 = 1st step in size scale
-     2 = 2nd step in size scale
-     3 = 3rd step in size scale
-     4 = 4th step in size scale
-     5 = 5th step in size scale
-     6 = 6th step in size scale
-
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
-*/
-
-/*
- * For Hero/Marketing Titles
- *
- * These generally are too large for mobile
- * so be careful using them on smaller screens.
- * */
-
-html {
-  font-size: 18px;
-  @media (--breakpoint-medium) {
-    font-size: 20px;
-  }
-  @media (--breakpoint-large) {
-    font-size: 22px;
-  }
-}
-
-
-body {
-  font-size: 1rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: var(--white);
- }
-
 .f-6,
 .f-headline {
   font-size: 6rem;
@@ -61,8 +13,8 @@ body {
 .f1 { font-size: 3rem; }
 .f2 { font-size: 2.25rem; }
 .f3 { font-size: 1.5rem; }
-.f4 { font-size: 1.25rem; }
-.f5 { font-size: 1rem; }
+.f4 { font-size: 1.25rem;; }
+.f5 { font-size: var(--spacing-medium); }
 .f6 { font-size: .875rem; }
 
 @media (--breakpoint-not-small) {
@@ -73,8 +25,8 @@ body {
   .f1-ns { font-size: 3rem; }
   .f2-ns { font-size: 2.25rem; }
   .f3-ns { font-size: 1.5rem; }
-  .f4-ns { font-size: 1.25rem; }
-  .f5-ns { font-size: 1rem; }
+  .f4-ns { font-size: 1.25rem;; }
+  .f5-ns { font-size: var(--spacing-medium); }
   .f6-ns { font-size: .875rem; }
 }
 
@@ -86,8 +38,8 @@ body {
   .f1-m { font-size: 3rem; }
   .f2-m { font-size: 2.25rem; }
   .f3-m { font-size: 1.5rem; }
-  .f4-m { font-size: 1.25rem; }
-  .f5-m { font-size: 1rem; }
+  .f4-m { font-size: 1.25rem;; }
+  .f5-m { font-size: var(--spacing-medium); }
   .f6-m { font-size: .875rem; }
 }
 
@@ -103,7 +55,7 @@ body {
   .f1-l { font-size: 3rem; }
   .f2-l { font-size: 2.25rem; }
   .f3-l { font-size: 1.5rem; }
-  .f4-l { font-size: 1.25rem; }
-  .f5-l { font-size: 1rem; }
+  .f4-l { font-size: 1.25rem;; }
+  .f5-l { font-size: var(--spacing-medium); }
   .f6-l { font-size: .875rem; }
 }
diff --git a/src/css/imports/_typography.css b/src/css/imports/_typography.css
index 4d6fecc..3aba6ea 100755
--- a/src/css/imports/_typography.css
+++ b/src/css/imports/_typography.css
@@ -1,20 +1,41 @@
-/*
-
-   TYPOGRAPHY
-   http://tachyons.io/docs/typography/measure/
+html {
+  font-size: 18px;
+  @media (--breakpoint-medium) {
+    font-size: 20px;
+  }
+  @media (--breakpoint-large) {
+    font-size: 22px;
+  }
+}
 
-   Media Query Extensions:
-     -ns = not-small
-     -m  = medium
-     -l  = large
 
-*/
+body {
+  font-size: var(--spacing-medium);
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: var(--white);
+ }
 
 p {
-  margin-bottom: 1rem;
+  margin-bottom: var(--spacing-medium);
   max-width: 32rem;
 }
 
+strong {
+  font-weight: 800;
+}
+
+em {
+  font-style: italic;
+}
+
+sup {
+  font-size: .6rem;
+  font-weight: 700;
+  vertical-align: super;
+}
+
 /* Measure is limited to ~66 characters */
 .measure {
   max-width: 30em;
diff --git a/src/css/imports/_variables.css b/src/css/imports/_variables.css
index f75395f..177b1c1 100644
--- a/src/css/imports/_variables.css
+++ b/src/css/imports/_variables.css
@@ -1,3 +1,14 @@
 :root {
+  --border-radius: .25rem;
   --hover-transition: all 150ms ease;
+
+  /* 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;
 }
diff --git a/src/css/imports/_widths.css b/src/css/imports/_widths.css
index 54c0c7c..d02a240 100755
--- a/src/css/imports/_widths.css
+++ b/src/css/imports/_widths.css
@@ -38,7 +38,7 @@
 
 /* Width Scale */
 
-.w1 {    width: 1rem; }
+.w1 {    width: var(--spacing-medium); }
 .w2 {    width: 2rem; }
 .w3 {    width: 4rem; }
 .w4 {    width: 8rem; }
@@ -64,7 +64,7 @@
 .w-auto { width: auto; }
 
 @media (--breakpoint-not-small) {
-  .w1-ns {  width: 1rem; }
+  .w1-ns {  width: var(--spacing-medium); }
   .w2-ns {  width: 2rem; }
   .w3-ns {  width: 4rem; }
   .w4-ns {  width: 8rem; }
@@ -89,7 +89,7 @@
 }
 
 @media (--breakpoint-medium) {
-  .w1-m {      width: 1rem; }
+  .w1-m {      width: var(--spacing-medium); }
   .w2-m {      width: 2rem; }
   .w3-m {      width: 4rem; }
   .w4-m {      width: 8rem; }
@@ -114,7 +114,7 @@
 }
 
 @media (--breakpoint-large) {
-  .w1-l {      width: 1rem; }
+  .w1-l {      width: var(--spacing-medium); }
   .w2-l {      width: 2rem; }
   .w3-l {      width: 4rem; }
   .w4-l {      width: 8rem; }
diff --git a/src/css/main.css b/src/css/main.css
index c9a363a..f3709f4 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -69,7 +69,7 @@
 @import './imports/_visibility';
 @import './imports/_white-space';
 @import './imports/_vertical-align';
-@import './imports/_hovers';
+@import './imports/_states';
 @import './imports/_z-index';
 @import './imports/_styles';
 @import './imports/_buttons';