diff --git a/sass/_theme.scss b/sass/_theme.scss
index ece7688..1a711a5 100644
--- a/sass/_theme.scss
+++ b/sass/_theme.scss
@@ -59,7 +59,7 @@ blockquote cite::before {
   padding: 20px 10px;
 }
 nav a.active {
-  background-color: #ff2e88;
+  background-color: $anchor;
   color: #fff;
 }
 a[itemprop="url"] {
diff --git a/sass/_vendor.scss b/sass/_vendor.scss
index 215ee8f..cd15ddf 100644
--- a/sass/_vendor.scss
+++ b/sass/_vendor.scss
@@ -1,3 +1,5 @@
+@import "colors"
+
 html {
   font-size: 12px
 }
@@ -11,7 +13,7 @@ body {
   font-size: 1rem;
   line-height: 1.5rem;
   margin: 0;
-  font-family: Anonymous Pro, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
+  font-family: $font
   word-wrap: break-word
 }
 
@@ -28,8 +30,8 @@ fieldset {
 pre {
   padding: 2rem;
   margin: 1.75rem 0;
-  background-color: #fff;
-  border: 1px solid #ccc;
+  background-color: $pre-background;
+  border: 1px solid $pre-border;
   overflow: auto
 }
 
@@ -41,14 +43,14 @@ code[class*=language-], pre[class*=language-], pre code {
 
 a {
   cursor: pointer;
-  color: #ff2e88;
+  color: $anchor;
   text-decoration: none;
-  border-bottom: 1px solid #ff2e88
+  border-bottom: 1px solid $anchor
 }
 
 a:hover {
-  background-color: #ff2e88;
-  color: #fff
+  background-color: $anchor;
+  color: $anchor-hover;
 }
 
 .grid {
@@ -180,7 +182,7 @@ a:hover {
 .hack, .hack blockquote, .hack code, .hack em, .hack h1, .hack h2, .hack h3, .hack h4, .hack h5, .hack h6, .hack strong {
   font-size: 1rem;
   font-style: normal;
-  font-family: Anonymous Pro, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
+  font-family: $font;
 }
 
 .hack blockquote, .hack code, .hack em, .hack strong {
@@ -367,7 +369,7 @@ p {
 .progress-bar {
   height: 8px;
   opacity: .8;
-  background-color: #ccc;
+  background-color: $progressbar-color;
   margin-top: 12px
 }
 
@@ -376,7 +378,7 @@ p {
 }
 
 .progress-bar-filled {
-  background-color: gray;
+  background-color: $progressbar-color-filled;
   height: 100%;
   transition: width .3s ease;
   position: relative;
@@ -386,14 +388,14 @@ p {
 .progress-bar-filled:before {
   content: '';
   border: 6px solid transparent;
-  border-top-color: gray;
+  border-top-color: $progressbar-color-filled;
   position: absolute;
   top: -12px;
   right: -6px
 }
 
 .progress-bar-filled:after {
-  color: gray;
+  color: $progressbar-color-filled;
   content: attr(data-filled);
   display: block;
   font-size: 12px;
@@ -410,12 +412,12 @@ table {
   width: 100%;
   border-collapse: collapse;
   margin: 1.75rem 0;
-  color: #778087
+  color: $table-color;
 }
 
 table td, table th {
   vertical-align: top;
-  border: 1px solid #ccc;
+  border: 1px solid $table-color;
   line-height: 15px;
   padding: 10px
 }
@@ -426,7 +428,7 @@ table thead th {
 
 table tbody td:first-child {
   font-weight: 700;
-  color: #333
+  color: $table-first-child;
 }
 
 .form {
@@ -439,8 +441,8 @@ table tbody td:first-child {
 }
 
 .form-group label {
-  border-bottom: 2px solid #ccc;
-  color: #333;
+  border-bottom: 2px solid $form-label-border;
+  color: $form-label-color;
   width: 10rem;
   display: inline-block;
   height: 38px;
@@ -451,24 +453,24 @@ table tbody td:first-child {
 }
 
 .form-group.form-success label {
-  color: #4caf50 !important;
-  border-color: #4caf50 !important
+  color: $form-success-color !important;
+  border-color: $form-success-border !important
 }
 
 .form-group.form-warning label {
-  color: #ff9800 !important;
-  border-color: #ff9800 !important
+  color: $form-warning-color !important;
+  border-color: $form-warning-border !important
 }
 
 .form-group.form-error label {
-  color: #f44336 !important;
-  border-color: #f44336 !important
+  color: $form-error-color !important;
+  border-color: $form-error-border !important
 }
 
 .form-control {
   outline: none;
   border: none;
-  border-bottom: 2px solid #ccc;
+  border-bottom: 2px solid $form-control-border;
   padding: .5rem 0;
   width: 20rem;
   height: 38px;
@@ -476,14 +478,14 @@ table tbody td:first-child {
 }
 
 .form-control:focus {
-  border-color: #555
+  border-color: $form-control-focus;
 }
 
 .form-group.form-textarea label:after {
   position: absolute;
   content: '';
   width: 2px;
-  background-color: #fff;
+  background-color: $form-textarea-background;
   right: -2px;
   top: 0;
   bottom: 0
@@ -493,8 +495,8 @@ textarea.form-control {
   height: auto;
   resize: none;
   padding: 1rem 0;
-  border-bottom: 2px solid #ccc;
-  border-left: 2px solid #ccc;
+  border-bottom: 2px solid $form-textarea-border;
+  border-left: 2px solid $form-textarea-border;
   padding: .5rem
 }
 
@@ -507,7 +509,7 @@ select.form-control {
 }
 
 .help-block {
-  color: #999;
+  color: $help-block;
   margin-top: .5rem
 }
 
@@ -535,18 +537,18 @@ select.form-control {
 }
 
 .btn:active {
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12)
+  box-shadow: inset 0 1px 3px $button-active-shadow;
 }
 
 .btn.btn-ghost {
-  border-color: #757575;
-  color: #757575;
+  border-color: $button-ghost-border;
+  color: $button-ghost-color;
   background-color: transparent
 }
 
 .btn.btn-ghost:focus, .btn.btn-ghost:hover {
-  border-color: #424242;
-  color: #424242;
+  border-color: $button-ghost-focus-border;
+  color: $button-ghost-focus-color;
   z-index: 2
 }
 
@@ -561,31 +563,30 @@ select.form-control {
 }
 
 .btn-default {
-  color: #fff;
-  background-color: #e0e0e0;
-  border: 1px solid #e0e0e0;
-  color: #333
+  background-color: $button-default-background;
+  border: 1px solid $button-default-border;
+  color: $button-default-color;
 }
 
 .btn-default:focus:not(.btn-ghost), .btn-default:hover {
-  background-color: #dcdcdc;
-  border-color: #dcdcdc
+  background-color: $button-default-focus-background;
+  border-color: $button-default-focus-border
 }
 
 .btn-success {
-  color: #fff;
-  background-color: #4caf50;
-  border: 1px solid #4caf50
+  color: $button-success-color;
+  background-color: $button-success-background;
+  border: 1px solid $button-success-border;
 }
 
 .btn-success:focus:not(.btn-ghost), .btn-success:hover {
-  background-color: #43a047;
-  border-color: #43a047
+  background-color: $button-success-focus-background;
+  border-color: $button-success-focus-border
 }
 
 .btn-success.btn-ghost {
-  border-color: #4caf50;
-  color: #4caf50
+  border-color: $button-success-ghost-border;
+  color: $button-success-ghost-color;
 }
 
 .btn-success.btn-ghost:focus, .btn-success.btn-ghost:hover {
diff --git a/sass/colors.scss b/sass/colors.scss
new file mode 100644
index 0000000..7a022a6
--- /dev/null
+++ b/sass/colors.scss
@@ -0,0 +1,62 @@
+$font: Inconsolata, Courier;
+$pre-background: #fff;
+$pre-border: #ccc;
+
+$success: #4caf50;
+
+$anchor: #ff2e88;
+$anchor-hover: #fff;
+
+$progressbar-color: #ccc;
+$progressbar-color-filled: gray;
+
+$table-color: #778087;
+$table-border: #ccc;
+$table-first-child: #333;
+
+$form-label-border: #ccc;
+$form-label-color: #333;
+
+$form-control-border: $form-label-border;
+$form-control-focus: #555;
+
+$form-textarea-background: #fff;
+$form-textarea-border: #ccc;
+
+$form-success-color: $success;
+$form-success-border: $form-success-color;
+
+$form-warning-color: #ff9800;
+$form-warning-border: $form-warning-color;
+
+$form-error-color: #f44336;
+$form-error-border: $form-error-color;
+
+$help-block: #999;
+
+$button-active-shadow: rgba(0, 0, 0, .12);
+
+$button-ghost-color: #757575;
+$button-ghost-border: $button-ghost-color;
+
+$button-ghost-focus-border: #424242;
+$button-ghost-focus-color: $button-ghost-focus-border;
+$button-ghost-hover-border: $button-ghost-focus-border;
+$button-ghost-hover-color: $button-ghost-focus-border;
+
+$button-default-color: #333;
+$button-default-background: #e0e0e0;
+$button-default-border: #e0e0e0;
+
+$button-default-focus-background: #dcdcdc;
+$button-default-focus-border: #dcdcdc;
+
+$button-success-color: #fff;
+$button-success-background: $success;
+$button-success-border: $success;
+$button-success-focus-background: $success;
+$button-success-focus-border: $success;
+$button-success-ghost-border: $success;
+$button-success-ghost-color: $success;
+$button-success-ghost-focus-border: #388e3c;
+$button-success-ghost-focus-color: $button-success-ghost-focus-border;