diff --git a/docs/documentation/overview/variables.html b/docs/documentation/overview/variables.html
index 8992dcd2..89337640 100644
--- a/docs/documentation/overview/variables.html
+++ b/docs/documentation/overview/variables.html
@@ -67,99 +67,127 @@ doc-subtab: variables
       <tr>
         <td><code>$black</code></td>
         <td>
-          <span class="color" style="background-color: #0a0a0a;"></span>
-          #0a0a0a
+          <span class="color" style="background: hsl(0, 0%, 4%);"></span>
+          hsl(0, 0%, 4%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$black-bis</code></td>
+        <td>
+          <span class="color" style="background: hsl(0, 0%, 7%);"></span>
+          hsl(0, 0%, 7%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$black-ter</code></td>
+        <td>
+          <span class="color" style="background: hsl(0, 0%, 14%);"></span>
+          hsl(0, 0%, 14%)
         </td>
       </tr>
       <tr>
         <td><code>$grey-darker</code></td>
         <td>
-          <span class="color" style="background-color: #363636;"></span>
-          #363636
-        </td>
-      </tr>
+          <span class="color" style="background:  hsl(0, 0%, 21%);"></span>
+           hsl(0, 0%, 21%)
+          </td>
+        </tr>
       <tr>
         <td><code>$grey-dark</code></td>
         <td>
-          <span class="color" style="background-color: #4a4a4a;"></span>
-          #4a4a4a
+          <span class="color" style="background: hsl(0, 0%, 29%);"></span>
+          hsl(0, 0%, 29%)
         </td>
       </tr>
       <tr>
         <td><code>$grey</code></td>
         <td>
-          <span class="color" style="background-color: #7a7a7a;"></span>
-          #7a7a7a
+          <span class="color" style="background: hsl(0, 0%, 48%);"></span>
+          hsl(0, 0%, 48%)
         </td>
       </tr>
       <tr>
         <td><code>$grey-light</code></td>
         <td>
-          <span class="color" style="background-color: #b5b5b5;"></span>
-          #b5b5b5
+          <span class="color" style="background: hsl(0, 0%, 71%);"></span>
+          hsl(0, 0%, 71%)
         </td>
       </tr>
       <tr>
         <td><code>$grey-lighter</code></td>
         <td>
-          <span class="color" style="background-color: #dbdbdb;"></span>
-          #dbdbdb
+          <span class="color" style="background: hsl(0, 0%, 86%);"></span>
+          hsl(0, 0%, 86%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$white-ter</code></td>
+        <td>
+          <span class="color" style="background: hsl(0, 0%, 96%);"></span>
+          hsl(0, 0%, 96%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$white-bis</code></td>
+        <td>
+          <span class="color" style="background: hsl(0, 0%, 98%);"></span>
+          hsl(0, 0%, 98%)
         </td>
       </tr>
       <tr>
         <td><code>$white</code></td>
         <td>
-          <span class="color" style="background-color: #fff;"></span>
-          #fff
-        </td>
-      </tr>
-      <tr>
-        <td><code>$blue</code></td>
-        <td>
-          <span class="color" style="background-color: #3273dc;"></span>
-          #3273dc
-        </td>
-      </tr>
-      <tr>
-        <td><code>$green</code></td>
-        <td>
-          <span class="color" style="background-color: #23d160;"></span>
-          #23d160
+          <span class="color" style="background: hsl(0, 0%, 100%);"></span>
+          hsl(0, 0%, 100%)
         </td>
       </tr>
       <tr>
         <td><code>$orange</code></td>
         <td>
-          <span class="color" style="background-color: #ff470f;"></span>
-          #ff470f
-        </td>
-      </tr>
-      <tr>
-        <td><code>$purple</code></td>
-        <td>
-          <span class="color" style="background-color: #b86bff;"></span>
-          #b86bff
-        </td>
-      </tr>
-      <tr>
-        <td><code>$red</code></td>
-        <td>
-          <span class="color" style="background-color: #ff3860;"></span>
-          #ff3860
-        </td>
-      </tr>
-      <tr>
-        <td><code>$turquoise</code></td>
-        <td>
-          <span class="color" style="background-color: #00d1b2;"></span>
-          #00d1b2
+          <span class="color" style="background: hsl(14,  100%, 53%);"></span>
+          hsl(14,  100%, 53%)
         </td>
       </tr>
       <tr>
         <td><code>$yellow</code></td>
         <td>
-          <span class="color" style="background-color: #ffdd57;"></span>
-          #ffdd57
+          <span class="color" style="background: hsl(48,  100%, 67%);"></span>
+          hsl(48,  100%, 67%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$green</code></td>
+        <td>
+          <span class="color" style="background: hsl(141, 71%,  48%);"></span>
+          hsl(141, 71%,  48%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$turquoise</code></td>
+        <td>
+          <span class="color" style="background: hsl(171, 100%, 41%);"></span>
+          hsl(171, 100%, 41%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$blue</code></td>
+        <td>
+          <span class="color" style="background: hsl(217, 71%,  53%);"></span>
+          hsl(217, 71%,  53%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$purple</code></td>
+        <td>
+          <span class="color" style="background: hsl(271, 100%, 71%);"></span>
+          hsl(271, 100%, 71%)
+        </td>
+      </tr>
+      <tr>
+        <td><code>$red</code></td>
+        <td>
+          <span class="color" style="background: hsl(348, 100%, 61%);"></span>
+          hsl(348, 100%, 61%)
         </td>
       </tr>