j1-template 2021.1.28 → 2021.2.2

data/lib/starter_web/pages/public/previewer/md_color_palette.adoc

@@ -1,574 +0,0 @@
----
-title:                                  J1 Colors
-tagline:                                md color palette
-date:                                   2021-01-08 00:00:00 +100
-description: >
-                                        The color palette used by J1 Template is based on
-                                        the definitions of Google's Material Design (MD).
-                                        The color scheme comprises primary and accent colors
-                                        that can be used for illustration or to develop individual
-                                        brand colors of a website, designed to work harmoniously
-                                        with each other.
-
-categories:                             [ Previewer ]
-tags:                                   [ MD, Colors ]
-
-scrollbar:                              false
-flowtext:                               false
-
-permalink:                              /pages/public/previewer/color_palette/
-regenerate:                             false
-
-resources:                              []
-resource_options:
-  - attic:
-      padding_top:                      400
-      padding_bottom:                   50
-      opacity:                          0.5
-      slides:
-        - url:                          /assets/images/modules/attics/markus-spiske4-1920x1280.jpg
-          alt:                          Photo by Markus Spiske on Unsplash
-          badge:
-            type:                       unsplash
-            author:                     Markus Spiske
-            href:                       https://unsplash.com/@markusspiske
----
-
-// Page Initializer
-// =============================================================================
-// Enable the Liquid Preprocessor
-:page-liquid:
-// :scrollbars:
-
-// Set (local) page attributes here
-// -----------------------------------------------------------------------------
-// :page--attr:                         <attr-value>
-
-//  Load Liquid procedures
-// -----------------------------------------------------------------------------
-{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
-
-// Load page attributes
-// -----------------------------------------------------------------------------
-{% include {{load_attributes}} scope="global" %}
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-// Include sub-documents
-// -----------------------------------------------------------------------------
-
-
-// Page content
-// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-
-== J1 Color Palette
-
-The color palette used by J1 Template is based on the definitions of Google's
-*Material Design* (MD). The color scheme comprises primary and accent colors
-that can be used for illustration or to develop individual brand colors of a
-website; designed to work harmoniously with each other.
-
-The color palette starts with primary colors and fills in the spectrum to
-create a complete and usable palette for Desktop and Mobile web sites based on
-Android or iOS. Google suggests using the 500 colors as the primary colors for
-your web and the other colors as accents colors to support the content for
-better reading or orientation.
-
-=== Red and Pink
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #f44336;"> <span class="name light-strong">Red</span> <span class="shade light-strong">500</span> <span class="hex"><a id="F44336" class="mdColorValue md-white" title="Red" href="#void">#f44336</a></span> </li>
-        <li class="color dark" style="background-color: #ffebee;"><span class="shade expanded">50</span><span class="hex"><a id="ffebee" class="mdColorValue" title="Red 50" href="#void">#ffebee</a></span> </li>
-        <li class="color dark" style="background-color: #ffcdd2;"><span class="shade">100</span><span class="hex"><a id="ffcdd2" class="mdColorValue" title="Red 100" href="#void">#ffcdd2</a></span> </li>
-        <li class="color dark" style="background-color: #ef9a9a"><span class="shade expanded">200</span><span class="hex"><a id="ef9a9a" class="mdColorValue" title="Red 200" href="#void">#ef9a9a</a></span> </li>
-        <li class="color dark" style="background-color: #e57373;"><span class="shade">300</span><span class="hex"><a id="e57373" class="mdColorValue md-white" title="Red 300" href="#void">#e57373</a></span> </li>
-        <li class="color" style="background-color: #ef5350;"><span class="shade expanded">400</span><span class="hex"><a id="ef5350" class="mdColorValue md-white" title="Red 400" href="#void">#ef5350</a></span> </li>
-        <li class="color" style="background-color: #f44336;"><span class="shade">500</span><span class="hex"><a id="f44336" class="mdColorValue md-white" title="Red 500" href="#void">#f44336</a></span> </li>
-        <li class="color" style="background-color: #e53935;"><span class="shade expanded">600</span><span class="hex"><a id="e53935" class="mdColorValue md-white" title="Red 600" href="#void">#e53935</a></span> </li>
-        <li class="color" style="background-color: #d32f2f;"><span class="shade">700</span><span class="hex"><a id="d32f2f" class="mdColorValue md-white" title="Red 700" href="#void">#d32f2f</a></span> </li>
-        <li class="color" style="background-color: #c62828;"><span class="shade expanded">800</span><span class="hex"><a id="c62828" class="mdColorValue md-white" title="Red 800" href="#void">#c62828</a></span> </li>
-        <li class="color" style="background-color: #b71c1c;"><span class="shade expanded">900</span><span class="hex"><a id="b71c1c" class="mdColorValue md-white" title="Red 900" href="#void">#b71c1c</a></span> </li>
-        <li class="color dark divide" style="background-color: #ff8a80;"><span class="shade accent">A100</span><span class="hex"><a id="ff8a80" class="mdColorValue" title="Red A100" href="#void">#ff8a80</a></span> </li>
-        <li class="color light-strong" style="background-color: #ff5252;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ff5252" class="mdColorValue md-white" title="Red A200" href="#void">#ff5252</a></span> </li>
-        <li class="color" style="background-color: #ff1744;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ff1744" class="mdColorValue md-white" title="Red A400" href="#void">#ff1744</a></span> </li>
-        <li class="color" style="background-color: #d50000;"><span class="shade accent">A700</span><span class="hex"><a id="d50000" class="mdColorValue md-white" title="Red A700" href="#void">#d50000</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #E91E63;"> <span class="name light-strong">Pink</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="e91e63" class="mdColorValue md-white" title="Pink" href="#void">#e91e63</a></span> </li>
-        <li class="color dark" style="background-color: #fce4ec;"><span class="shade expanded">50</span><span class="hex"><a id="fce4ec" class="mdColorValue" title="Pink 50" href="#void">#fce4ec</a></span> </li>
-        <li class="color dark" style="background-color: #f8bbd0;"><span class="shade">100</span><span class="hex"><a id="f8bbd0" class="mdColorValue" title="Pink 100" href="#void">#f8bbd0</a></span> </li>
-        <li class="color dark" style="background-color: #f48fb1;"><span class="shade expanded">200</span><span class="hex"><a id="f48fb1" class="mdColorValue" title="Pink 200" href="#void">#f48fb1</a></span> </li>
-        <li class="color light-strong" style="background-color: #f06292;"><span class="shade">300</span><span class="hex"><a id="f06292" class="mdColorValue md-white" title="Pink 300" href="#void">#f06292</a></span> </li>
-        <li class="color " style="background-color: #ec407a;"><span class="shade expanded">400</span><span class="hex"><a id="ec407a" class="mdColorValue md-white" title="Pink 400" href="#void">#ec407a</a></span> </li>
-        <li class="color" style="background-color: #e91e63;"><span class="shade">500</span><span class="hex"><a id="e91e63" class="mdColorValue md-white" title="Pink 500" href="#void">#e91e63</a></span> </li>
-        <li class="color" style="background-color: #d81b60;"><span class="shade expanded">600</span><span class="hex"><a id="d81b60" class="mdColorValue md-white" title="Pink 600" href="#void">#d81b60</a></span> </li>
-        <li class="color" style="background-color: #c2185b;"><span class="shade">700</span><span class="hex"><a id="c2185b" class="mdColorValue md-white" title="Pink 700" href="#void">#c2185b</a></span> </li>
-        <li class="color" style="background-color: #ad1457;"><span class="shade">800</span><span class="hex"><a id="ad1457" class="mdColorValue md-white" title="Pink 800" href="#void">#ad1457</a></span> </li>
-        <li class="color" style="background-color: #880e4f;"><span class="shade">900</span><span class="hex"><a id="880e4f" class="mdColorValue md-white" title="Pink 900" href="#void">#880e4f</a></span> </li>
-        <li class="color dark divide" style="background-color: #ff80ab;"><span class="shade accent">A100</span><span class="hex"><a id="ff80ab" class="mdColorValue" title="Pink A100" href="#void">#ff80ab</a></span> </li>
-        <li class="color light-strong" style="background-color: #ff4081;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ff4081" class="mdColorValue md-white" title="Pink A200" href="#void">#ff4081</a></span> </li>
-        <li class="color" style="background-color: #f50057;"><span class="shade accent expanded">A400</span><span class="hex"><a id="f50057" class="mdColorValue md-white" title="Pink A400" href="#void">#f50057</a></span> </li>
-        <li class="color" style="background-color: #c51162;"><span class="shade accent">A700</span><span class="hex"><a id="c51162" class="mdColorValue md-white" title="Pink A700" href="#void">#c51162</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Purple and Deep Purple
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #9c27b0;"> <span class="name">Purple</span> <span class="shade">500</span> <span class="hex"><a id="9c27b0" class="mdColorValue md-white" title="Purple" href="#void">#9c27b0</a></span> </li>
-        <li class="color dark" style="background-color: #f3e5f5;"><span class="shade expanded">50</span><span class="hex"><a id="f3e5f5" class="mdColorValue" title="Purple 50" href="#void">#f3e5f5</a></span> </li>
-        <li class="color dark" style="background-color: #e1bee7;"><span class="shade">100</span><span class="hex"><a id="e1bee7" class="mdColorValue" title="Purple 100" href="#void">#e1bee7</a></span> </li>
-        <li class="color dark" style="background-color: #ce93d8;"><span class="shade expanded">200</span><span class="hex"><a id="ce93d8" class="mdColorValue" title="Purple 200" href="#void">#ce93d8</a></span> </li>
-        <li class="color light-strong" style="background-color: #ba68c8;"><span class="shade">300</span><span class="hex"><a id="ba68c8" class="mdColorValue md-white" title="Purple 300" href="#void">#ba68c8</a></span> </li>
-        <li class="color light-strong" style="background-color: #ab47bc;"><span class="shade expanded">400</span><span class="hex"><a id="ab47bc" class="mdColorValue md-white" title="Purple 400" href="#void">#ab47bc</a></span> </li>
-        <li class="color" style="background-color: #9c27b0;"><span class="shade">500</span><span class="hex"><a id="9c27b0" class="mdColorValue md-white" title="Purple 500" href="#void">#9c27b0</a></span> </li>
-        <li class="color" style="background-color: #8e24aa;"><span class="shade expanded">600</span><span class="hex"><a id="8e24aa" class="mdColorValue md-white" title="Purple 600" href="#void">#8e24aa</a></span> </li>
-        <li class="color" style="background-color: #7b1fa2;"><span class="shade">700</span><span class="hex"><a id="7b1fa2" class="mdColorValue md-white" title="Purple 700" href="#void">#7b1fa2</a></span> </li>
-        <li class="color" style="background-color: #6a1b9a;"><span class="shade expanded">800</span><span class="hex"><a id="6a1b9a" class="mdColorValue md-white" title="Purple 800" href="#void">#6a1b9a</a></span> </li>
-        <li class="color" style="background-color: #4a148c;"><span class="shade expanded">900</span><span class="hex"><a id="4a148c" class="mdColorValue md-white" title="Purple 900" href="#void">#4a148c</a></span> </li>
-      <li class="color dark divide" style="background-color: #ea80fc;"><span class="shade accent">A100</span><span class="hex"><a id="ea80fc" class="mdColorValue" title="Purple A100" href="#void">#ea80fc</a></span> </li>
-        <li class="color light-strong" style="background-color: #e040fb;"><span class="shade accent expanded">A200</span><span class="hex"><a id="e040fb" class="mdColorValue md-white" title="Purple A200" href="#void">#e040fb</a></span> </li>
-        <li class="color" style="background-color: #d500f9;"><span class="shade accent expanded">A400</span><span class="hex"><a id="d500f9" class="mdColorValue md-white" title="Purple A400" href="#void">#d500f9</a></span> </li>
-        <li class="color" style="background-color: #aa00ff;"><span class="shade accent">A700</span><span class="hex"><a id="aa00ff" class="mdColorValue md-white" title="Purple A700" href="#void">#aa00ff</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #673ab7;"> <span class="name">Deep Purple</span> <span class="shade">500</span> <span class="hex"><a id="673ab7" class="mdColorValue md-white" title="Deep Purple" href="#void">#673ab7</a></span> </li>
-        <li class="color dark" style="background-color: #ede7f6;"><span class="shade expanded">50</span><span class="hex"><a id="ede7f6" class="mdColorValue" title="Deep Purple 50" href="#void">#ede7f6</a></span> </li>
-        <li class="color dark" style="background-color: #d1c4e9;"><span class="shade">100</span><span class="hex"><a id="d1c4e9" class="mdColorValue" title="Deep Purple 100" href="#void">#d1c4e9</a></span> </li>
-        <li class="color dark" style="background-color: #b39ddb;"><span class="shade expanded">200</span><span class="hex"><a id="b39ddb" class="mdColorValue" title="Deep Purple 200" href="#void">#b39ddb</a></span> </li>
-        <li class="color" style="background-color: #9575cd;"><span class="shade">300</span><span class="hex"><a id="9575cd" class="mdColorValue md-white" title="Deep Purple 300" href="#void">#9575cd</a></span> </li>
-        <li class="color" style="background-color: #7e57c2;"><span class="shade expanded">400</span><span class="hex"><a id="7e57c2" class="mdColorValue md-white" title="Deep Purple 400" href="#void">#7e57c2</a></span> </li>
-        <li class="color" style="background-color: #673ab7;"><span class="shade">500</span><span class="hex"><a id="673ab7" class="mdColorValue md-white" title="Deep Purple 500" href="#void">#673ab7</a></span> </li>
-        <li class="color" style="background-color: #5e35b1;"><span class="shade expanded">600</span><span class="hex"><a id="5e35b1" class="mdColorValue md-white" title="Deep Purple 600" href="#void">#5e35b1</a></span> </li>
-        <li class="color" style="background-color: #512da8;"><span class="shade">700</span><span class="hex"><a id="512da8" class="mdColorValue md-white" title="Deep Purple 700" href="#void">#512da8</a></span> </li>
-        <li class="color" style="background-color: #4527a0;"><span class="shade expanded">800</span><span class="hex"><a id="4527a0" class="mdColorValue md-white" title="Deep Purple 800" href="#void">#4527a0</a></span> </li>
-        <li class="color" style="background-color: #311b92;"><span class="shade expanded">900</span><span class="hex"><a id="311b92" class="mdColorValue md-white" title="Deep Purple 900" href="#void">#311b92</a></span> </li>
-        <li class="color dark divide" style="background-color: #b388ff;"><span class="shade accent">A100</span><span class="hex"><a id="b388ff" class="mdColorValue" title="Deep Purple A100" href="#void">#b388ff</a></span> </li>
-        <li class="color light-strong" style="background-color: #7c4dff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="7c4dff" class="mdColorValue md-white" title="Deep Purple A200" href="#void">#7c4dff</a></span> </li>
-        <li class="color" style="background-color: #651fff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="651fff" class="mdColorValue md-white" title="Deep Purple A400" href="#void">#651fff</a></span> </li>
-        <li class="color" style="background-color: #6200ea;"><span class="shade accent">A700</span><span class="hex"><a id="6200ea" class="mdColorValue md-white" title="Deep Purple A700" href="#void">#6200ea</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Indigo and Blue
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #3f51b5;"> <span class="name">Indigo</span> <span class="shade">500</span> <span class="hex"><a id="3f51b5" class="mdColorValue md-white" title="Indigo" href="#void">#3f51b5</a></span> </li>
-        <li class="color dark" style="background-color: #e8eaf6;"><span class="shade expanded">50</span><span class="hex"><a id="e8eaf6" class="mdColorValue" title="Indigo 50" href="#void">#e8eaf6</a></span> </li>
-        <li class="color dark" style="background-color: #c5cae9;"><span class="shade">100</span><span class="hex"><a id="c5cae9" class="mdColorValue" title="Indigo 100" href="#void">#c5cae9</a></span> </li>
-        <li class="color dark" style="background-color: #9fa8da;"><span class="shade expanded">200</span><span class="hex"><a id="9fa8da" class="mdColorValue" title="Indigo 200" href="#void">#9fa8da</a></span> </li>
-        <li class="color" style="background-color: #7986cb;"><span class="shade">300</span><span class="hex"><a id="7986cb" class="mdColorValue md-white" title="Indigo 300" href="#void">#7986cb</a></span> </li>
-        <li class="color" style="background-color: #5c6bc0;"><span class="shade expanded">400</span><span class="hex"><a id="5c6bc0" class="mdColorValue md-white" title="Indigo 400" href="#void">#5c6bc0</a></span> </li>
-        <li class="color" style="background-color: #3f51b5;"><span class="shade">500</span><span class="hex"><a id="3f51b5" class="mdColorValue md-white" title="Indigo 500" href="#void">#3f51b5</a></span> </li>
-        <li class="color" style="background-color: #3949ab;"><span class="shade expanded">600</span><span class="hex"><a id="3949ab" class="mdColorValue md-white" title="Indigo 600" href="#void">#3949ab</a></span> </li>
-        <li class="color" style="background-color: #303f9f;"><span class="shade">700</span><span class="hex"><a id="303f9f" class="mdColorValue md-white" title="Indigo 700" href="#void">#303f9f</a></span> </li>
-        <li class="color" style="background-color: #283593;"><span class="shade expanded">800</span><span class="hex"><a id="283593" class="mdColorValue md-white" title="Indigo 800" href="#void">#283593</a></span> </li>
-        <li class="color" style="background-color: #1a237e;"><span class="shade expanded">900</span><span class="hex"><a id="1a237e" class="mdColorValue md-white" title="Indigo 900" href="#void">#1a237e</a></span> </li>
-        <li class="color dark divide" style="background-color: #8c9eff;"><span class="shade accent">A100</span><span class="hex"><a id="8c9eff" class="mdColorValue" title="Indigo A100" href="#void">#8c9eff</a></span> </li>
-        <li class="color" style="background-color: #536dfe;"><span class="shade accent expanded">A200</span><span class="hex"><a id="536dfe" class="mdColorValue md-white" title="Indigo A200" href="#void">#536dfe</a></span> </li>
-        <li class="color" style="background-color: #3d5afe;"><span class="shade accent expanded">A400</span><span class="hex"><a id="3d5afe" class="mdColorValue md-white" title="Indigo A400" href="#void">#3d5afe</a></span> </li>
-        <li class="color" style="background-color: #304ffe;"><span class="shade accent">A700</span><span class="hex"><a id="304ffe" class="mdColorValue md-white" title="Indigo A700" href="#void">#304ffe</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #2196F3;"> <span class="name light-strong">Blue</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="2196f3" class="mdColorValue md-white" title="Blue" href="#void">#2196f3</a></span> </li>
-        <li class="color dark" style="background-color: #e3f2fd;"><span class="shade expanded">50</span><span class="hex"><a id="e3f2fd" class="mdColorValue" title="Blue 50" href="#void">#e3f2fd</a></span> </li>
-        <li class="color dark" style="background-color: #bbdefb;"><span class="shade">100</span><span class="hex"><a id="bbdefb" class="mdColorValue" title="Blue 100" href="#void">#bbdefb</a></span> </li>
-        <li class="color dark" style="background-color: #90caf9;"><span class="shade expanded">200</span><span class="hex"><a id="90caf9" class="mdColorValue" title="Blue 200" href="#void">#90caf9</a></span> </li>
-        <li class="color dark" style="background-color: #64b5f6;"><span class="shade">300</span><span class="hex"><a id="64b5f6" class="mdColorValue md-white" title="Blue 300" href="#void">#64b5f6</a></span> </li>
-        <li class="color dark" style="background-color: #42a5f5;"><span class="shade expanded">400</span><span class="hex"><a id="42a5f5" class="mdColorValue md-white" title="Blue 400" href="#void">#42a5f5</a></span> </li>
-        <li class="color light-strong" style="background-color: #2196f3;"><span class="shade">500</span><span class="hex"><a id="2196f3" class="mdColorValue md-white" title="Blue 500" href="#void">#2196f3</a></span> </li>
-        <li class="color" style="background-color: #1e88e5;"><span class="shade expanded">600</span><span class="hex"><a id="1e88e5" class="mdColorValue md-white" title="Blue 600" href="#void">#1e88e5</a></span> </li>
-        <li class="color" style="background-color: #1976d2;"><span class="shade">700</span><span class="hex"><a id="1976d2" class="mdColorValue md-white" title="Blue 700" href="#void">#1976d2</a></span> </li>
-        <li class="color" style="background-color: #1565c0;"><span class="shade expanded">800</span><span class="hex"><a id="1565c0" class="mdColorValue md-white" title="Blue 800" href="#void">#1565c0</a></span> </li>
-        <li class="color" style="background-color: #0d47a1;"><span class="shade expanded">900</span><span class="hex"><a id="0d47a1" class="mdColorValue md-white" title="Blue 900" href="#void">#0d47a1</a></span> </li>
-        <li class="color dark divide" style="background-color: #82b1ff;"><span class="shade accent">A100</span><span class="hex"><a id="82b1ff" class="mdColorValue" title="Blue A100" href="#void">#82b1ff</a></span> </li>
-        <li class="color light-strong" style="background-color: #448aff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="448aff" class="mdColorValue md-white" title="Blue A200" href="#void">#448aff</a></span> </li>
-        <li class="color" style="background-color: #2979ff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="2979ff" class="mdColorValue md-white" title="Blue A400" href="#void">#2979ff</a></span> </li>
-        <li class="color" style="background-color: #2962ff;"><span class="shade accent">A700</span><span class="hex"><a id="2962ff" class="mdColorValue md-white" title="Blue A700" href="#void">#2962ff</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Light Blue and Cyan
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #03a9f4;"> <span class="name dark">Light Blue</span> <span class="shade dark">500</span> <span class="hex dark"><a id="03a9f4" class="mdColorValue md-white" title="Light Blue" href="#void">#03a9f4</a></span> </li>
-        <li class="color dark" style="background-color: #e1f5fe;"><span class="shade expanded">50</span><span class="hex"><a id="e1f5fe" class="mdColorValue" title="Light Blue 50" href="#void">#e1f5fe</a></span> </li>
-        <li class="color dark" style="background-color: #b3e5fc;"><span class="shade">100</span><span class="hex"><a id="b3e5fc" class="mdColorValue" title="Light Blue 100" href="#void">#b3e5fc</a></span> </li>
-        <li class="color dark" style="background-color: #81d4fa;"><span class="shade expanded">200</span><span class="hex"><a id="81d4fa" class="mdColorValue" title="Light Blue 200" href="#void">#81d4fa</a></span> </li>
-        <li class="color dark" style="background-color: #4fc3f7;"><span class="shade">300</span><span class="hex"><a id="4fc3f7" class="mdColorValue md-white" title="Light Blue 300" href="#void">#4fc3f7</a></span> </li>
-        <li class="color dark" style="background-color: #29b6f6;"><span class="shade expanded">400</span><span class="hex"><a id="29b6f6" class="mdColorValue md-white" title="Light Blue 400" href="#void">#29b6f6</a></span> </li>
-        <li class="color dark" style="background-color: #03a9f4;"><span class="shade">500</span><span class="hex"><a id="val" class="mdColorValue md-white" title="Light Blue 500" href="#void">#03a9f4</a></span> </li>
-        <li class="color light-strong" style="background-color: #039be5;"><span class="shade expanded">600</span><span class="hex"><a id="039be5" class="mdColorValue md-white" title="Light Blue 600" href="#void">#039be5</a></span> </li>
-        <li class="color" style="background-color: #0288d1;"><span class="shade">700</span><span class="hex"><a id="0288d1" class="mdColorValue md-white" title="Light Blue 700" href="#void">#0288d1</a></span> </li>
-        <li class="color" style="background-color: #0277bd;"><span class="shade expanded">800</span><span class="hex"><a id="0277bd" class="mdColorValue md-white" title="Light Blue 800" href="#void">#0277bd</a></span> </li>
-        <li class="color" style="background-color: #01579b;"><span class="shade expanded">900</span><span class="hex"><a id="01579b" class="mdColorValue md-white" title="Light Blue 900" href="#void">#01579b</a></span> </li>
-        <li class="color dark divide" style="background-color: #80d8ff;"><span class="shade accent">A100</span><span class="hex"><a id="80d8ff" class="mdColorValue" title="Light Blue A100" href="#void">#80d8ff</a></span> </li>
-        <li class="color dark" style="background-color: #40c4ff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="40c4ff" class="mdColorValue md-white" title="Light Blue A200" href="#void">#40c4ff</a></span> </li>
-        <li class="color dark" style="background-color: #00b0ff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="00b0ff" class="mdColorValue md-white" title="Light Blue A400" href="#void">#00b0ff</a></span> </li>
-        <li class="color light-strong" style="background-color: #0091ea;"><span class="shade accent">A700</span><span class="hex"><a id="0091ea" class="mdColorValue md-white" title="Light Blue A700" href="#void">#0091ea</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #00bcd4;"> <span class="name dark">Cyan</span> <span class="shade dark">500</span> <span class="hex dark"><a id="00bcd4" class="mdColorValue md-white" title="Cyan" href="#void">#00bcd4</a></span> </li>
-        <li class="color dark" style="background-color: #e0f7fa;"><span class="shade expanded">50</span><span class="hex"><a id="e0f7fa" class="mdColorValue" title="Cyan 50" href="#void">#e0f7fa</a></span> </li>
-        <li class="color dark" style="background-color: #b2ebf2;"><span class="shade">100</span><span class="hex"><a id="b2ebf2" class="mdColorValue" title="Cyan 100" href="#void">#b2ebf2</a></span> </li>
-        <li class="color dark" style="background-color: #80deea;"><span class="shade expanded">200</span><span class="hex"><a id="80deea" class="mdColorValue" title="Cyan 200" href="#void">#80deea</a></span> </li>
-        <li class="color dark" style="background-color: #4dd0e1;"><span class="shade">300</span><span class="hex"><a id="4dd0e1" class="mdColorValue md-white" title="Cyan 300" href="#void">#4dd0e1</a></span> </li>
-        <li class="color dark" style="background-color: #26c6da;"><span class="shade expanded">400</span><span class="hex"><a id="26c6da" class="mdColorValue md-white" title="Cyan 400" href="#void">#26c6da</a></span> </li>
-        <li class="color dark" style="background-color: #00bcd4;"><span class="shade">500</span><span class="hex"><a id="00bcd4" class="mdColorValue md-white" title="Cyan 500" href="#void">#00bcd4</a></span> </li>
-        <li class="color dark" style="background-color: #00acc1;"><span class="shade expanded">600</span><span class="hex"><a id="00acc1" class="mdColorValue md-white" title="Cyan 600" href="#void">#00acc1</a></span> </li>
-        <li class="color" style="background-color: #0097a7;"><span class="shade">700</span><span class="hex"><a id="0097a7" class="mdColorValue md-white" title="Cyan 700" href="#void">#0097a7</a></span> </li>
-        <li class="color" style="background-color: #00838f;"><span class="shade expanded">800</span><span class="hex"><a id="00838f" class="mdColorValue md-white" title="Cyan 800" href="#void">#00838f</a></span> </li>
-        <li class="color" style="background-color: #006064;"><span class="shade expanded">900</span><span class="hex"><a id="006064" class="mdColorValue md-white" title="Cyan 900" href="#void">#006064</a></span> </li>
-        <li class="color dark divide" style="background-color: #84ffff;"><span class="shade accent">A100</span><span class="hex"><a id="84ffff" class="mdColorValue" title="Cyan A100" href="#void">#84ffff</a></span> </li>
-        <li class="color dark" style="background-color: #18ffff;"><span class="shade accent expanded">A200</span><span class="hex"><a id="18ffff" class="mdColorValue md-white" title="Cyan A200" href="#void">#18ffff</a></span> </li>
-        <li class="color dark" style="background-color: #00e5ff;"><span class="shade accent expanded">A400</span><span class="hex"><a id="00e5ff" class="mdColorValue md-white" title="Cyan A400" href="#void">#00e5ff</a></span> </li>
-        <li class="color dark" style="background-color: #00b8d4;"><span class="shade accent">A700</span><span class="hex"><a id="00b8d4" class="mdColorValue md-white" title="Cyan A700" href="#void">#00b8d4</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Teal and Green
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #009688;"> <span class="name light-strong">Teal</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="009688" class="mdColorValue md-white" title="Teal" href="#void">#009688</a></span> </li>
-        <li class="color dark" style="background-color: #e0f2f1;"><span class="shade expanded">50</span><span class="hex"><a id="e0f2f1" class="mdColorValue" title="Teal 50" href="#void">#e0f2f1</a></span> </li>
-        <li class="color dark" style="background-color: #b2dfdb;"><span class="shade">100</span><span class="hex"><a id="b2dfdb" class="mdColorValue" title="Teal 100" href="#void">#b2dfdb</a></span> </li>
-        <li class="color dark" style="background-color: #80cbc4;"><span class="shade expanded">200</span><span class="hex"><a id="80cbc4" class="mdColorValue" title="Teal 200" href="#void">#80cbc4</a></span> </li>
-        <li class="color dark" style="background-color: #4db6ac;"><span class="shade">300</span><span class="hex"><a id="4db6ac" class="mdColorValue md-white" title="Teal 300" href="#void">#4db6ac</a></span> </li>
-        <li class="color dark" style="background-color: #26a69a;"><span class="shade expanded">400</span><span class="hex"><a id="26a69a" class="mdColorValue md-white" title="Teal 400" href="#void">#26a69a</a></span> </li>
-        <li class="color light-strong" style="background-color: #009688;"><span class="shade">500</span><span class="hex"><a id="009688" class="mdColorValue md-white" title="Teal 500" href="#void">#009688</a></span> </li>
-        <li class="color light-strong" style="background-color: #00897b;"><span class="shade expanded">600</span><span class="hex"><a id="00897b" class="mdColorValue md-white" title="Teal 600" href="#void">#00897b</a></span> </li>
-        <li class="color light-strong" style="background-color: #00796b;"><span class="shade">700</span><span class="hex"><a id="00796b" class="mdColorValue md-white" title="Teal 700" href="#void">#00796b</a></span> </li>
-        <li class="color" style="background-color: #00695c;"><span class="shade expanded">800</span><span class="hex"><a id="00695c" class="mdColorValue md-white" title="Teal 800" href="#void">#00695c</a></span> </li>
-        <li class="color" style="background-color: #004d40;"><span class="shade expanded">900</span><span class="hex"><a id="004d40" class="mdColorValue md-white" title="Teal 900" href="#void">#004d40</a></span> </li>
-        <li class="color dark divide" style="background-color: #a7ffeb;"><span class="shade accent">A100</span><span class="hex"><a id="a7ffeb" class="mdColorValue" title="Teal A100" href="#void">#a7ffeb</a></span> </li>
-      <li class="color dark" style="background-color: #64ffda;"><span class="shade accent expanded">A200</span><span class="hex"><a id="64ffda" class="mdColorValue md-white" title="Teal A200" href="#void">#64ffda</a></span> </li>
-        <li class="color dark" style="background-color: #1de9b6;"><span class="shade accent expanded">A400</span><span class="hex"><a id="1de9b6" class="mdColorValue md-white" title="Teal A400" href="#void">#1de9b6</a></span> </li>
-        <li class="color dark" style="background-color: #00bfa5;"><span class="shade accent">A700</span><span class="hex"><a id="00bfa5" class="mdColorValue md-white" title="Teal A700" href="#void">#00bfa5</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #4caf50;"> <span class="name dark">Green</span> <span class="shade dark">500</span> <span class="hex dark"><a id="4caf50" class="mdColorValue md-white" title="Green" href="#void">#4caf50</a></span> </li>
-        <li class="color dark" style="background-color: #e8f5e9;"><span class="shade expanded">50</span><span class="hex"><a id="e8f5e9" class="mdColorValue" title="Green 50" href="#void">#e8f5e9</a></span> </li>
-        <li class="color dark" style="background-color: #c8e6c9;"><span class="shade">100</span><span class="hex"><a id="c8e6c9" class="mdColorValue" title="Green 100" href="#void">#c8e6c9</a></span> </li>
-        <li class="color dark" style="background-color: #a5d6a7;"><span class="shade expanded">200</span><span class="hex"><a id="a5d6a7" class="mdColorValue" title="Green 200" href="#void">#a5d6a7</a></span> </li>
-        <li class="color dark" style="background-color: #81c784;"><span class="shade">300</span><span class="hex"><a id="81c784" class="mdColorValue md-white" title="Green 300" href="#void">#81c784</a></span> </li>
-        <li class="color dark" style="background-color: #66bb6a;"><span class="shade expanded">400</span><span class="hex"><a id="66bb6a" class="mdColorValue md-white" title="Green 400" href="#void">#66bb6a</a></span> </li>
-        <li class="color dark" style="background-color: #4caf50;"><span class="shade">500</span><span class="hex"><a id="4caf50" class="mdColorValue md-white" title="Green 500" href="#void">#4caf50</a></span> </li>
-        <li class="color light-strong" style="background-color: #43a047;"><span class="shade expanded">600</span><span class="hex"><a id="43a047" class="mdColorValue md-white" title="Green 600" href="#void">#43a047</a></span> </li>
-        <li class="color" style="background-color: #388e3c;"><span class="shade">700</span><span class="hex"><a id="388e3c" class="mdColorValue md-white" title="Green 700" href="#void">#388e3c</a></span> </li>
-        <li class="color" style="background-color: #2e7d32;"><span class="shade expanded">800</span><span class="hex"><a id="2e7d32" class="mdColorValue md-white" title="Green 800" href="#void">#2e7d32</a></span> </li>
-        <li class="color" style="background-color: #1b5e20;"><span class="shade expanded">900</span><span class="hex"><a id="1b5e20" class="mdColorValue md-white" title="Green 900" href="#void">#1b5e20</a></span> </li>
-        <li class="color dark divide" style="background-color: #b9f6ca;"><span class="shade accent">A100</span><span class="hex"><a id="b9f6ca" class="mdColorValue" title="Green A100" href="#void">#b9f6ca</a></span> </li>
-        <li class="color dark" style="background-color: #69f0ae;"><span class="shade accent expanded">A200</span><span class="hex"><a id="69f0ae" class="mdColorValue md-white" title="Green A200" href="#void">#69f0ae</a></span> </li>
-        <li class="color dark" style="background-color: #00e676;"><span class="shade accent expanded">A400</span><span class="hex"><a id="00e676" class="mdColorValue md-white" title="Green A400" href="#void">#00e676</a></span> </li>
-        <li class="color dark" style="background-color: #00c853;"><span class="shade accent">A700</span><span class="hex"><a id="00c853" class="mdColorValue md-white" title="Green A700" href="#void">#00c853</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Light Green and Lime
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #8bc34a;"> <span class="name dark">Light Green</span> <span class="shade dark">500</span> <span class="hex dark"><a id="8bc34a" class="mdColorValue md-white" title="Light Green" href="#void">#8bc34a</a></span> </li>
-        <li class="color dark" style="background-color: #f1f8e9;"><span class="shade expanded">50</span><span class="hex"><a id="f1f8e9" class="mdColorValue" title="Light Green 50" href="#void">#f1f8e9</a></span> </li>
-        <li class="color dark" style="background-color: #dcedc8;"><span class="shade">100</span><span class="hex"><a id="dcedc8" class="mdColorValue" title="Light Green 100" href="#void">#dcedc8</a></span> </li>
-        <li class="color dark" style="background-color: #c5e1a5;"><span class="shade expanded">200</span><span class="hex"><a id="c5e1a5" class="mdColorValue" title="Light Green 200" href="#void">#c5e1a5</a></span> </li>
-        <li class="color dark" style="background-color: #aed581;"><span class="shade">300</span><span class="hex"><a id="aed581" class="mdColorValue md-white" title="Light Green 300" href="#void">#aed581</a></span> </li>
-        <li class="color dark" style="background-color: #9ccc65;"><span class="shade expanded">400</span><span class="hex"><a id="9ccc65" class="mdColorValue md-white" title="Light Green 400" href="#void">#9ccc65</a></span> </li>
-        <li class="color dark" style="background-color: #8bc34a;"><span class="shade">500</span><span class="hex"><a id="8bc34a" class="mdColorValue md-white" title="Light Green 500" href="#void">#8bc34a</a></span> </li>
-        <li class="color dark" style="background-color: #7cb342;"><span class="shade expanded">600</span><span class="hex"><a id="7cb342" class="mdColorValue md-white" title="Light Green 600" href="#void">#7cb342</a></span> </li>
-        <li class="color light-strong" style="background-color: #689f38;"><span class="shade">700</span><span class="hex"><a id="689f38" class="mdColorValue md-white" title="Light Green 700" href="#void">#689f38</a></span> </li>
-        <li class="color" style="background-color: #558b2f;"><span class="shade expanded">800</span><span class="hex"><a id="558b2f" class="mdColorValue md-white" title="Light Green 800" href="#void">#558b2f</a></span> </li>
-        <li class="color" style="background-color: #33691e;"><span class="shade expanded">900</span><span class="hex"><a id="33691e" class="mdColorValue md-white" title="Light Green 900" href="#void">#33691e</a></span> </li>
-        <li class="color dark divide" style="background-color: #ccff90;"><span class="shade accent">A100</span><span class="hex"><a id="ccff90" class="mdColorValue" title="Light Green A100" href="#void">#ccff90</a></span> </li>
-        <li class="color dark" style="background-color: #b2ff59;"><span class="shade accent expanded">A200</span><span class="hex"><a id="b2ff59" class="mdColorValue" title="Light Green A200" href="#void">#b2ff59</a></span> </li>
-        <li class="color dark" style="background-color: #76ff03;"><span class="shade accent expanded">A400</span><span class="hex"><a id="76ff03" class="mdColorValue" title="Light Green A400" href="#void">#76ff03</a></span> </li>
-        <li class="color dark" style="background-color: #64dd17;"><span class="shade accent">A700</span><span class="hex"><a id="64dd17" class="mdColorValue" title="Light Green A700" href="#void">#64dd17</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #cddc39;"> <span class="name dark">Lime</span> <span class="shade dark">500</span> <span class="hex dark"><a id="cddc39" class="mdColorValue md-white" title="Lime" href="#void">#cddc39</a></span> </li>
-        <li class="color dark" style="background-color: #f9fbe7;"><span class="shade expanded">50</span><span class="hex"><a id="f9fbe7" class="mdColorValue" title="Lime 50" href="#void">#f9fbe7</a></span> </li>
-        <li class="color dark" style="background-color: #f0f4c3;"><span class="shade">100</span><span class="hex"><a id="f0f4c3" class="mdColorValue" title="Lime 100" href="#void">#f0f4c3</a></span> </li>
-        <li class="color dark" style="background-color: #e6ee9c;"><span class="shade expanded">200</span><span class="hex"><a id="e6ee9c" class="mdColorValue" title="Lime 200" href="#void">#e6ee9c</a></span> </li>
-        <li class="color dark" style="background-color: #dce775;"><span class="shade">300</span><span class="hex"><a id="dce775" class="mdColorValue md-white" title="Lime 300" href="#void">#dce775</a></span> </li>
-        <li class="color dark" style="background-color: #d4e157;"><span class="shade expanded">400</span><span class="hex"><a id="d4e157" class="mdColorValue md-white" title="Lime 400" href="#void">#d4e157</a></span> </li>
-        <li class="color dark" style="background-color: #cddc39;"><span class="shade">500</span><span class="hex"><a id="cddc39" class="mdColorValue md-white" title="Lime 500" href="#void">#cddc39</a></span> </li>
-        <li class="color dark" style="background-color: #c0ca33;"><span class="shade expanded">600</span><span class="hex"><a id="c0ca33" class="mdColorValue md-white" title="Lime 600" href="#void">#c0ca33</a></span> </li>
-        <li class="color dark" style="background-color: #afb42b;"><span class="shade">700</span><span class="hex"><a id="afb42b" class="mdColorValue md-white" title="Lime 700" href="#void">#afb42b</a></span> </li>
-        <li class="color dark" style="background-color: #9e9d24;"><span class="shade expanded">800</span><span class="hex"><a id="9e9d24" class="mdColorValue md-white" title="Lime 800" href="#void">#9e9d24</a></span> </li>
-        <li class="color" style="background-color: #827717;"><span class="shade expanded">900</span><span class="hex"><a id="827717" class="mdColorValue md-white" title="Lime 900" href="#void">#827717</a></span> </li>
-        <li class="color dark divide" style="background-color: #f4ff81;"><span class="shade accent">A100</span><span class="hex"><a id="f4ff81" class="mdColorValue" title="Lime A100" href="#void">#f4ff81</a></span> </li>
-        <li class="color dark" style="background-color: #eeff41;"><span class="shade accent expanded">A200</span><span class="hex"><a id="eeff41" class="mdColorValue" title="Lime A200" href="#void">#eeff41</a></span> </li>
-        <li class="color dark" style="background-color: #c6ff00;"><span class="shade accent expanded">A400</span><span class="hex"><a id="c6ff00" class="mdColorValue" title="Lime A400" href="#void">#c6ff00</a></span> </li>
-        <li class="color dark" style="background-color: #aeea00;"><span class="shade accent">A700</span><span class="hex"><a id="aeea00" class="mdColorValue" title="Lime A700" href="#void">#aeea00</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Yellow and Amber
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ffeb3b;"> <span class="name dark">Yellow</span> <span class="shade dark">500</span> <span class="hex dark"><a id="ffeb3b" class="mdColorValue" title="Yellow" href="#void">#ffeb3b</a></span> </li>
-        <li class="color dark" style="background-color: #fffde7;"><span class="shade expanded">50</span><span class="hex"><a id="fffde7" class="mdColorValue" title="Yellow 50" href="#fffde7">#fffde7</a></span> </li>
-        <li class="color dark" style="background-color: #fff9c4;"><span class="shade">100</span><span class="hex"><a id="fff9c4" class="mdColorValue" title="Yellow 100" href="#void">#fff9c4</a></span> </li>
-        <li class="color dark" style="background-color: #fff59d;"><span class="shade expanded">200</span><span class="hex"><a id="fff59d" class="mdColorValue" title="Yellow 200" href="#void">#fff59d</a></span> </li>
-        <li class="color dark" style="background-color: #fff176;"><span class="shade">300</span><span class="hex"><a id="fff176" class="mdColorValue" title="Yellow 300" href="#void">#fff176</a></span> </li>
-        <li class="color dark" style="background-color: #ffee58;"><span class="shade expanded">400</span><span class="hex"><a id="ffee58" class="mdColorValue" title="Yellow 400" href="#void">#ffee58</a></span> </li>
-        <li class="color dark" style="background-color: #ffeb3b;"><span class="shade">500</span><span class="hex"><a id="ffeb3b" class="mdColorValue" title="Yellow 500" href="#void">#ffeb3b</a></span> </li>
-        <li class="color dark" style="background-color: #fdd835;"><span class="shade expanded">600</span><span class="hex"><a id="fdd835" class="mdColorValue" title="Yellow 600" href="#void">#fdd835</a></span> </li>
-        <li class="color dark" style="background-color: #fbc02d;"><span class="shade">700</span><span class="hex"><a id="fbc02d" class="mdColorValue" title="Yellow 700" href="#void">#fbc02d</a></span> </li>
-        <li class="color dark" style="background-color: #f9a825;"><span class="shade expanded">800</span><span class="hex"><a id="f9a825" class="mdColorValue" title="Yellow 800" href="#void">#f9a825</a></span> </li>
-        <li class="color dark" style="background-color: #f57f17;"><span class="shade expanded">900</span><span class="hex"><a id="f57f17" class="mdColorValue" title="Yellow 900" href="#void">#f57f17</a></span> </li>
-        <li class="color dark divide" style="background-color: #ffff8d;"><span class="shade accent">A100</span><span class="hex"><a id="ffff8d" class="mdColorValue" title="Yellow A100" href="#void">#ffff8d</a></span> </li>
-        <li class="color dark" style="background-color: #ffff00;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ffff00" class="mdColorValue" title="Yellow A200" href="#void">#ffff00</a></span> </li>
-        <li class="color dark" style="background-color: #ffea00;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ffea00" class="mdColorValue" title="Yellow A400" href="#void">#ffea00</a></span> </li>
-        <li class="color dark" style="background-color: #ffd600;"><span class="shade accent">A700</span><span class="hex"><a id="ffd600" class="mdColorValue" title="Yellow A700" href="#void">#ffd600</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ffc107;"> <span class="name dark">Amber</span> <span class="shade dark">500</span> <span class="hex dark"><a id="ffc107" class="mdColorValue" title="Amber" href="#void">#ffc107</a></span> </li>
-        <li class="color dark" style="background-color: #fff8e1;"><span class="shade expanded">50</span><span class="hex"><a id="fff8e1" class="mdColorValue" title="Amber 50" href="#void">#fff8e1</a></span> </li>
-        <li class="color dark" style="background-color: #ffecb3;"><span class="shade">100</span><span class="hex"><a id="ffecb3" class="mdColorValue" title="Amber 100" href="#void">#ffecb3</a></span> </li>
-        <li class="color dark" style="background-color: #ffe082;"><span class="shade expanded">200</span><span class="hex"><a id="ffe082" class="mdColorValue" title="Amber 200" href="#void">#ffe082</a></span> </li>
-        <li class="color dark" style="background-color: #ffd54f;"><span class="shade">300</span><span class="hex"><a id="ffd54f" class="mdColorValue" title="Amber 300" href="#void">#ffd54f</a></span> </li>
-        <li class="color dark" style="background-color: #ffca28;"><span class="shade expanded">400</span><span class="hex"><a id="ffca28" class="mdColorValue" title="Amber 400" href="#void">#ffca28</a></span> </li>
-        <li class="color dark" style="background-color: #ffc107;"><span class="shade">500</span><span class="hex"><a id="ffc107" class="mdColorValue" title="Amber 500" href="#void">#ffc107</a></span> </li>
-        <li class="color dark" style="background-color: #ffb300;"><span class="shade expanded">600</span><span class="hex"><a id="ffb300" class="mdColorValue" title="Amber 600" href="#void">#ffb300</a></span> </li>
-        <li class="color dark" style="background-color: #ffa000;"><span class="shade">700</span><span class="hex"><a id="ffa000" class="mdColorValue" title="Amber 700" href="#void">#ffa000</a></span> </li>
-        <li class="color dark" style="background-color: #ff8f00;"><span class="shade expanded">800</span><span class="hex"><a id="ff8f00" class="mdColorValue" title="Amber 800" href="#void">#ff8f00</a></span> </li>
-        <li class="color dark" style="background-color: #ff6f00;"><span class="shade expanded">900</span><span class="hex"><a id="ff6f00" class="mdColorValue" title="Amber 900" href="#void">#ff6f00</a></span> </li>
-        <li class="color dark divide" style="background-color: #ffe57f;"><span class="shade accent">A100</span><span class="hex"><a id="ffe57f" class="mdColorValue" title="Amber A100" href="#void">#ffe57f</a></span> </li>
-        <li class="color dark" style="background-color: #ffd740;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ffd740" class="mdColorValue" title="Amber A200" href="#void">#ffd740</a></span> </li>
-        <li class="color dark" style="background-color: #ffc400;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ffc400" class="mdColorValue" title="Amber A400" href="#void">#ffc400</a></span> </li>
-        <li class="color dark" style="background-color: #ffab00;"><span class="shade accent">A700</span><span class="hex"><a id="ffab00" class="mdColorValue" title="Amber A700" href="#void">#ffab00</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Orange and Deep Orange
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ff9800;"> <span class="name dark-when-small">Orange</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small"><a id="ff9800" class="mdColorValue md-white" title="Orange" href="#void">#ff9800</a></span> </li>
-        <li class="color dark" style="background-color: #fff3e0;"><span class="shade expanded">50</span><span class="hex"><a id="fff3e0" class="mdColorValue" title="Orange 50" href="#void">#fff3e0</a></span> </li>
-        <li class="color dark" style="background-color: #ffe0b2;"><span class="shade">100</span><span class="hex"><a id="ffe0b2" class="mdColorValue" title="Orange 100" href="#void">#ffe0b2</a></span> </li>
-        <li class="color dark" style="background-color: #ffcc80;"><span class="shade expanded">200</span><span class="hex"><a id="ffcc80" class="mdColorValue" title="Orange 200" href="#void">#ffcc80</a></span> </li>
-        <li class="color dark" style="background-color: #ffb74d;"><span class="shade">300</span><span class="hex"><a id="ffb74d" class="mdColorValue md-white" title="Orange 300" href="#void">#ffb74d</a></span> </li>
-        <li class="color dark" style="background-color: #ffa726;"><span class="shade expanded">400</span><span class="hex"><a id="ffa726" class="mdColorValue md-white" title="Orange 400" href="#void">#ffa726</a></span> </li>
-        <li class="color dark" style="background-color: #ff9800;"><span class="shade">500</span><span class="hex"><a id="ff9800" class="mdColorValue md-white" title="Orange 500" href="#void">#ff9800</a></span> </li>
-        <li class="color dark" style="background-color: #fb8c00;"><span class="shade expanded">600</span><span class="hex"><a id="fb8c00" class="mdColorValue md-white" title="Orange 600" href="#void">#fb8c00</a></span> </li>
-        <li class="color dark" style="background-color: #f57c00;"><span class="shade">700</span><span class="hex"><a id="f57c00" class="mdColorValue md-white" title="Orange 700" href="#void">#f57c00</a></span> </li>
-        <li class="color light-strong" style="background-color: #ef6c00;"><span class="shade expanded">800</span><span class="hex"><a id="ef6c00" class="mdColorValue md-white" title="Orange 800" href="#void">#ef6c00</a></span> </li>
-        <li class="color" style="background-color: #e65100;"><span class="shade expanded">900</span><span class="hex"><a id="e65100" class="mdColorValue md-white" title="Orange 900" href="#void">#e65100</a></span> </li>
-        <li class="color dark divide" style="background-color: #ffd180;"><span class="shade accent">A100</span><span class="hex"><a id="ffd180" class="mdColorValue" title="Orange A100" href="#void">#ffd180</a></span> </li>
-        <li class="color dark" style="background-color: #ffab40;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ffab40" class="mdColorValue md-white" title="Orange A200" href="#void">#ffab40</a></span> </li>
-        <li class="color dark" style="background-color: #ff9100;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ff9100" class="mdColorValue md-white" title="Orange A400" href="#void">#ff9100</a></span> </li>
-        <li class="color dark" style="background-color: #ff6d00;"><span class="shade accent">A700</span><span class="hex"><a id="ff6d00" class="mdColorValue md-white" title="Orange A700" href="#void">#ff6d00</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #ff5722;"> <span class="name light-strong">Deep Orange</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="ff5722" class="mdColorValue md-white" title="Deep Orange" href="#void">#ff5722</a></span> </li>
-        <li class="color dark" style="background-color: #fbe9e7;"><span class="shade expanded">50</span><span class="hex"><a id="fbe9e7" class="mdColorValue" title="Deep Orange 50" href="#void">#fbe9e7</a></span> </li>
-        <li class="color dark" style="background-color: #ffccbc;"><span class="shade">100</span><span class="hex"><a id="ffccbc" class="mdColorValue" title="Deep Orange 100" href="#void">#ffccbc</a></span> </li>
-        <li class="color dark" style="background-color: #ffab91;"><span class="shade expanded">200</span><span class="hex"><a id="ffab91" class="mdColorValue" title="Deep Orange 200" href="#void">#ffab91</a></span> </li>
-        <li class="color dark" style="background-color: #ff8a65;"><span class="shade">300</span><span class="hex"><a id="ff8a65" class="mdColorValue md-white" title="Deep Orange 300" href="#void">#ff8a65</a></span> </li>
-        <li class="color dark" style="background-color: #ff7043;"><span class="shade expanded">400</span><span class="hex"><a id="ff7043" class="mdColorValue md-white" title="Deep Orange 400" href="#void">#ff7043</a></span> </li>
-        <li class="color light-strong" style="background-color: #ff5722;"><span class="shade">500</span><span class="hex"><a id="ff5722" class="mdColorValue md-white" title="Deep Orange 500" href="#void">#ff5722</a></span> </li>
-        <li class="color" style="background-color: #f4511e;"><span class="shade expanded">600</span><span class="hex"><a id="f4511e" class="mdColorValue md-white" title="Deep Orange 600" href="#void">#f4511e</a></span> </li>
-        <li class="color" style="background-color: #e64a19;"><span class="shade">700</span><span class="hex"><a id="e64a19" class="mdColorValue md-white" title="Deep Orange 700" href="#void">#e64a19</a></span> </li>
-        <li class="color" style="background-color: #d84315;"><span class="shade expanded">800</span><span class="hex"><a id="d84315" class="mdColorValue md-white" title="Deep Orange 800" href="#void">#d84315</a></span> </li>
-        <li class="color" style="background-color: #bf360c;"><span class="shade expanded">900</span><span class="hex"><a id="bf360c" class="mdColorValue md-white" title="Deep Orange 900" href="#void">#bf360c</a></span> </li>
-        <li class="color dark divide" style="background-color: #ff9e80;"><span class="shade accent">A100</span><span class="hex"><a id="ff9e80" class="mdColorValue" title="Deep Orange A100" href="#void">#ff9e80</a></span> </li>
-        <li class="color dark" style="background-color: #ff6e40;"><span class="shade accent expanded">A200</span><span class="hex"><a id="ff6e40" class="mdColorValue md-white" title="Deep Orange A200" href="#void">#ff6e40</a></span> </li>
-        <li class="color" style="background-color: #ff3d00;"><span class="shade accent expanded">A400</span><span class="hex"><a id="ff3d00" class="mdColorValue md-white" title="Deep Orange A400" href="#void">#ff3d00</a></span> </li>
-        <li class="color" style="background-color: #dd2c00;"><span class="shade accent">A700</span><span class="hex"><a id="dd2c00" class="mdColorValue md-white" title="Deep Orange A700" href="#void">#dd2c00</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Brown and Grey
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #795548;"> <span class="name">Brown</span> <span class="shade">500</span> <span class="hex"><a id="795548" class="mdColorValue md-white" title="Brown" href="#void">#795548</a></span> </li>
-        <li class="color dark" style="background-color: #efebe9;"><span class="shade expanded">50</span><span class="hex"><a id="efebe9" class="mdColorValue" title="Brown" href="#void">#efebe9</a></span> </li>
-        <li class="color dark" style="background-color: #d7ccc8;"><span class="shade">100</span><span class="hex"><a id="d7ccc8" class="mdColorValue" title="Brown" href="#void">#d7ccc8</a></span> </li>
-        <li class="color dark" style="background-color: #bcaaa4;"><span class="shade expanded">200</span><span class="hex"><a id="bcaaa4" class="mdColorValue" title="Brown" href="#void">#bcaaa4</a></span> </li>
-        <li class="color light-strong" style="background-color: #a1887f;"><span class="shade">300</span><span class="hex"><a id="a1887f" class="mdColorValue md-white" title="Brown" href="#void">#a1887f</a></span> </li>
-        <li class="color" style="background-color: #8d6e63;"><span class="shade expanded">400</span><span class="hex"><a id="8d6e63" class="mdColorValue md-white" title="Brown" href="#void">#8d6e63</a></span> </li>
-        <li class="color" style="background-color: #795548;"><span class="shade">500</span><span class="hex"><a id="795548" class="mdColorValue md-white" title="Brown" href="#void">#795548</a></span> </li>
-        <li class="color" style="background-color: #6d4c41;"><span class="shade expanded">600</span><span class="hex"><a id="6d4c41" class="mdColorValue md-white" title="Brown" href="#void">#6d4c41</a></span> </li>
-        <li class="color" style="background-color: #5d4037;"><span class="shade">700</span><span class="hex"><a id="5d4037" class="mdColorValue md-white" title="Brown" href="#void">#5d4037</a></span> </li>
-        <li class="color" style="background-color: #4e342e;"><span class="shade expanded">800</span><span class="hex"><a id="4e342e" class="mdColorValue md-white" title="Brown" href="#void">#4e342e</a></span> </li>
-        <li class="color" style="background-color: #3e2723;"><span class="shade expanded">900</span><span class="hex"><a id="3e2723" class="mdColorValue md-white" title="Brown" href="#void">#3e2723</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #9e9e9e;"> <span class="name dark-when-small">Grey</span> <span class="shade dark-when-small">500</span> <span class="hex dark-when-small"><a id="9e9e9e" class="mdColorValue md-white" title="Grey" href="#void">#9e9e9e</a></span> </li>
-        <li class="color dark" style="background-color: #fafafa;"><span class="shade expanded">50</span><span class="hex"><a id="fafafa" class="mdColorValue" title="Grey" href="#void">#fafafa</a></span> </li>
-        <li class="color dark" style="background-color: #f5f5f5;"><span class="shade">100</span><span class="hex"><a id="f5f5f5" class="mdColorValue" title="Grey" href="#void">#f5f5f5</a></span> </li>
-        <li class="color dark" style="background-color: #eeeeee;"><span class="shade expanded">200</span><span class="hex"><a id="eeeeee" class="mdColorValue" title="Grey" href="#void">#eeeeee</a></span> </li>
-        <li class="color dark" style="background-color: #e0e0e0;"><span class="shade">300</span><span class="hex"><a id="e0e0e0" class="mdColorValue" title="Grey" href="#void">#e0e0e0</a></span> </li>
-        <li class="color dark" style="background-color: #bdbdbd;"><span class="shade expanded">400</span><span class="hex"><a id="bdbdbd" class="mdColorValue" title="Grey" href="#void">#bdbdbd</a></span> </li>
-        <li class="color dark" style="background-color: #9e9e9e;"><span class="shade">500</span><span class="hex"><a id="9e9e9e" class="mdColorValue md-white" title="Grey" href="#void">#9e9e9e</a></span> </li>
-        <li class="color" style="background-color: #757575;"><span class="shade expanded">600</span><span class="hex"><a id="757575" class="mdColorValue md-white" title="Grey" href="#void">#757575</a></span> </li>
-        <li class="color" style="background-color: #616161;"><span class="shade">700</span><span class="hex"><a id="616161" class="mdColorValue md-white" title="Grey" href="#void">#616161</a></span> </li>
-        <li class="color" style="background-color: #424242;"><span class="shade expanded">800</span><span class="hex"><a id="424242" class="mdColorValue md-white" title="Grey" href="#void">#424242</a></span> </li>
-      <li class="color" style="background-color: #212121;"><span class="shade expanded">900</span><span class="hex"><a id="212121" class="mdColorValue md-white" title="Grey" href="#void">#212121</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-++++
-
-=== Blue Grey and BW
-++++
-<div class="row col-list">
-  <div class="color-palette col-lg-12">
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color main-color" style="background-color: #607d8b;"> <span class="name light-strong">Blue Grey</span> <span class="shade light-strong">500</span> <span class="hex light-strong"><a id="607d8b" class="mdColorValue md-white" title="Blue Grey" href="#void">#607d8b</a></span> </li>
-        <li class="color dark" style="background-color: #eceff1;"><span class="shade expanded">50</span><span class="hex"><a id="eceff1" class="mdColorValue" title="Blue Grey" href="#void">#eceff1</a></span> </li>
-        <li class="color dark" style="background-color: #cfd8dc;"><span class="shade">100</span><span class="hex"><a id="cfd8dc" class="mdColorValue" title="Blue Grey" href="#void">#cfd8dc</a></span> </li>
-        <li class="color dark" style="background-color: #b0bec5;"><span class="shade expanded">200</span><span class="hex"><a id="b0bec5" class="mdColorValue" title="Blue Grey" href="#void">#b0bec5</a></span> </li>
-        <li class="color dark" style="background-color: #90a4ae;"><span class="shade">300</span><span class="hex"><a id="90a4ae" class="mdColorValue" title="Blue Grey" href="#void">#90a4ae</a></span> </li>
-        <li class="color light-strong" style="background-color: #78909c;"><span class="shade expanded">400</span><span class="hex"><a id="78909c" class="mdColorValue md-white" title="Blue Grey" href="#void">#78909c</a></span> </li>
-        <li class="color" style="background-color: #607d8b;"><span class="shade">500</span><span class="hex"><a id="607d8b" class="mdColorValue md-white" title="Blue Grey" href="#void">#607d8b</a></span> </li>
-        <li class="color" style="background-color: #546e7a;"><span class="shade expanded">600</span><span class="hex"><a id="546e7a" class="mdColorValue md-white" title="Blue Grey" href="#void">#546e7a</a></span> </li>
-        <li class="color" style="background-color: #455a64;"><span class="shade">700</span><span class="hex"><a id="455a64" class="mdColorValue md-white" title="Blue Grey" href="#void">#455a64</a></span> </li>
-        <li class="color" style="background-color: #37474f;"><span class="shade expanded">800</span><span class="hex"><a id="37474f" class="mdColorValue md-white" title="Blue Grey" href="#void">#37474f</a></span> </li>
-        <li class="color" style="background-color: #263238;"><span class="shade expanded">900</span><span class="hex"><a id="263238" class="mdColorValue md-white" title="Blue Grey" href="#void">#263238</a></span> </li>
-      </ul>
-    </div>
-    <div class="color-group col-lg-6">
-      <ul>
-        <li class="color" style="background-color: #000000;"><span class="shade accent">Black</span><span class="hex"><a id="000000" class="mdColorValue md-white" title="Black" href="#void">#000000</a></span> </li>
-        <li class="color dark" style="background-color: #ffffff;"><span class="shade accent expanded">White</span><span class="hex"><a id="ffffff" class="mdColorValue" title="Black" href="#void">#ffffff</a></span> </li>
-      </ul>
-    </div>
-  </div>
-</div>
-
-<script>
-
-  $(document).on('click', '.mdColorValue', function () {
-    copyText(this.id)
-  });
-
-  function copyText(id) {
-    var copyText = id.toUpperCase();
-    var copyFrom = document.createElement('textarea');
-//  var language = 'de';
-    var language = '{{site.language}}';
-
-    if (language == 'en') {
-      responseText = 'Copied to Clipboard';
-    } else if (language == 'de') {
-      responseText = 'Kopiert zur Zwischenablage';
-    } else {
-      responseText = 'Copied to Clipboard';
-    }
-
-    copyFrom.setAttribute("style", "position:fixed;opacity:0;top:100px;left:100px;");
-    copyFrom.value = copyText;
-    document.body.appendChild(copyFrom);
-    copyFrom.select();
-    document.execCommand('copy');
-    var copied = document.createElement('div');
-    copied.setAttribute('class', 'copied');
-    copied.appendChild(document.createTextNode(responseText));
-    document.body.appendChild(copied);
-
-    setTimeout(function () {
-      document.body.removeChild(copyFrom);
-      document.body.removeChild(copied);
-    }, 1500);
-
-  } // END copyText
-
-</script>
-
-<style>
-.mdColorValue:hover {
-  color: rgba(0, 0, 0, 0.9) !important;
-  font-weight: 600 !important;
-  text-decoration: none !important;
-}
-
-div.copied {
-  position: fixed;
-  top: 100px;
-  left: 50%;
-  width: 300px;
-  text-align: center;
-  color: #FAFAFA;
-  background-color: #2196F3;
-  border: 1px solid #0D47A1;
-  padding: 10px 15px;
-  border-radius: 4px;
-  margin-left: -100px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-}
-</style>
-
-++++