diff --git a/source/_sass/app.scss b/source/_sass/app.scss
index 490711d..ad21324 100644
--- a/source/_sass/app.scss
+++ b/source/_sass/app.scss
@@ -40,7 +40,8 @@ html {
 
 body {
   padding-top: $header-height;
-  background-color: $gray-01;
+  background-color: var(--dev-bg-primary);
+  color: var(--dev-fg-primary);
 }
 
 .anchor[id],
@@ -59,9 +60,9 @@ body {
 }
 
 code {
-  background-color: $white;
+  background-color: var(--dev-bg-secondary);
   border-radius: 2px;
-  color: color.adjust($base-font-color, $lightness: -20%, $space: hsl);
+  color: var(--dev-fg-tertiary);
   font-family: $monospace;
   font-size: $base-font-size;
   padding: 2px 4px;
@@ -69,7 +70,7 @@ code {
 }
 
 a code {
-  color: color.adjust($base-link-color, $lightness: -10%, $space: hsl);
+  color: var(--dev-fg-tertiary);
 }
 
 .container {
@@ -238,7 +239,7 @@ a code {
 }
 
 .modal-content {
-  background-color: $gray-01;
+  background-color: var(--dev-bg-primary);
 }
 
 .header--skinny {
diff --git a/source/_sass/base/_typography.scss b/source/_sass/base/_typography.scss
index f4b4bf1..a6c53ef 100644
--- a/source/_sass/base/_typography.scss
+++ b/source/_sass/base/_typography.scss
@@ -76,7 +76,7 @@ a {
 }
 
 hr {
-  border-bottom: 1px solid $base-border-color;
+  border-bottom: 1px solid var(--dev-fg-primary);
   border-left: none;
   border-right: none;
   border-top: none;
@@ -89,14 +89,14 @@ img {
 }
 
 blockquote {
-  border-left: 2px solid $base-border-color;
-  color: color.adjust($base-font-color, $lightness: 15%, $space: hsl);
+  border-left: 2px solid var(--dev-fg-primary);
+  color: var(--dev-fg-secondary);
   margin: $base-line-height 0;
   padding-left: $base-line-height * 0.5;
 }
 
 cite {
-  color: color.adjust($base-font-color, $lightness: 25%, $space: hsl);
+  color: var(--dev-fg-secondary);
   font-style: italic;
 
   &:before {
diff --git a/source/_sass/base/_variables.scss b/source/_sass/base/_variables.scss
index dc59ab4..75bd469 100644
--- a/source/_sass/base/_variables.scss
+++ b/source/_sass/base/_variables.scss
@@ -31,21 +31,19 @@ $header-line-height: 1.3;
 $base-border-radius: em(3);
 
 // Background Color
-$base-background-color: #fff;
+$base-background-color: var(--dev-bg-primary);
 
 // Font Colors
-$base-font-color: $gray-03;
+$base-font-color: var(--dev-fg-primary);
+$base-text-color: $base-font-color;
 $base-accent-color: $lightblue;
 
 // Link Colors
-$base-link-color: $base-accent-color;
-$hover-link-color: color.adjust($base-accent-color, $lightness: -15%, $space: hsl);
+$base-link-color: var(--dev-link);
+$hover-link-color: var(--dev-link-hover);
 $base-button-color: $base-link-color;
 $hover-button-color: $hover-link-color;
 
-// Border color
-$base-border-color: $gray-03;
-
 // Flash Colors
 $alert-color: $yellow;
 $error-color: $red;
@@ -53,8 +51,8 @@ $notice-color: $yellow;
 $success-color: $green;
 
 // Forms
-$form-border-color: $base-border-color;
-$form-border-color-hover: color.adjust($base-border-color, $lightness: -10%, $space: hsl);
+$form-border-color: var(--dev-border-primary);
+$form-border-color-hover: var(--dev-border-tertiary);
 $form-border-color-focus: $base-accent-color;
 $form-border-radius: $base-border-radius;
 $form-box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
diff --git a/source/_sass/colors.scss b/source/_sass/colors.scss
index 49efc21..ea7bef5 100644
--- a/source/_sass/colors.scss
+++ b/source/_sass/colors.scss
@@ -54,27 +54,16 @@ $bigbox--green: #22a048;
 $bigbox--darkgreen: color.adjust($bigbox--green, $lightness: -20%, $space: hsl);
 $bigbox--dark-blue: color.adjust($darkerlightblue, $lightness: -20%, $space: hsl);
 
-$color-guides: $yellow;
-$color-docs: $pink;
-$color-community: $purple;
-$color-more: $green;
-$color-getting-started: $dark-red;
-$color-sdk: $lightblue;
-$color-appstore: $orange;
-$color-other: $dark-grey;
-
 $gray-01: #f4f4f4;
-$gray-02: #444;
-$gray-03: #484848;
-$gray-04: #eee;
-$gray-05: #e5e4e4;
-$gray-06: #d6d6d6;
-$gray-07: #272822;
-$gray-08: #ddd;
-$gray-09: #bebebe;
-$gray-10: #d9d9d9;
-$gray-11: #666;
-$gray-12: #ccc;
+$gray-02: #eee;
+$gray-03: #e5e4e4;
+$gray-04: #d9d9d9;
+$gray-05: #bebebe;
+$gray-06: #beef69;
+$gray-07: #666;
+$gray-08: #444;
+$gray-09: #272822;
+$gray-10: #12130f;
 
 $bigbox--blue: $lightblue;
 $bigbox--green: #22a048;
@@ -85,7 +74,8 @@ $color-community: $purple;
 $color-more: $green;
 $color-getting-started: $dark-red;
 $color-sdk: $lightblue;
-$color-appstore: $gray-03;
+$color-appstore: $gray-08;
+$color-other: $dark-grey;
 $color-blog: $orange-02;
 $color-examples: #2c67ce;
 
@@ -97,3 +87,41 @@ $modifier-colors: $color-guides, $color-docs, $color-community, $color-more,
                   $color-blog;
 
 $modifier-colors-fg: $white $white $white $white $white $white $white $white;
+
+@media all {
+  :root {
+    /* Dark Mode Support */
+    color-scheme: light dark;
+
+    --dev-bg-primary: #{$gray-01};
+    --dev-bg-secondary: #{$white};
+    --dev-bg-tertiary: #{$gray-03};
+    --dev-bg-prominent: #{$gray-02};
+    --dev-fg-primary: #{$gray-08};
+    --dev-fg-secondary: #{$gray-07};
+    --dev-fg-tertiary: #{$gray-09};
+    --dev-fg-muted: #{$gray-05};
+    --dev-border-primary: #{$gray-04};
+    --dev-border-secondary: #{$gray-03};
+    --dev-border-tertiary: #{$gray-05};
+    --dev-link: #{$pebble-blue};
+    --dev-link-hover: #{$pebble-blue-alt};
+  }
+}
+
+@media screen and (prefers-color-scheme: dark) {
+  :root {
+    --dev-bg-primary: #{$gray-10};
+    --dev-bg-secondary: #{$gray-09};
+    --dev-bg-tertiary: #{$black};
+    --dev-bg-prominent: #{$gray-08};
+    --dev-fg-primary: #{$white};
+    --dev-fg-secondary: #{$breakfast-room-white};
+    --dev-fg-tertiary: #{$gray-01};
+    --dev-border-primary: #{$black};
+    --dev-border-secondary: #{$gray-10};
+    --dev-border-tertiary: #{$gray-09};
+    --dev-link: #{color.adjust(#16b5d8, $lightness: 20%, $space: hsl)};
+    --dev-link-hover: #{$pebble-blue};
+  }
+}
diff --git a/source/_sass/elements/bigbox.scss b/source/_sass/elements/bigbox.scss
index 763facc..f949d65 100644
--- a/source/_sass/elements/bigbox.scss
+++ b/source/_sass/elements/bigbox.scss
@@ -98,15 +98,17 @@
 }
 
 .bigbox--lightgray {
-  background-color: $gray-04;
+  background-color: $gray-02;
+  color: $gray-08;
 }
 
 .bigbox--gray {
-  background-color: $gray-05;
+  background-color: $gray-03;
+  color: $gray-08;
 }
 
 .bigbox--darkgray {
-  background-color: $gray-02;
+  background-color: $gray-08;
   color: $white;
 }
 
@@ -170,7 +172,7 @@
 }
 
 .bigbox__guides-building {
-  background-color: $gray-02;
+  background-color: $gray-08;
   color: $breakfast-room-white;
   background-image: url('/assets/images/landing-page/back_for_more_bg.png');
 }
@@ -182,7 +184,7 @@
 }
 
 .bigbox__guides-interactive {
-  background-color: $gray-02;
+  background-color: $gray-08;
   color: $breakfast-room-white;
   background-image: url('/assets/images/landing-page/interactive_bg.png');
 }
diff --git a/source/_sass/elements/buttons.scss b/source/_sass/elements/buttons.scss
index 167e648..ee3fbfa 100644
--- a/source/_sass/elements/buttons.scss
+++ b/source/_sass/elements/buttons.scss
@@ -38,8 +38,8 @@ submit.btn {
   font-size: inherit;
 }
 
-$btn-colors: $white  $gray-02   $green   $blue   $red   $purple   $yellow   $orange   $lightblue   $dark-red $orange-02 $android-green;
-$btn-names:  'white' gray-02  'green'  'blue'  'red'  'purple'  'yellow'  'orange'  'lightblue'  'dark-red'  'orange-02' 'android-green';
+$btn-colors: $white  $dark-grey   $green   $blue   $red   $purple   $yellow   $orange   $lightblue   $dark-red $orange-02 $android-green;
+$btn-names:  'white' 'dark-grey'  'green'  'blue'  'red'  'purple'  'yellow'  'orange'  'lightblue'  'dark-red'  'orange-02' 'android-green';
 
 @each $color in $btn-colors {
   $i: list.index($btn-colors, $color);
diff --git a/source/_sass/elements/form.scss b/source/_sass/elements/form.scss
index 45e8fd3..f78eb1a 100644
--- a/source/_sass/elements/form.scss
+++ b/source/_sass/elements/form.scss
@@ -24,11 +24,11 @@
   input,
   select,
   textarea {
-    background-color: white;
-    border: 1px solid $gray-06;
+    background-color: var(--dev-bg-secondary);
+    border: 1px solid var(--dev-border-primary);
     border-left: none;
     border-radius: 0 5px 5px 0;
-    color: $gray-02;
+    color: var(--dev-fg-primary);
     display: table-cell;
     font-family: $sans-serif;
     font-size: 15px;
@@ -57,11 +57,11 @@
   }
 
   .select-style {
-    background-color: white;
+    background-color: var(--dev-bg-secondary);
     border-radius: 0 5px 5px 0;
-    border: 1px solid $gray-06;
+    border: 1px solid var(--dev-border-primary);
     border-left-width: 0;
-    color: color.adjust(#444, $alpha: -0.5);
+    color: var(--dev-fg-secondary);
     display: table-cell;
     font-family: $sans-serif;
     font-size: 15px;
@@ -91,11 +91,11 @@
   }
 
   label {
-    background-color: #fff;
-    border: 1px solid $gray-06;
+    background-color: var(--dev-bg-secondary);
+    border: 1px solid var(--dev-border-primary);
     border-right: none;
     border-radius: 5px 0 0 5px;
-    color: #111;
+    color: var(--dev-fg-tertiary);
     display: table-cell;
     font-size: 14px;
     font-weight: 400;
diff --git a/source/_sass/elements/gray-box.scss b/source/_sass/elements/gray-box.scss
index 598dd3b..4c537e2 100644
--- a/source/_sass/elements/gray-box.scss
+++ b/source/_sass/elements/gray-box.scss
@@ -15,7 +15,7 @@
  */
 
 .gray-box {
-  background-color: $gray-04;
+  background-color: var(--dev-bg-prominent);
   border-radius: $base-border-radius;
   margin-bottom: 1em;
   overflow-x: hidden;
@@ -38,7 +38,7 @@
   }
 
   h3 {
-    color: $gray-02;
+    color: var(--dev-fg-primary);
     font-size: 1.3em;
     font-weight: 600;
     text-transform: uppercase;
@@ -46,7 +46,7 @@
     a,
     a:hover,
     a:active {
-      color: $gray-02;
+      color: var(--dev-fg-primary);
     }
     
     a:hover,
@@ -61,7 +61,7 @@
 }
 
 .white-box {
-  background-color: $white;
+  background-color: var(--dev-bg-secondary);
   border-radius: $base-border-radius;
   margin-bottom: 1em;
   padding: 0.5em;
diff --git a/source/_sass/elements/highlight.scss b/source/_sass/elements/highlight.scss
index 8ac17b9..92d8fc5 100644
--- a/source/_sass/elements/highlight.scss
+++ b/source/_sass/elements/highlight.scss
@@ -15,7 +15,7 @@
  */
 
 .highlight {
-  background-color: $gray-07;
+  background-color: $gray-09;
   border-radius: $base-border-radius;
   color: #f8f8f2;
   font: 13px/1.3em $monospace;
diff --git a/source/_sass/elements/inline-list.scss b/source/_sass/elements/inline-list.scss
index 22b976f..5585d4b 100644
--- a/source/_sass/elements/inline-list.scss
+++ b/source/_sass/elements/inline-list.scss
@@ -31,7 +31,7 @@ ul.inline-list {
 }
 
 .inline-list--piped li::after {
-  color: color.adjust($base-font-color, $lightness: 30%, $space: hsl);
+  color: var(--dev-fg-secondary);
   content: ' | ';
   display: inline;
 }
@@ -41,7 +41,7 @@ ul.inline-list {
 }
 
 .inline-list--dashed li::after {
-  color: color.adjust($base-font-color, $lightness: 40%, $space: hsl);
+  color: var(--dev-fg-secondary);
   content: ' — ';
   display: inline;
 }
diff --git a/source/_sass/elements/markdown.scss b/source/_sass/elements/markdown.scss
index 2be9a09..5be0ece 100644
--- a/source/_sass/elements/markdown.scss
+++ b/source/_sass/elements/markdown.scss
@@ -26,14 +26,10 @@
     @extend %default-ol;
   }
 
-  $table-border-color: $gray-06;
+  $table-border-color: var(--dev-border-primary);
   $table-border: 1px solid $table-border-color;
-  $table-background: $white;
-  $table-header-background: $gray-02;
+  $table-header-background: $gray-08;
   $table-header-color: $white;
-  $table-hover-color: color.adjust($table-background, $lightness: -5%, $space: hsl);
-  $table-stripe-color: color.adjust($table-background, $lightness: -4%, $space: hsl);
-  $table-stripe-color-hover: color.adjust($table-stripe-color, $lightness: -5%, $space: hsl);
   $table-padding: 0.5em;
 
   table {
@@ -46,7 +42,7 @@
   }
 
   tbody {
-    background-color: $table-background;
+    background-color: var(--dev-bg-secondary);
 
     td {
       border-bottom: 0;
@@ -57,14 +53,14 @@
 
     tr:hover > td,
     tr:hover > th {
-      background-color: $table-hover-color;
+      background-color: var(--dev-bg-prominent);
     }
 
     tr:nth-child(even) {
-      background-color: $table-stripe-color;
+      background-color: var(--dev-bg-primary);
 
       &:hover > td {
-        background-color: $table-stripe-color-hover;
+        background-color: var(--dev-bg-tertiary);
       }
     }
   }
diff --git a/source/_sass/elements/mobile-nav.scss b/source/_sass/elements/mobile-nav.scss
index d0f9ed7..cc423d8 100644
--- a/source/_sass/elements/mobile-nav.scss
+++ b/source/_sass/elements/mobile-nav.scss
@@ -20,7 +20,7 @@
 $hamburger-width: $header-height;
 
 .mobile-nav {
-  background-color: $gray-03;
+  background-color: $gray-08;
   bottom: 0;
   left: 0;
   overflow-y: auto;
@@ -45,13 +45,13 @@ $hamburger-width: $header-height;
     text-transform: uppercase;
 
     &:hover {
-      background-color: color.adjust($gray-03, $lightness: 10%, $space: hsl);
+      background-color: color.adjust($gray-08, $lightness: 10%, $space: hsl);
     }
   }
 
   .mainmenu__item.active a {
-    background-color: $gray-06;
-    color: $gray-03;
+    background-color: $gray-04;
+    color: $gray-08;
   }
 }
 
@@ -59,7 +59,7 @@ $hamburger-width: $header-height;
   display: none;
 
   @include bp-max (xs) {
-    border-bottom: 1px solid $gray-10;
+    border-bottom: 1px solid $gray-04;
     display: block;
     position: fixed;
     background-color: $white;
@@ -70,11 +70,11 @@ $hamburger-width: $header-height;
     padding: math.div($base-font-size, 1.5) 0;
     font-size: $base-font-size * 2;
     text-align: center;
-    color: $gray-03;
+    color: $gray-08;
 
     &:hover,
     &:active {
-      color: $gray-03;
+      color: $gray-08;
     }
   }
 }
diff --git a/source/_sass/elements/pagination.scss b/source/_sass/elements/pagination.scss
index e14a4dc..807f298 100644
--- a/source/_sass/elements/pagination.scss
+++ b/source/_sass/elements/pagination.scss
@@ -22,9 +22,10 @@
   }
 
   a {
-    border: 1px solid $gray-08;
+    border: 1px solid var(--dev-border-secondary);
     border-radius: $base-border-radius;
-    color: $gray-02;
+    color: var(--dev-fg-primary);
+    background-color: var(--dev-bg-secondary);
     display: block;
     padding: 0.5rem 1rem;
 
@@ -37,7 +38,7 @@
 
   .active a {
     background-color: $base-link-color;
-    color: $white;
+    color: var(--dev-border-primary);
     font-weight: bold;
     border-color: $base-link-color;
   }
diff --git a/source/_sass/elements/screenshot.scss b/source/_sass/elements/screenshot.scss
index 4a9ef43..81fbdba 100644
--- a/source/_sass/elements/screenshot.scss
+++ b/source/_sass/elements/screenshot.scss
@@ -265,7 +265,7 @@
   -webkit-align-items: flex-end;
 
   h4 {
-    background-color: $gray-02;
+    background-color: $gray-08;
     color: $white;
     font-weight: normal;
     text-transform: uppercase;
@@ -286,13 +286,13 @@
 .screenshot-viewer--tabbed {
   .screenshot-viewer__tabs {
     h4 {
-      border: 2px solid $gray-02;
-      background-color: $gray-06;
-      color: $gray-02;
+      border: 2px solid $gray-08;
+      background-color: $gray-04;
+      color: $gray-08;
       cursor: pointer;
 
       &.selected {
-        background-color: $gray-02;
+        background-color: $gray-08;
         color: $white;
       }
     }
diff --git a/source/_sass/elements/search.scss b/source/_sass/elements/search.scss
index da7b1ff..6fdef3b 100644
--- a/source/_sass/elements/search.scss
+++ b/source/_sass/elements/search.scss
@@ -17,8 +17,8 @@
 @use "sass:math";
 
 .search {
-  background-color: $white;
-  border-bottom: 1px solid $gray-10;
+  background-color: var(--dev-bg-secondary);
+  border-bottom: 1px solid var(--dev-border-primary);
   height: $header-height;
   left: $sidebar-width;
   padding: math.div($base-font-size, 1.2);
@@ -40,6 +40,7 @@
     padding: $base-font-size * 0.5;
     padding-left: 2em;
     width: 100%;
+    background-color: transparent;
 
     @include bp-max ($sidebar-hide-at) {
       padding-left: 0;
@@ -85,8 +86,8 @@
 }
 
 .quicksearch {
-  background-color: #fff;
-  border-bottom: 1px solid #d9d9d9;
+  background-color: var(--dev-bg-primary);
+  border-bottom: 1px solid var(--dev-border-secondary);
   bottom: 10%;
   left: $sidebar-width;
   overflow-y: scroll;
@@ -121,7 +122,6 @@
 .quicksearch__block--guides {
   h3 {
     background-color: $color-guides;
-    color: $base-font-color;
   }
 }
 
@@ -185,16 +185,16 @@
   margin: 0;
   font-size: 0.75em;
   text-transform: uppercase;
-  color: $gray-11;
+  color: var(--dev-fg-secondary);
   font-weight: bold;
   width: auto;
   display: table;
 }
 
 .quicksearch__result--active {
-  background-color: $gray-01;
-  border-left: 2px solid $gray-03;
-  border-right: 2px solid $gray-03;
+  background-color: var(--dev-bg-primary);
+  border-left: 2px solid var(--dev-fg-primary);
+  border-right: 2px solid var(--dev-fg-primary);
   margin: -5px -5px 2.5px;
   padding: 5px;
 }
@@ -204,7 +204,7 @@
   font-weight: 300;
   text-align: center;
   padding: 1em;
-  color: $gray-09;
+  color: var(--dev-fg-muted);
 }
 
 .content--narrow .quicksearch {
diff --git a/source/_sass/elements/sectionmenu.scss b/source/_sass/elements/sectionmenu.scss
index b781933..a3b3aa9 100644
--- a/source/_sass/elements/sectionmenu.scss
+++ b/source/_sass/elements/sectionmenu.scss
@@ -24,7 +24,7 @@ $section-menu-width: 240px;
 }
 
 .section-menu {
-  border-right: 1px solid $gray-08;
+  border-right: 1px solid $gray-04;
   bottom: 0;
   left: $sidebar-width;
   margin-top: $header-height;
@@ -97,7 +97,7 @@ $section-menu-width: 240px;
 .section-menu__item {
 
   > a {
-    color: $gray-02;
+    color: $gray-08;
     display: inline-block;
     font-size: 13px;
     font-weight: bold;
@@ -117,7 +117,7 @@ $section-menu-width: 240px;
 .section-menu__subitem {
 
   > a {
-    color: $gray-02;
+    color: $gray-08;
     display: block;
     font-size: 13px;
     font-weight: 600;
@@ -142,7 +142,7 @@ $section-menu-width: 240px;
 .section-menu__subsubitem {
 
   > a {
-    color: $gray-02;
+    color: $gray-08;
     display: block;
     font-size: 12px;
     font-weight: normal;
@@ -169,7 +169,7 @@ $section-menu-width: 240px;
   .section-menu__subsubitem.active > a span {
     background-color: $white;
     border-radius: $base-border-radius;
-    color: $gray-02;
+    color: $gray-08;
   }
 }
 
@@ -178,13 +178,13 @@ $section-menu-width: 240px;
   &,
   a,
   .section-menu__header a {
-    color: $gray-02;
+    color: $gray-08;
   }
 
   .section-menu__item.active > a,
   .section-menu__subitem.active > a,
   .section-menu__subsubitem.active > a span {
-    background-color: $gray-02;
+    background-color: $gray-08;
     border-radius: $base-border-radius;
     color: $white;
   }
diff --git a/source/_sass/elements/sidebar.scss b/source/_sass/elements/sidebar.scss
index cab9b51..4016558 100644
--- a/source/_sass/elements/sidebar.scss
+++ b/source/_sass/elements/sidebar.scss
@@ -35,7 +35,7 @@ $sidebar-hide-at: xs;
 }
 
 .sidebar {
-  background-color: #f6f6f6;
+  background-color: var(--dev-bg-primary);
   bottom: 0;
   left: 0;
   padding-top: $header-height;
@@ -85,7 +85,7 @@ $sidebar-hide-at: xs;
     }
 
     > a {
-      background-color: color.adjust($base-link-color, $lightness: 30%, $space: hsl);
+      background-color: $hover-link-color;
       color: #fff;
     }
   }
@@ -122,7 +122,7 @@ $sidebar-hide-at: xs;
   text-align: center;
 
   a {
-    color: $gray-03;
+    color: var(--dev-fg-primary);
 
     &:hover {
       text-decoration: underline;
@@ -179,7 +179,7 @@ $sidebar-hide-at: xs;
 }
 
 .mainmenu {
-  border-right: 1px solid $gray-08;
+  border-right: 1px solid var(--dev-border-primary);
   height: 100%;
   // I would like to enable scrolling on the Y axis but it breaks the tooltips.
   // overflow-x: visible;
@@ -194,7 +194,7 @@ $sidebar-hide-at: xs;
     background-position: center center;
     background-repeat: no-repeat;
     background-size: 3em;
-    color: $gray-02;
+    color: var(--dev-fg-primary);
     display: block;
     font-size: 13px;
     font-weight: bold;
@@ -209,7 +209,7 @@ $sidebar-hide-at: xs;
     }
 
     &:hover {
-      background-color: #e3e3e3;
+      background-color: var(--dev-bg-secondary);
     }
 
     @media screen and (max-height: 600px) {
@@ -220,7 +220,7 @@ $sidebar-hide-at: xs;
   }
 
   .mainmenu__item.active a {
-    background-color: #e3e3e3;
+    background-color: var(--dev-bg-secondary);
   }
 
   .mainmenu__item--overview a {
diff --git a/source/_sass/elements/toc.scss b/source/_sass/elements/toc.scss
index 799fd19..984a2ab 100644
--- a/source/_sass/elements/toc.scss
+++ b/source/_sass/elements/toc.scss
@@ -43,6 +43,6 @@
 .toc__item--active {
   font-weight: 600;
   a {
-    color: color.adjust($base-link-color, $lightness: -20%, $space: hsl);
+    color: $base-link-color;
   }
 }
diff --git a/source/_sass/elements/typeahead.scss b/source/_sass/elements/typeahead.scss
index 288c149..3738d46 100644
--- a/source/_sass/elements/typeahead.scss
+++ b/source/_sass/elements/typeahead.scss
@@ -18,6 +18,8 @@
 
 @use "sass:color";
 
+$base-border-color: $gray-08;
+
 .twitter-typeahead {
   width: 100%;
 }
diff --git a/source/_sass/sections/blog.scss b/source/_sass/sections/blog.scss
index bcde02e..cf4753f 100644
--- a/source/_sass/sections/blog.scss
+++ b/source/_sass/sections/blog.scss
@@ -17,8 +17,8 @@
 @use "sass:color";
 
 .blog__meta {
-  border-bottom: 1px solid $gray-09;
-  border-top: 1px solid $gray-09;
+  border-bottom: 1px solid var(--dev-border-tertiary);
+  border-top: 1px solid var(--dev-border-tertiary);
   padding: 0.5em;
   margin-bottom: 1em;
 }
@@ -53,7 +53,7 @@
     font-size: 0.9em;
 
     a {
-      color: color.adjust($gray-09, $lightness: -20%, $space: hsl);
+      color: var(--dev-fg-secondary);
     }
   }
 
@@ -65,7 +65,7 @@
     }
 
     p {
-      color: $gray-09;
+      color: var(--dev-fg-muted);
       font-size: 0.85em;
       text-align: center;
     }
diff --git a/source/_sass/sections/documentation.scss b/source/_sass/sections/documentation.scss
index 66731d5..4d4dc7a 100644
--- a/source/_sass/sections/documentation.scss
+++ b/source/_sass/sections/documentation.scss
@@ -16,20 +16,20 @@
 
 @use "sass:color";
 
-$docs-header-color: $gray-06;
+$docs-header-color: $gray-04;
 
 .documentation {
   max-width: 43em;
 
   a,
   a code {
-    color: color.adjust($base-link-color, $lightness: -20%, $space: hsl);
+    color: $base-link-color;
     font-weight: 600;
   }
 
   a:hover,
   a:active {
-    color: color.adjust($base-link-color, $lightness: -40%, $space: hsl);
+    color: $hover-link-color;
   }
 }
 
@@ -55,7 +55,7 @@ $docs-header-color: $gray-06;
     &:hover,
     &:active,
     &:focus {
-      color: $gray-02;
+      color: $gray-08;
     }
   }
 }
@@ -107,21 +107,21 @@ $docs-header-color: $gray-06;
   a {
     background-color: color.adjust($docs-header-color, $lightness: 8%, $space: hsl);
     border-radius: 4px 4px 0 0;
-    color: color.adjust($gray-02, $lightness: 10%, $space: hsl);
+    color: color.adjust($gray-08, $lightness: 10%, $space: hsl);
     display: block;
     padding: 0.4em 0.8em;
     text-transform: uppercase;
 
     &.active {
       background-color: $docs-header-color;
-      color: $gray-02;
+      color: $gray-08;
     }
   }
 }
 
 .docs__item__header {
   background-color: $docs-header-color;
-  color: $gray-02;
+  color: $gray-08;
   font-size: 0.9em;
   font-weight: 600;
   padding: 0.5em;
@@ -129,12 +129,12 @@ $docs-header-color: $gray-06;
   a,
   a:hover,
   a:active {
-    color: $gray-02;
+    color: $gray-08;
   }
 }
 
 .docs__item__name {
-  color: $gray-02;
+  color: $gray-08;
   font-weight: bold;
 }
 
@@ -181,7 +181,7 @@ $docs-header-color: $gray-06;
 }
 
 .docs__item--missing {
-  border: 1px solid $gray-09;
+  border: 1px solid $gray-05;
   padding: 0.5em;
 
   p {
@@ -190,10 +190,10 @@ $docs-header-color: $gray-06;
 }
 
 .alert--docs-notes {
-  background-color: $gray-05;
+  background-color: $gray-03;
   border-bottom: 2px solid $color-docs;
   border-top: 2px solid $color-docs;
-  color: $gray-03;
+  color: $gray-08;
   margin: 0 -0.5em 1em;
 
   h5 {
diff --git a/source/_sass/sections/documentation/android.scss b/source/_sass/sections/documentation/android.scss
index 805701e..654c261 100644
--- a/source/_sass/sections/documentation/android.scss
+++ b/source/_sass/sections/documentation/android.scss
@@ -27,12 +27,12 @@
   }
 
   .detail, .serialized-class-details {
-    border: 1px solid $gray-06;
+    border: 1px solid var(--dev-border-primary);
 
     h3 {
       font-size: 0.9em;
       padding: 8px;
-      background-color: $gray-06;
+      background-color: var(--dev-border-primary);
     }
 
     & > :not(h3) {
@@ -73,7 +73,7 @@
    * Styles for page header and footer.
    */
   .title {
-    color:#2c4557;
+    color:var(--dev-fg-primary);
     margin:10px 0;
   }
   .sub-title {
@@ -101,8 +101,8 @@
   body.class-declaration-page .summary h3,
   body.class-declaration-page .details h3,
   body.class-declaration-page .summary .inherited-list h2 {
-    background-color:#dee3e9;
-    border:1px solid #d0d9e0;
+    background-color:var(--dev-fg-tertiary);
+    border:1px solid var(--dev-border-secondary);
     margin:0 0 6px -8px;
     padding:7px 5px;
   }
@@ -189,14 +189,14 @@
   .summary-table, .details-table {
     width:100%;
     border-spacing:0;
-    border:1px solid $gray-06;
+    border:1px solid var(--dev-border-primary);
     padding:0;
   }
   .caption {
     position:relative;
     text-align:left;
     background-repeat:no-repeat;
-    color:#253441;
+    color:var(--dev-fg-primary);
     font-weight:bold;
     clear:none;
     overflow:hidden;
@@ -276,7 +276,7 @@
     padding-bottom:3px;
   }
   .table-header {
-    background:$gray-06;
+    background:var(--dev-border-primary);
     font-weight: bold;
     font-size:0.9em;
   }
@@ -299,13 +299,13 @@
     font-weight:bold;
   }
   .table-sub-heading-color {
-    background-color:#EEEEFF;
+    background-color:var(--dev-bg-tertiary);
   }
   .even-row-color, .even-row-color .table-header {
-    background-color:#FFFFFF;
+    background-color:var(--dev-bg-secondary);
   }
   .odd-row-color, .odd-row-color .table-header {
-    background-color:$gray-01;
+    background-color:var(--dev-bg-primary);
   }
   /*
    * Styles for contents.
diff --git a/source/_sass/sections/events.scss b/source/_sass/sections/events.scss
index 939aef2..41248a2 100644
--- a/source/_sass/sections/events.scss
+++ b/source/_sass/sections/events.scss
@@ -25,7 +25,7 @@
 
 .events__calendar {
   width: 100%;
-  background-color: $white;
+  background-color: var(--dev-bg-secondary);
   margin-bottom: 1em;
 
   th,
@@ -36,9 +36,9 @@
 
   .calendar__month,
   .calendar__arrow {
-    background-color: $gray-09;
+    background-color: var(--dev-bg-tertiary);
     font-weight: 700;
-    color: $white;
+    color: var(--dev-fg-secondary);
   }
 
   .calendar__arrow {
@@ -46,7 +46,7 @@
     padding: 0;
 
     a {
-      color: $white;
+      color: var(--dev-fg-secondary);
     }
   }
 
@@ -62,7 +62,7 @@
   }
 
   .calendar__day--past {
-    color: $gray-06;
+    color: $gray-04;
   }
 
   .calendar__day--event {
@@ -71,7 +71,7 @@
   }
 
   .calendar__day--past-event {
-    background-color: $gray-06;
+    background-color: $gray-04;
     color: #fff;
   }
 
@@ -94,7 +94,7 @@
 
     .event__meta {
       font-size: 0.9em;
-      color: color.adjust($gray-09, $lightness: -20%, $space: hsl);
+      color: var(--dev-fg-muted);
       margin-bottom: 0.5em;
     }
   }
@@ -107,7 +107,7 @@
 
   .event--past {
     a {
-      color: color.adjust($base-link-color, $lightness: 15%, $space: hsl);
+      color: $hover-link-color;
     }
   }
 }
diff --git a/source/_sass/sections/examples.scss b/source/_sass/sections/examples.scss
index ad9ef3d..274c32e 100644
--- a/source/_sass/sections/examples.scss
+++ b/source/_sass/sections/examples.scss
@@ -64,5 +64,5 @@
   margin-bottom: 0.5em;
   font-size: 0.8em;
   text-transform: uppercase;
-  color: $gray-09;
+  color: var(--dev-fg-muted);
 }
diff --git a/source/_sass/sections/guides.scss b/source/_sass/sections/guides.scss
index 7b7fb66..fdf08bf 100644
--- a/source/_sass/sections/guides.scss
+++ b/source/_sass/sections/guides.scss
@@ -48,5 +48,5 @@
 
 table td hr {
   margin: 0;
-  border-bottom-color: $gray-06;
+  border-bottom-color: var(--dev-border-primary);
 }
diff --git a/source/_sass/sections/inspiration.scss b/source/_sass/sections/inspiration.scss
index 987451d..d0e1f89 100644
--- a/source/_sass/sections/inspiration.scss
+++ b/source/_sass/sections/inspiration.scss
@@ -28,7 +28,7 @@
   blockquote {
     font-size: 1.3rem;
     border: 0;
-    color: color.adjust($base-font-color, $lightness: 20%, $space: hsl);
+    color: var(--dev-fg-secondary);
     margin: 0;
     padding: 0;
 
diff --git a/source/tutorials/index.html b/source/tutorials/index.html
index b325b85..0919d28 100644
--- a/source/tutorials/index.html
+++ b/source/tutorials/index.html
@@ -66,7 +66,7 @@ <h3>Build a One Click Action</h3>
         <div class="vcenter">
           <h3>Learn C with Pebble</h3>
           <p>A community driven, open source textbook that teaches the fundamentals of C through the scope of Pebble application development.</p>
-          <a href="https://pebble.gitbooks.io/learning-c-with-pebble/content/" target="_blank" class="btn btn--fg-gray-02 btn--bg-white">Read the Book</a>
+          <a href="https://pebble.gitbooks.io/learning-c-with-pebble/content/" target="_blank" class="btn btn--fg-dark-grey btn--bg-white">Read the Book</a>
         </div>
       </div>
     </div>