diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index 8842d1ba..036cd481 100644
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -68,43 +68,43 @@ doc-subtab: variables
 <tr>
   <td><code>$black</code></td>
   <td>
-  <span class="color" style="background-color: #111;"></span>
-  #111
+  <span class="color" style="background-color: #0a0a0a;"></span>
+  #0a0a0a
   </td>
 </tr>
 <tr>
   <td><code>$grey-darker</code></td>
   <td>
-  <span class="color" style="background-color: #222324;"></span>
-  #222324
+  <span class="color" style="background-color: #363636;"></span>
+  #363636
   </td>
 </tr>
 <tr>
   <td><code>$grey-dark</code></td>
   <td>
-  <span class="color" style="background-color: #69707a;"></span>
-  #69707a
+  <span class="color" style="background-color: #4a4a4a;"></span>
+  #4a4a4a
   </td>
 </tr>
 <tr>
   <td><code>$grey</code></td>
   <td>
-  <span class="color" style="background-color: #aeb1b5;"></span>
-  #aeb1b5
+  <span class="color" style="background-color: #7a7a7a;"></span>
+  #7a7a7a
   </td>
 </tr>
 <tr>
   <td><code>$grey-light</code></td>
   <td>
-  <span class="color" style="background-color: #d3d6db;"></span>
-  #d3d6db
+  <span class="color" style="background-color: #b5b5b5;"></span>
+  #b5b5b5
   </td>
 </tr>
 <tr>
   <td><code>$grey-lighter</code></td>
   <td>
-  <span class="color" style="background-color: #f5f7fa;"></span>
-  #f5f7fa
+  <span class="color" style="background-color: #dbdbdb;"></span>
+  #dbdbdb
   </td>
 </tr>
 <tr>
@@ -117,57 +117,57 @@ doc-subtab: variables
 <tr>
   <td><code>$blue</code></td>
   <td>
-  <span class="color" style="background-color: #42afe3;"></span>
-  #42afe3
+  <span class="color" style="background-color: #3273dc;"></span>
+  #3273dc
   </td>
 </tr>
 <tr>
   <td><code>$green</code></td>
   <td>
-  <span class="color" style="background-color: #97cd76;"></span>
-  #97cd76
+  <span class="color" style="background-color: #23d160;"></span>
+  #23d160
   </td>
 </tr>
 <tr>
   <td><code>$orange</code></td>
   <td>
-  <span class="color" style="background-color: #f68b39;"></span>
-  #f68b39
+  <span class="color" style="background-color: #ff470f;"></span>
+  #ff470f
   </td>
 </tr>
 <tr>
   <td><code>$purple</code></td>
   <td>
-  <span class="color" style="background-color: #847bb9;"></span>
-  #847bb9
+  <span class="color" style="background-color: #b86bff;"></span>
+  #b86bff
   </td>
 </tr>
 <tr>
   <td><code>$red</code></td>
   <td>
-  <span class="color" style="background-color: #ed6c63;"></span>
-  #ed6c63
+  <span class="color" style="background-color: #ff3860;"></span>
+  #ff3860
   </td>
 </tr>
 <tr>
   <td><code>$turquoise</code></td>
   <td>
-  <span class="color" style="background-color: #1fc8db;"></span>
-  #1fc8db
+  <span class="color" style="background-color: #00d1b2;"></span>
+  #00d1b2
   </td>
 </tr>
 <tr>
   <td><code>$yellow</code></td>
   <td>
-  <span class="color" style="background-color: #fce473;"></span>
-  #fce473
+  <span class="color" style="background-color: #ffdd57;"></span>
+  #ffdd57
   </td>
 </tr>
 
 <tr><th colspan="2">Typography</th></tr>
 
-<tr><td><code>$family-sans-serif</code></td><td>"Helvetica Neue", "Helvetica", "Arial", sans-serif</td></tr>
-<tr><td><code>$family-monospace</code></td><td>"Source Code Pro", "Monaco", "Inconsolata", monospace</td></tr>
+<tr><td><code>$family-sans-serif</code></td><td>-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif</td></tr>
+<tr><td><code>$family-monospace</code></td><td>"Inconsolata", "Consolas", "Monaco", monospace</td></tr>
 
 <tr><td><code>$size-1</code></td><td>48px</td></tr>
 <tr><td><code>$size-2</code></td><td>40px</td></tr>