From 223637ff49d755b5fcffbdc05ec19e849c1d6cf4 Mon Sep 17 00:00:00 2001
From: Anxhelo Lushka <anxhelo1995@gmail.com>
Date: Mon, 4 May 2020 22:46:07 +0200
Subject: [PATCH] Added colors to Design page

---
 _includes/components/alerts.html    |    4 +-
 _includes/components/badges.html    |    2 +-
 _includes/components/buttons.html   |    2 +-
 _includes/components/cards.html     |    2 +-
 _includes/components/footer.html    |    2 +-
 _includes/components/forms.html     |    2 +-
 _includes/components/jumbotron.html |    2 +-
 _includes/components/navbar.html    |    2 +-
 _includes/components/paginate.html  |    2 +-
 _includes/components/scrollspy.html |    2 +-
 _includes/components/tables.html    |    2 +-
 _includes/design/assets.html        |   88 ---
 _includes/design/colors.html        | 1143 +++++++++++++++++++++++++--
 _includes/design/grid.html          |    2 +-
 _includes/design/icons.html         |   23 -
 _includes/design/typography.html    |    2 +-
 _layouts/brand.html                 |    2 +-
 _layouts/components.html            |   30 +-
 _layouts/design.html                |    4 +-
 _layouts/writing.html               |    2 +-
 assets/styles/components.scss       |   47 +-
 assets/styles/layout.scss           |   87 ++
 assets/styles/vars.scss             |    1 +
 design.md                           |   24 -
 24 files changed, 1241 insertions(+), 238 deletions(-)
 delete mode 100644 _includes/design/assets.html
 delete mode 100644 _includes/design/icons.html

diff --git a/_includes/components/alerts.html b/_includes/components/alerts.html
index c48eb06..154e39b 100644
--- a/_includes/components/alerts.html
+++ b/_includes/components/alerts.html
@@ -1,5 +1,5 @@
-<div class="page-header mb-4">
-    <h2 id="alerts">Alerts</h2>
+<div id="alerts" class="col page-header mb-4">
+    <h2>Alerts</h2>
     <p class="text-muted">Some Description about alerts.</p>
 </div>
 <div class="row p-5 bg-light">
diff --git a/_includes/components/badges.html b/_includes/components/badges.html
index f1c9bf1..e041f5f 100644
--- a/_includes/components/badges.html
+++ b/_includes/components/badges.html
@@ -1,4 +1,4 @@
-<div class="page-header mb-4">
+<div class="col page-header mb-4">
     <h2 id="badges">Badges</h2>
     <!--p class="text-muted">Some Description about badges.</p-->
 </div>
diff --git a/_includes/components/buttons.html b/_includes/components/buttons.html
index 98c4b40..d8a514a 100644
--- a/_includes/components/buttons.html
+++ b/_includes/components/buttons.html
@@ -1,4 +1,4 @@
-<div id="buttons" class="mb-4">
+<div id="buttons" class="col mb-4">
     <h2>Buttons</h2>
     <!--p class="text-muted">Some Description about buttons.</p-->
 </div>
diff --git a/_includes/components/cards.html b/_includes/components/cards.html
index 512d07e..f36d169 100644
--- a/_includes/components/cards.html
+++ b/_includes/components/cards.html
@@ -1,4 +1,4 @@
-<div class="mb-4" id="cards">
+<div class="col mb-4" id="cards">
     <h2>Cards</h2>
     <div class="row bg-light p-md-5 p-sm-3 pt-5 pb-5">
         <div class="col-md-6 col-sm-12 col-xs-12">
diff --git a/_includes/components/footer.html b/_includes/components/footer.html
index b8e496c..d628be3 100644
--- a/_includes/components/footer.html
+++ b/_includes/components/footer.html
@@ -1,4 +1,4 @@
-<div id="footer" class="page-header mb-4">
+<div id="footer" class="col page-header mb-4">
     <h3>Footer</h3>
 </div>
 
diff --git a/_includes/components/forms.html b/_includes/components/forms.html
index df22c0c..fddb92b 100644
--- a/_includes/components/forms.html
+++ b/_includes/components/forms.html
@@ -1,4 +1,4 @@
-<div class="page-header mb-4" id="forms">
+<div class="col page-header mb-4" id="forms">
     <h2>Forms</h2>
     <!--p class="text-muted">Some Description about Forms.</p-->
 </div>
diff --git a/_includes/components/jumbotron.html b/_includes/components/jumbotron.html
index e24bcb5..21feb06 100644
--- a/_includes/components/jumbotron.html
+++ b/_includes/components/jumbotron.html
@@ -1,4 +1,4 @@
-<div class="mb-4" id="jumbotron">
+<div class="col mb-4" id="jumbotron">
 	<h2  >Jumbotron</h2>
 	<div class="bg-light p-md-5 p-sm-3">
 		<div class="jumbotron bg-primary text-white">
diff --git a/_includes/components/navbar.html b/_includes/components/navbar.html
index f33db2d..c82b298 100644
--- a/_includes/components/navbar.html
+++ b/_includes/components/navbar.html
@@ -1,4 +1,4 @@
-<div id="header" class="mb-4">
+<div id="header" class="col mb-4">
     <h2>Header</h2>
     <!--p class="text-muted">Some Description about buttons.</p-->
 </div>
diff --git a/_includes/components/paginate.html b/_includes/components/paginate.html
index 21cc4d9..3fe69b6 100644
--- a/_includes/components/paginate.html
+++ b/_includes/components/paginate.html
@@ -1,4 +1,4 @@
-<div class="page-header mb-4 " id="pagination">
+<div class="col page-header mb-4 " id="pagination">
     <h2>Pagination</h2>
     <!--p class="text-muted">Some Description about pagination.</p-->
 </div>
diff --git a/_includes/components/scrollspy.html b/_includes/components/scrollspy.html
index cdb8f59..4f2eb3f 100644
--- a/_includes/components/scrollspy.html
+++ b/_includes/components/scrollspy.html
@@ -1,4 +1,4 @@
-<div class="page-header mb-4" id="scrollspy">
+<div class="col page-header mb-4" id="scrollspy">
     <h3>Scrollspy</h3>
     <!--p class="text-muted">Some Description about scrollspy.</p-->
 </div>
diff --git a/_includes/components/tables.html b/_includes/components/tables.html
index 14c123f..855681d 100644
--- a/_includes/components/tables.html
+++ b/_includes/components/tables.html
@@ -1,4 +1,4 @@
-<div class="page-header mb-4" id="tables">
+<div class="col page-header mb-4" id="tables">
     <h2>Tables</h2>
 </div>
     <div class="row bg-light p-5">
diff --git a/_includes/design/assets.html b/_includes/design/assets.html
deleted file mode 100644
index 77c7434..0000000
--- a/_includes/design/assets.html
+++ /dev/null
@@ -1,88 +0,0 @@
-<div id="assets" class="page-header mb-4 mt-5">
-    <h2>Identity Assets</h2>
-    <p class="text-muted">The I2P brand assets are included here. Use them responsibly.</p>
-</div>
-<div class="row">
-    <div class="col-xs-6 col-sm-3">
-        <div class="image border p-5">
-            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_color.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">Default</span>
-            <span class="text-right color-primary rb-isBold" style="float: right;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_1.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-        </p>
-
-    </div>
-
-    <div class="col-xs-6 col-sm-3">
-        <div class="image border p-5 bg-dark">
-            <img src="https://raw.githubusercontent.com/uracreative/works/master/I2P/PNG/horizontal_white.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">White</span>
-            <span class="text-right color-primary rb-isBold" style="float: right;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_3.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-        </p>
-    </div>
-</div>
-
-
-    <div class="row pt-3">
-    	    <div class="col-md-2 col-sm-2">
-        <div class="image border p-5">
-            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_color.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">Default</span>
-            <div class="row">
-            <span class="text-right color-primary rb-isBold" style="float: left;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_5.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-            </div>
-        </p>
-    </div>
-    
-        <div class="col-md-2 col-sm-2">
-        <div class="image border p-5 bg-dark">
-            <img src="https://github.com/uracreative/works/raw/master/I2P/PNG/vertical_white.png" class="rb-contain">
-        </div>
-        <p class="text-black pt-3 align-horizontally flex-space-between">
-            <span class="text-left color-gray-2 rb-isBold">White</span>
-            <div class="row">
-            <span class="text-right color-primary rb-isBold" style="float: left;">
-              <a target="_blank"
-                 href="https://demo.identihub.co/assets/I2P_ICONS_7.svg"
-                 class="button btn btn-sm btn-pill btn-outline-medium">Download SVG</a>
-            </span>
-            </div>
-        </p>
-    </div>
-    </div>
-
-
-<div class="row mt-5">
-    <div class="col-md-6">
-        <div class="bg-box p-5 mb-3">
-            <h6>I2P repo</h6>
-            <p class="m-0">Download SVG and PNG files</p>
-            <a class="btn btn-lg btn-link p-0" title="I2P Repo"
-               href="https://github.com/uracreative/works/tree/master/I2P" target="_blank">Visit Repo</a></div>
-    </div>
-    <div class="col-md-6">
-        <div class="bg-box p-5 text-left">
-            <h6>Styleguide Mirror on Identihub</h6>
-            <p class="m-0">Identihub Project</p>
-            <a class="btn btn-lg btn-link p-0" href="https://demo.identihub.co/i2p"
-               target="_blank">Visit Project Page</a>
-        </div>
-    </div>
-</div>
diff --git a/_includes/design/colors.html b/_includes/design/colors.html
index d26d202..bb1f476 100644
--- a/_includes/design/colors.html
+++ b/_includes/design/colors.html
@@ -1,67 +1,1096 @@
-<div id="colors" class="page-header mb-4">
+<div id="colors" class="col page-header mb-4">
   <h2>Colors</h2>
-  <p class="text-muted">The main I2P color is Blue. Use Green as a secondary option and Yellow as accent color.</p>
+  <p class="text-muted">The main I2P color is teal. Use Green as a secondary option and Yellow as accent color.</p>
 </div>
 
-<div class="row">
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-primary text-white small">#4661A9</div>
-    <h6 class="pt2 text-left">Primary Color</h6>
+<div class="color-palette row col-md-12 pt-3 p-0">
+  <div class="green col col-md-6 col-xs-12 mb-4">
+    <h5 class="pb-3">Indigo Extended</h5>
+    <div class="distributed palette">
+      <div class="colors">
+        <div class="color-overview background-indigo-100 p-2">
+          <span class="variable">$indigo-100</span>
+          <span class="hex f-small">#ECF3FF</span>
+        </div>
+        <div class="color-details border-indigo-100 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-100 border-indigo-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-200 p-2">
+          <span class="variable">$indigo-200</span>
+          <span class="hex f-small">#C6D9FE</span>
+        </div>
+        <div class="color-details border-indigo-200 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-200 border-indigo-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-300 p-2">
+          <span class="variable">$indigo-300</span>
+          <span class="hex f-small">#A4BEFB</span>
+        </div>
+        <div class="color-details border-indigo-300 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-300 border-indigo-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-400 p-2">
+          <span class="variable">$indigo-400</span>
+          <span class="hex f-small">#7E9DF4</span>
+        </div>
+        <div class="color-details border-indigo-400 p-3">
+          <div class="color-details--section">
+            <div class="bold mb-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold mb-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-400 border-indigo-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-priority color-overview background-indigo-500 p-2">
+          <span class="variable inverted">$indigo-500</span>
+          <span class="hex f-small inverted">#6280E6</span>
+        </div>
+        <div class="color-details border-indigo-500 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-500 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-500 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-500 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-500 border-indigo-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-600 p-2">
+          <span class="variable inverted">$indigo-600</span>
+          <span class="hex f-small inverted">#546BD2</span>
+        </div>
+        <div class="color-details border-indigo-600 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-600 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-600 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-indigo-600 border-indigo-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-700 p-2">
+          <span class="variable inverted">$indigo-700</span>
+          <span class="hex f-small inverted">#4456B7</span>
+        </div>
+        <div class="color-details border-indigo-700 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-700 border-indigo-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-800 p-2">
+          <span class="variable inverted">$indigo-800</span>
+          <span class="hex f-small inverted">#3C468A</span>
+        </div>
+        <div class="color-details border-indigo-800 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-800 border-indigo-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-indigo-900 p-2">
+          <span class="variable inverted">$indigo-900</span>
+          <span class="hex f-small inverted">#363A68</span>
+        </div>
+        <div class="color-details border-indigo-900 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-indigo-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-indigo-900 border-indigo-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-indigo-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-secondary text-white small">#60AB60</div>
-    <h6 class="pt2 text-left">Secondary color</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-warning text-white small">#FFC434</div>
-    <h6 class="pt2 text-left">Warning</h6>
+
+  <div class="teal col col-md-6 col-xs-12 mb-4">
+    <h5 class="pb-3">Teal Extended</h5>
+    <div class="distributed palette">
+      <div class="colors">
+        <div class="color-overview background-teal-100 p-2">
+          <span class="variable">$teal-100</span>
+          <span class="hex f-small">#E5FFFE</span>
+        </div>
+        <div class="color-details border-teal-100 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-100 border-teal-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-100 border-teal-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-100 border-teal-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-100 border-teal-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-200 p-2">
+          <span class="variable">$teal-200</span>
+          <span class="hex f-small">#A6F8F8</span>
+        </div>
+        <div class="color-details border-teal-200 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-200 border-teal-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-200 border-teal-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-200 border-teal-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-200 border-teal-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-300 p-2">
+          <span class="variable">$teal-300</span>
+          <span class="hex f-small">#7EE4E8</span>
+        </div>
+        <div class="color-details border-teal-300 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-300 border-teal-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-300 border-teal-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-300 border-teal-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-300 border-teal-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-400 p-2">
+          <span class="variable contrast-teal">$teal-400</span>
+          <span class="hex f-small contrast-teal">#50CEDA</span>
+        </div>
+        <div class="color-details border-teal-400 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-400 border-teal-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-400 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-400 border-teal-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-400 border-teal-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-400 border-teal-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-400 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-priority color-overview background-teal-500 p-2">
+          <span class="variable">$teal-500</span>
+          <span class="hex f-small">#38ADC2</span>
+        </div>
+        <div class="color-details border-teal-500 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-500 border-teal-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-500 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-500 border-teal-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-500 border-teal-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-500 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-teal-500 border-teal-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-600 p-2">
+          <span class="variable inverted">$teal-600</span>
+          <span class="hex f-small inverted">#3190A8</span>
+        </div>
+        <div class="color-details border-teal-600 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-600 border-teal-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-600 border-teal-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-600 border-teal-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-600 border-teal-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-700 p-2">
+          <span class="variable inverted">$teal-700</span>
+          <span class="hex f-small inverted">#2B758D</span>
+        </div>
+        <div class="color-details border-teal-700 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-700 border-teal-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-700 border-teal-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-700 border-teal-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-700 border-teal-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-800 p-2">
+          <span class="variable inverted">$teal-800</span>
+          <span class="hex f-small inverted">#245C70</span>
+        </div>
+        <div class="color-details border-teal-800 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-800 border-teal-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-800 border-teal-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-800 border-teal-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-800 border-teal-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-teal-900 p-2">
+          <span class="variable inverted">$teal-900</span>
+          <span class="hex f-small inverted">#1E4C5E</span>
+        </div>
+        <div class="color-details border-teal-900 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-teal-900 border-teal-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-900 border-teal-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-teal-900 border-teal-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-teal-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-teal-900 border-teal-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-teal-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-danger text-white small">#E15647</div>
-    <h6 class="pt2 text-left">Danger</h6>
+
+  <div class="orange col col-xs-12 mb-4">
+    <h5 class="pb-3">Orange Extended</h5>
+    <div class="distributed palette">
+      <div class="colors">
+        <div class="color-overview background-orange-100 p-2">
+          <span class="variable">$orange-100</span>
+          <span class="hex f-small">#FFFAF0</span>
+        </div>
+        <div class="color-details border-orange-100 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-100 border-orange-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-100 border-orange-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-100 border-orange-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-100 border-orange-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-200 p-2">
+          <span class="variable">$orange-200</span>
+          <span class="hex f-small">#FEEBC8</span>
+        </div>
+        <div class="color-details border-orange-200 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-200 border-orange-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-200 border-orange-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-200 border-orange-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-200 border-orange-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-300 p-2">
+          <span class="variable">$orange-300</span>
+          <span class="hex f-small">#FBD38D</span>
+        </div>
+        <div class="color-details border-orange-300 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-300 border-orange-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-300 border-orange-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-300 border-orange-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-300 border-orange-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-400 p-2">
+          <span class="variable">$orange-400</span>
+          <span class="hex f-small">#F6AD55</span>
+        </div>
+        <div class="color-details border-orange-400 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-400 border-orange-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-400 border-orange-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-400 border-orange-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-400 border-orange-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-priority color-overview background-orange-500 p-2">
+          <span class="variable">$orange-500</span>
+          <span class="hex f-small">#ED8936</span>
+        </div>
+        <div class="color-details border-orange-500 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-500 border-orange-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-500 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-500 border-orange-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-500 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-500 border-orange-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-500 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-500 border-orange-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-500 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-600 p-2">
+          <span class="variable inverted">$orange-600</span>
+          <span class="hex f-small inverted">#DD6B20</span>
+        </div>
+        <div class="color-details border-orange-600 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-600 border-orange-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-600 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-600 border-orange-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-600 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-600 border-orange-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-600 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-600 border-orange-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-600 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-700 p-2">
+          <span class="variable inverted">$orange-700</span>
+          <span class="hex f-small inverted">#C05621</span>
+        </div>
+        <div class="color-details border-orange-700 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-700 border-orange-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-orange-700 border-orange-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-700 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-700 border-orange-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-700 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-orange-700 border-orange-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-800 p-2">
+          <span class="variable inverted">$orange-800</span>
+          <span class="hex f-small inverted">#9C4221</span>
+        </div>
+        <div class="color-details border-orange-800 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-800 border-orange-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-orange-800 border-orange-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-800 border-orange-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-orange-800 border-orange-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-orange-900 p-2">
+          <span class="variable inverted">$orange-900</span>
+          <span class="hex f-small inverted">#7B341E</span>
+        </div>
+        <div class="color-details border-orange-900 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-orange-900 border-orange-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-orange-900 border-orange-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-orange-900 border-orange-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-orange-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-orange-900 border-orange-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-orange-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 
-
-<div class="row">
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-0 text-black small">#f8f9fa</div>
-    <h6 class="pt2 text-left">Gray 0</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-1 text-black small">#f1f3f5</div>
-    <h6 class="pt2 text-left">Gray 1</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-2 text-black small">#e9ecef</div>
-    <h6 class="pt2 text-left">Gray 2</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-3 text-black small">#dee2e6</div>
-    <h6 class="pt2 text-left">Gray 3</h6>
+<div class="color-palette row col-md-12 p-0">
+  <div class="night col col-xs-12 mb-3">
+    <h5 class="pb-3">Dark</h5>
+    <div class="distributed palette">
+      <div class="colors">
+        <div class="color-overview background-night-50 p-2">
+          <span class="variable">$night-50</span>
+          <span class="hex f-small">#EBF3FA</span>
+        </div>
+        <div class="color-details border-night-50 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-50 border-night-50 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-50 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-50 border-night-50 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-50 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-50 border-night-50 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-50 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-50 border-night-50 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-50 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-100 p-2">
+          <span class="variable">$night-100</span>
+          <span class="hex f-small">#D1DAE6</span>
+        </div>
+        <div class="color-details border-night-100 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-100 border-night-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-100 border-night-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-100 border-night-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-100 border-night-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-200 p-2">
+          <span class="variable">$night-200</span>
+          <span class="hex f-small">#B1BFCF</span>
+        </div>
+        <div class="color-details border-night-200 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-200 border-night-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-200 border-night-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-200 border-night-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-200 border-night-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-300 p-2">
+          <span class="variable">$night-300</span>
+          <span class="hex f-small">#8A9CB3</span>
+        </div>
+        <div class="color-details border-night-300 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-300 border-night-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-300 border-night-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-300 border-night-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-300 border-night-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-400 p-2">
+          <span class="variable contrast-night">$night-400</span>
+          <span class="hex f-small contrast-night">#657D99</span>
+        </div>
+        <div class="color-details border-night-400 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-400 border-night-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-400 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-400 border-night-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-400 border-night-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-400 border-night-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-400 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-priority color-overview background-night-500 p-2">
+          <span class="variable inverted">$night-500</span>
+          <span class="hex f-small inverted">#435B77</span>
+        </div>
+        <div class="color-details border-night-500 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-500 border-night-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-500 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-500 border-night-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-500 border-night-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-500 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-night-500 border-night-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-600 p-2">
+          <span class="variable inverted">$night-600</span>
+          <span class="hex f-small inverted">#374B61</span>
+        </div>
+        <div class="color-details border-night-600 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-600 border-night-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-600 border-night-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-600 border-night-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-600 border-night-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-700 p-2">
+          <span class="variable inverted">$night-700</span>
+          <span class="hex f-small inverted">#2E3D4F</span>
+        </div>
+        <div class="color-details border-night-700 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-700 border-night-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-700 border-night-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-700 border-night-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-700 border-night-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-800 p-2">
+          <span class="variable inverted">$night-800</span>
+          <span class="hex f-small inverted">#212D3B</span>
+        </div>
+        <div class="color-details border-night-800 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-800 border-night-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-800 border-night-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-800 border-night-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-800 border-night-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-900 p-2">
+          <span class="variable inverted">$night-900</span>
+          <span class="hex f-small inverted">#15212D</span>
+        </div>
+        <div class="color-details border-night-900 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-900 border-night-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-900 border-night-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-900 border-night-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-900 border-night-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-night-950 p-2">
+          <span class="variable inverted">$night-950</span>
+          <span class="hex f-small inverted">#0E171F</span>
+        </div>
+        <div class="color-details border-night-950 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-night-950 border-night-950 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-950 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-950 border-night-950 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-950 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-night-950 border-night-950 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-night-950 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-night-950 border-night-950 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-night-950 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p class="text-muted pt-3">The dark palette is primarily used for interfaces that are adapting a night theme. Shades of it can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.</p>
   </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-4 text-black small">#ced4da</div>
-    <h6 class="pt2 text-left">Gray 4</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-5 text-black small">#adb5bd</div>
-    <h6 class="pt2 text-left">Gray 5</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-6 text-white small">#868e96</div>
-    <h6 class="pt2 text-left">Gray 6</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-1 pb-1 mt-3 mb-2 background-gray-7 text-white small">#495057</div>
-    <h6 class="pt2 text-left">Gray 7</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-8 text-white small">#343a40</div>
-    <h6 class="pt2 text-left">Gray 8</h6>
-  </div>
-  <div class="col-xs-12 col-sm-2 col-md-2">
-    <div class="rounded pt-5 pl-2 pb-2 mt-3 mb-2 background-gray-9 text-white small">#212529</div>
-    <h6 class="pt2 text-left">Gray 9</h6>
+
+  <div class="night col col-xs-12 mb-3">
+    <h5 class="pb-3">Gray</h5>
+    <div class="distributed palette">
+      <div class="colors">
+        <div class="color-overview background-gray-50 p-2">
+          <span class="variable">$gray-50</span>
+          <span class="hex f-small">#FAFAFA</span>
+        </div>
+        <div class="color-details border-gray-50 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-50 border-gray-50 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-50 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-50 border-gray-50 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-50 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-50 border-gray-50 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-50 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-50 border-gray-50 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-50 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-100 p-2">
+          <span class="variable">$gray-100</span>
+          <span class="hex f-small">#F2F2F2</span>
+        </div>
+        <div class="color-details border-gray-100 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-100 border-gray-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-100 border-gray-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-100 border-gray-100 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-100 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-100 border-gray-100 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-100 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-200 p-2">
+          <span class="variable">$gray-200</span>
+          <span class="hex f-small">#DFDFDF</span>
+        </div>
+        <div class="color-details border-gray-200 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-200 border-gray-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-200 border-gray-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-200 border-gray-200 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-200 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-200 border-gray-200 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-200 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-300 p-2">
+          <span class="variable">$gray-300</span>
+          <span class="hex f-small">#CCCCCC</span>
+        </div>
+        <div class="color-details border-gray-300 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-300 border-gray-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-300 border-gray-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-300 border-gray-300 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-300 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-300 border-gray-300 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-300 pl-1 pr-1 fail">Fail</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-400 p-2">
+          <span class="variable">$gray-400</span>
+          <span class="hex f-small">#BABABA</span>
+        </div>
+        <div class="color-details border-gray-400 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-400 border-gray-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-400 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-400 border-gray-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-400 pl-1 pr-1 fail">Fail</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-400 border-gray-400 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-400 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-400 border-gray-400 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-400 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-priority color-overview background-gray-500 p-2">
+          <span class="variable">$gray-500</span>
+          <span class="hex f-small">#A7A7A7</span>
+        </div>
+        <div class="color-details border-gray-500 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-500 border-gray-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-500 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-500 border-gray-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-500 border-gray-500 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-500 pl-1 pr-1 pass">Pass</div>
+            <div class="inverted d-inline-block background-gray-500 border-gray-500 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-500 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-600 p-2">
+          <span class="variable contrast-gray">$gray-600</span>
+          <span class="hex f-small contrast-gray">#919191</span>
+        </div>
+        <div class="color-details border-gray-600 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-600 border-gray-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-600 border-gray-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-600 border-gray-600 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-600 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-600 border-gray-600 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-600 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-700 p-2">
+          <span class="variable inverted">$gray-700</span>
+          <span class="hex f-small inverted">#707070</span>
+        </div>
+        <div class="color-details border-gray-700 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-700 border-gray-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-700 border-gray-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-700 border-gray-700 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-700 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-700 border-gray-700 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-700 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-800 p-2">
+          <span class="variable inverted">$gray-800</span>
+          <span class="hex f-small inverted">#4F4F4F</span>
+        </div>
+        <div class="color-details border-gray-800 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-800 border-gray-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-800 border-gray-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-800 border-gray-800 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-800 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-800 border-gray-800 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-800 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+      <div class="colors">
+        <div class="color-overview background-gray-900 p-2">
+          <span class="variable inverted">$gray-900</span>
+          <span class="hex f-small inverted">#2E2E2E</span>
+        </div>
+        <div class="color-details border-gray-900 p-3">
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Normal</div>
+            <div class="d-inline-block background-gray-900 border-gray-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-900 border-gray-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+          <div class="color-details--section">
+            <div class="bold m-b-2">WCAG Large</div>
+            <div class="d-inline-block background-gray-900 border-gray-900 pl-1 pr-1">AA</div>
+            <div class="d-inline-block border-gray-900 pl-1 pr-1 fail">Fail</div>
+            <div class="inverted d-inline-block background-gray-900 border-gray-900 pl-1 pr-1 m-l-3">AA</div>
+            <div class="d-inline-block border-gray-900 pl-1 pr-1 pass">Pass</div>
+          </div>
+        </div>
+      </div>
+    </div>
+             <p class="text-muted pt-3">The neutral palette is primarily used within components to help differentiate hierarchy. Shades of gray can be used as backgrounds, borders, and shadows to emphasise certain areas or set them apart.</p>
   </div>
-</div>
+  </div>
\ No newline at end of file
diff --git a/_includes/design/grid.html b/_includes/design/grid.html
index 6091da2..f0a9cf4 100644
--- a/_includes/design/grid.html
+++ b/_includes/design/grid.html
@@ -1,4 +1,4 @@
-<div id="grid" class="page-header mb-4 mt-5">
+<div id="grid" class="col page-header mb-4 mt-5">
     <h2>Grid</h2>
     <p class="text-muted">Our main used grid compositions are outlined here. Use them to generate one column or various columns layouts.</p>
 </div>
diff --git a/_includes/design/icons.html b/_includes/design/icons.html
deleted file mode 100644
index 84f2148..0000000
--- a/_includes/design/icons.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<div class="mt-5" id="icons">
-    <h2>Icons</h2>
-        <span>I2P uses the following <a href="../assets/fonts/i2p-iconfont.zip">icons</a> in its interface.</span>
-    <div class="mt-3">
-        <div class="mt-3">
-            <div class="row">
-                {% for icons_hash in page.icons %}
-                {% for icon in icons_hash %}
-                <div class="col-1 col-sm-1 text-center pt-1 pb-1">
-                    <div class="">
-                        <span class="{{ icon[1] }} text-muted" style="font-size:2rem;"></span>
-                    </div>
-                    <div class="mb-1 text-center">
-                        <span style="font-size: 0.7rem">{{icon[0]}}</span>
-                    </div>
-                </div>
-                {% endfor %}
-                {% endfor %}
-
-            </div>
-        </div>
-    </div>
-</div>
diff --git a/_includes/design/typography.html b/_includes/design/typography.html
index 2f48c9f..1cc03b5 100644
--- a/_includes/design/typography.html
+++ b/_includes/design/typography.html
@@ -1,4 +1,4 @@
-<div id="typography" class="page-header mb-4 mt-5">
+<div id="typography" class="col page-header mb-4 mt-5">
     <h2>Typography</h2>
     <p class="text-muted">I2P's main fonts are Source Sans Pro and Source Code Pro, made by Adobe.</p>
 </div>
diff --git a/_layouts/brand.html b/_layouts/brand.html
index 7e374b4..703f432 100644
--- a/_layouts/brand.html
+++ b/_layouts/brand.html
@@ -14,7 +14,7 @@
           </div>
         </div>
       </div>
-        <div class="col-lg-9 pt-5 pl-sm-5">
+        <div class="col-lg-9 py-5 pl-sm-5">
           {% include brand/colors.html %}
           {% include brand/typography.html %}
           {% include brand/logo.html %}
diff --git a/_layouts/components.html b/_layouts/components.html
index da5a9b9..28d0336 100644
--- a/_layouts/components.html
+++ b/_layouts/components.html
@@ -4,48 +4,26 @@
 <body>
 {% include navbar.html %}
 <div class="row">
-    <div class="col-md-3 hidden-sm p-0">
+    <div class="col-md-3 col-sm-5 hidden-sm p-0">
         <div class="row" style="height: 100%">
-            <div class="col-md-6 col-sm-16 col-xs-12 p-0">
+            <div class="col-md-6 col-sm-6 col-xs-6 p-0">
                 {% include navbar_side.html sidebarClassName="rb-sidebar__1" %}
             </div>
-            <div class="col-md-6 col-sm-12 col-xs-3 p-0">
+            <div class="col-md-6 col-sm-6 col-xs-6 p-0">
                 {% include sidebar.html sidebarClassName="rb-sidebar__2" %}
             </div>
         </div>
     </div>
-    <div class="col-lg-9 pt-0 pl-sm-5">
-        <!--{{ content }}-->
-			<div class="component-wrapper my-5" id="">
+    <div class="col-lg-9 py-5 pl-sm-5">
         {% include components/alerts.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/badges.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/buttons.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/cards.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/footer.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/forms.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/navbar.html %}
-			</div>
-			<!--div class="component-wrapper my-5" id="">
-        {% include components/jumbotron.html %}
-			</div-->
-			<div class="component-wrapper my-5" id="">
         {% include components/paginate.html %}
-			</div>
-			<div class="component-wrapper my-5" id="">
         {% include components/tables.html %}
-			</div>
     </div>
 </div>
 {% include scripts.html %}
diff --git a/_layouts/design.html b/_layouts/design.html
index 2be7789..fe1f54a 100644
--- a/_layouts/design.html
+++ b/_layouts/design.html
@@ -14,13 +14,11 @@
           </div>
         </div>
       </div>
-        <div class="col-lg-9 pt-3 pl-sm-5">
+        <div class="col-lg-9 py-5 pb-5 pl-sm-5">
           {{ content }}
           {% include design/colors.html %}
           {% include design/grid.html %}
           {% include design/typography.html %}
-          {% include design/icons.html %}
-          {% include design/assets.html %}
           {% include scripts.html %}
       </div>
     </div>
diff --git a/_layouts/writing.html b/_layouts/writing.html
index f6bec28..754d627 100644
--- a/_layouts/writing.html
+++ b/_layouts/writing.html
@@ -14,7 +14,7 @@
             </div>
         </div>
     </div>
-    <div class="col-md-7 col-xs-12 col-sm-12 pl-sm-5">
+    <div class="col-md-7 py-5 pl-sm-5">
         {% include writing/personality.html %}
         {% include writing/language.html %}
     </div>
diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index cc1fb60..877ac6b 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -259,6 +259,50 @@
   background-color: $orange-900;
 }
 
+.background-night-50 {
+  background-color: $night-50;
+}
+
+.background-night-100 {
+  background-color: $night-100;
+}
+
+.background-night-200 {
+  background-color: $night-200;
+}
+
+.background-night-300 {
+  background-color: $night-300;
+}
+
+.background-night-400 {
+  background-color: $night-400;
+}
+
+.background-night-500 {
+  background-color: $night-500;
+}
+
+.background-night-600 {
+  background-color: $night-600;
+}
+
+.background-night-700 {
+  background-color: $night-700;
+}
+
+.background-night-800 {
+  background-color: $night-800;
+}
+
+.background-night-900 {
+  background-color: $night-900;
+}
+
+.background-night-950 {
+  background-color: $night-950;
+}
+
 // Text colors
 
 .color-primary {
@@ -548,6 +592,7 @@ img {
 .theme-toggle {
   display: inline-flex;
   position: absolute;
+  cursor: pointer;
   top: 36px;
   right: 36px;
 }
@@ -561,7 +606,7 @@ img {
 }
 
 .dropdown-menu {
-  background-color: var(--box-bg);
+  background-color: var(--box) !important;
 }
 
 .dropdown-item {
diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss
index ea3a2fe..266ffdc 100644
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@@ -198,4 +198,91 @@
   object-fit: contain;
   overflow: hidden;
   text-align: center;
+}
+
+// Colors
+
+.colors {
+  &:first-child {
+    .color-overview {
+      border-top-right-radius: $border-radius;
+      border-top-left-radius: $border-radius;
+    }
+  }
+
+  &:last-child {
+    .color-overview {
+      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: $border-radius;
+    }
+
+    &:hover {
+      .color-overview {
+        border-bottom-left-radius: 0;
+      }
+    }
+  }
+
+  .color-overview {
+    transition: .1s linear;
+    display: flex;
+
+    .variable {
+      flex-grow: 2;
+      color: $gray-900;
+    }
+
+    .hex {
+      transition: .15s linear;
+      opacity: 0;
+      color: $gray-900;
+    }
+  }
+
+  .color-details {
+    display: none;
+    flex-wrap: wrap;
+
+    .color-details--section {
+      flex-grow: 2;
+      flex-basis: 50%;
+
+      .pass { color: $indigo-700; }
+      .fail { color: $orange-500; }
+    }
+  }
+
+  // color-overview height + color-details height
+  .color-priority {
+    height: 128px;
+  }
+
+  &:hover {
+    .color-overview {
+      margin: 0 -8px 0 0;
+      border-top-right-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+      transition: .15s linear;
+    }
+
+    > .color-details {
+      display: flex;
+    }
+
+  }
+}
+
+.palette {
+  &:hover {
+    .color-priority {
+      height: auto;
+    }
+    .hex {
+      opacity: 1;
+    }
+  }
+}
+
+.inverted {
+  color: $white !important;
 }
\ No newline at end of file
diff --git a/assets/styles/vars.scss b/assets/styles/vars.scss
index 28dc396..b0fc502 100644
--- a/assets/styles/vars.scss
+++ b/assets/styles/vars.scss
@@ -4,6 +4,7 @@ $warning: #FFC434;
 $danger: #E15647;
 $body-font: 'Inter', sans-serif !important;
 $header-font: 'Nunito', sans-serif !important;
+$border-radius: 5px;
 
 //  General
 
diff --git a/design.md b/design.md
index ae065ce..7e03b2f 100644
--- a/design.md
+++ b/design.md
@@ -7,28 +7,4 @@
    - colors: Colors
    - grid: Grid
    - typography: Typography
-   - icons: Icons
-   - assets: Assets
- 
-  icons:
-    - Help: icon-i2p-help
-    - Mail: icon-i2p-mail
-    - Plugin: icon-i2p-plugin
-    - Router: icon-i2p-router
-    - Dashboard: icon-i2p-dashboard
-    - Bandwidth: icon-i2p-bandwidth
-    - Server: icon-i2p-server
-    - Paste: icon-i2p-paste
-    - Bug: icon-i2p-bug
-    - Docs: icon-i2p-docs
-    - Address Book: icon-i2p-address
-    - Wiki: icon-i2p-wiki
-    - Sync: icon-i2p-sync
-    - Power: icon-i2p-power
-    - Directory: icon-i2p-directory
-    - Fingerprint: icon-i2p-fingerprint
-    - Alert: icon-i2p-alert
-    - Valid: icon-i2p-valid
-    - Fast: icon-i2p-fast
-    - Anonymous: icon-i2p-anon
 ---