From c52d5db02bb54441489f19ac0be211a0cd2f3ec0 Mon Sep 17 00:00:00 2001
From: Lars van Vianen <lars@vianen.com>
Date: Wed, 3 Jan 2024 11:18:31 +0100
Subject: [PATCH] WIP

---
 src/scss/niji/_niji_add.scss                  | 166 ++++
 src/scss/niji/_niji_background.scss           | 220 +++++
 src/scss/niji/_niji_gradients.scss            | 101 +++
 src/scss/niji/_niji_root.scss                 | 292 +++++++
 src/scss/niji/_niji_var.scss                  | 288 +++++++
 src/scss/niji/niji.scss                       |   7 +
 src/scss/standards/_tailwind.scss             | 762 ++++++++++++++++++
 .../flat_design_colors.scss                   |  72 ++
 .../flat_design_colors_full.scss              | 298 +++++++
 .../material_design_colors.scss               |  93 +++
 .../material_design_colors_full.scss          | 355 ++++++++
 11 files changed, 2654 insertions(+)
 create mode 100644 src/scss/niji/_niji_add.scss
 create mode 100644 src/scss/niji/_niji_background.scss
 create mode 100644 src/scss/niji/_niji_gradients.scss
 create mode 100644 src/scss/niji/_niji_root.scss
 create mode 100644 src/scss/niji/_niji_var.scss
 create mode 100644 src/scss/niji/niji.scss
 create mode 100644 src/scss/standards/_tailwind.scss
 create mode 100644 src/scss/standards/flat-design-colors-scss/flat_design_colors.scss
 create mode 100644 src/scss/standards/flat-design-colors-scss/flat_design_colors_full.scss
 create mode 100644 src/scss/standards/material-design-colors-scss/material_design_colors.scss
 create mode 100644 src/scss/standards/material-design-colors-scss/material_design_colors_full.scss

diff --git a/src/scss/niji/_niji_add.scss b/src/scss/niji/_niji_add.scss
new file mode 100644
index 0000000..ec91c95
--- /dev/null
+++ b/src/scss/niji/_niji_add.scss
@@ -0,0 +1,166 @@
+
+// * { 
+//     margin: 0;
+//     padding: 0;
+//     box-sizing: border-box;
+//     font-family: Sans-Serif;
+// }
+
+// body {
+//     /* position: absolute; */
+//     /* margin: 0;
+//     padding: 0; */
+//     width: 100vw;
+//     max-width: 100vw;
+//     height: 100vh;
+//     max-height: 100vh;
+// }
+
+// button {
+//     margin: 20px;
+//     padding: 10px;
+//     background-color: black;
+//     color: white;
+// }
+
+// h1 {
+//     background-color: black;
+//     color: white;
+//     width: 100px;
+//     margin: auto;
+
+// }
+
+// table, th, td {
+//     border: 1px solid white;
+// }
+// #niji_wrapper {
+//     position: relative;
+//     width: 100%;
+//     min-width: 100%;
+//     height: 100%;
+//     min-height: 100%;
+//     /* overflow: hidden; */
+//     padding: 5%;
+// }
+
+.niji_header {
+    text-align: center;
+}
+.niji_footer {
+    text-align: center;
+}
+
+
+
+.niji_table {
+    position: relative;
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    table-layout: fixed;
+}
+.niji_table tbody{
+    /* position: relative;
+    width: 100%;
+    min-width: 100%; */
+}
+.niji_row {
+    /* position: relative;
+    width: 100vw;
+    height: 10vw; */
+}
+
+.niji_row .niji_cell:nth-child(n + 8) {
+    color: white;
+    /* border: 2px solid orange;
+    margin-bottom: 1px; */
+}
+
+.niji_cell, .niji_cell_header {
+    position: relative;
+    width: 10%;
+    height: 10vw;
+    overflow: hidden;
+    margin: 0;
+    padding: 0;
+}
+
+
+
+
+/* .niji_swatch_div, .niji_cell_header_div { */
+.niji_swatch_div {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 1px solid white;
+    /* overflow: hidden; */
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -100;
+}
+
+.niji_cell_header {
+    text-align: center;
+    vertical-align: middle;
+    font-size: 10px;
+
+}
+
+.niji_cell_header_div {
+    text-align: center;
+    vertical-align: middle;
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.niji_cell_header_div_day {
+    text-align: center;
+    vertical-align: middle;
+    font-weight: 600;
+    font-size: 16px;
+    margin: 20px;
+    opacity: 0.5;
+}
+
+
+.niji_label_div {
+    position: relative;
+    overflow: hidden;
+    /* bottom: 0; */
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    /* width: 10vw;
+    height: 10vw; */
+    z-index: 10;
+
+    margin: 0;
+    padding: 5%;
+    display: flex;
+    flex-direction: column;
+    /* flex-wrap:wrap;
+    align-items: flex-end; */
+
+    justify-content: flex-end;
+}
+
+
+.niji_label_div_line_title {
+    font-weight: 600;
+    font-size: 10px;
+    overflow: hidden;
+    width: 100%;
+    height: 12px;
+}
+
+.niji_label_div_line {
+    overflow: hidden;
+    font-size: 10px;
+    width: 100%;
+    height: 12px;
+}
+
diff --git a/src/scss/niji/_niji_background.scss b/src/scss/niji/_niji_background.scss
new file mode 100644
index 0000000..0a2cb73
--- /dev/null
+++ b/src/scss/niji/_niji_background.scss
@@ -0,0 +1,220 @@
+
+/* Classes */
+
+.N1015 { background-color: $N1015; }
+.N2015 { background-color: $N2015; }
+.N3015 { background-color: $N3015; }
+.N4015 { background-color: $N4015; }
+.N5015 { background-color: $N5015; }
+.N6015 { background-color: $N6015; }
+.N7015 { background-color: $N7015; }
+.N8015 { background-color: $N8015; }
+.N9015 { background-color: $N9015; }
+.N1030 { background-color: $N1030; }
+.N2030 { background-color: $N2030; }
+.N3030 { background-color: $N3030; }
+.N4030 { background-color: $N4030; }
+.N5030 { background-color: $N5030; }
+.N6030 { background-color: $N6030; }
+.N7030 { background-color: $N7030; }
+.N8030 { background-color: $N8030; }
+.N9030 { background-color: $N9030; }
+.N1045 { background-color: $N1045; }
+.N2045 { background-color: $N2045; }
+.N3045 { background-color: $N3045; }
+.N4045 { background-color: $N4045; }
+.N5045 { background-color: $N5045; }
+.N6045 { background-color: $N6045; }
+.N7045 { background-color: $N7045; }
+.N8045 { background-color: $N8045; }
+.N9045 { background-color: $N9045; }
+.N1060 { background-color: $N1060; }
+.N2060 { background-color: $N2060; }
+.N3060 { background-color: $N3060; }
+.N4060 { background-color: $N4060; }
+.N5060 { background-color: $N5060; }
+.N6060 { background-color: $N6060; }
+.N7060 { background-color: $N7060; }
+.N8060 { background-color: $N8060; }
+.N9060 { background-color: $N9060; }
+.N1075 { background-color: $N1075; }
+.N2075 { background-color: $N2075; }
+.N3075 { background-color: $N3075; }
+.N4075 { background-color: $N4075; }
+.N5075 { background-color: $N5075; }
+.N6075 { background-color: $N6075; }
+.N7075 { background-color: $N7075; }
+.N8075 { background-color: $N8075; }
+.N9075 { background-color: $N9075; }
+.N1090 { background-color: $N1090; }
+.N2090 { background-color: $N2090; }
+.N3090 { background-color: $N3090; }
+.N4090 { background-color: $N4090; }
+.N5090 { background-color: $N5090; }
+.N6090 { background-color: $N6090; }
+.N7090 { background-color: $N7090; }
+.N8090 { background-color: $N8090; }
+.N9090 { background-color: $N9090; }
+.N1105 { background-color: $N1105; }
+.N2105 { background-color: $N2105; }
+.N3105 { background-color: $N3105; }
+.N4105 { background-color: $N4105; }
+.N5105 { background-color: $N5105; }
+.N6105 { background-color: $N6105; }
+.N7105 { background-color: $N7105; }
+.N8105 { background-color: $N8105; }
+.N9105 { background-color: $N9105; }
+.N1120 { background-color: $N1120; }
+.N2120 { background-color: $N2120; }
+.N3120 { background-color: $N3120; }
+.N4120 { background-color: $N4120; }
+.N5120 { background-color: $N5120; }
+.N6120 { background-color: $N6120; }
+.N7120 { background-color: $N7120; }
+.N8120 { background-color: $N8120; }
+.N9120 { background-color: $N9120; }
+.N1135 { background-color: $N1135; }
+.N2135 { background-color: $N2135; }
+.N3135 { background-color: $N3135; }
+.N4135 { background-color: $N4135; }
+.N5135 { background-color: $N5135; }
+.N6135 { background-color: $N6135; }
+.N7135 { background-color: $N7135; }
+.N8135 { background-color: $N8135; }
+.N9135 { background-color: $N9135; }
+.N1150 { background-color: $N1150; }
+.N2150 { background-color: $N2150; }
+.N3150 { background-color: $N3150; }
+.N4150 { background-color: $N4150; }
+.N5150 { background-color: $N5150; }
+.N6150 { background-color: $N6150; }
+.N7150 { background-color: $N7150; }
+.N8150 { background-color: $N8150; }
+.N9150 { background-color: $N9150; }
+.N1165 { background-color: $N1165; }
+.N2165 { background-color: $N2165; }
+.N3165 { background-color: $N3165; }
+.N4165 { background-color: $N4165; }
+.N5165 { background-color: $N5165; }
+.N6165 { background-color: $N6165; }
+.N7165 { background-color: $N7165; }
+.N8165 { background-color: $N8165; }
+.N9165 { background-color: $N9165; }
+.N1180 { background-color: $N1180; }
+.N2180 { background-color: $N2180; }
+.N3180 { background-color: $N3180; }
+.N4180 { background-color: $N4180; }
+.N5180 { background-color: $N5180; }
+.N6180 { background-color: $N6180; }
+.N7180 { background-color: $N7180; }
+.N8180 { background-color: $N8180; }
+.N9180 { background-color: $N9180; }
+.N1195 { background-color: $N1195; }
+.N2195 { background-color: $N2195; }
+.N3195 { background-color: $N3195; }
+.N4195 { background-color: $N4195; }
+.N5195 { background-color: $N5195; }
+.N6195 { background-color: $N6195; }
+.N7195 { background-color: $N7195; }
+.N8195 { background-color: $N8195; }
+.N9195 { background-color: $N9195; }
+.N1210 { background-color: $N1210; }
+.N2210 { background-color: $N2210; }
+.N3210 { background-color: $N3210; }
+.N4210 { background-color: $N4210; }
+.N5210 { background-color: $N5210; }
+.N6210 { background-color: $N6210; }
+.N7210 { background-color: $N7210; }
+.N8210 { background-color: $N8210; }
+.N9210 { background-color: $N9210; }
+.N1225 { background-color: $N1225; }
+.N2225 { background-color: $N2225; }
+.N3225 { background-color: $N3225; }
+.N4225 { background-color: $N4225; }
+.N5225 { background-color: $N5225; }
+.N6225 { background-color: $N6225; }
+.N7225 { background-color: $N7225; }
+.N8225 { background-color: $N8225; }
+.N9225 { background-color: $N9225; }
+.N1240 { background-color: $N1240; }
+.N2240 { background-color: $N2240; }
+.N3240 { background-color: $N3240; }
+.N4240 { background-color: $N4240; }
+.N5240 { background-color: $N5240; }
+.N6240 { background-color: $N6240; }
+.N7240 { background-color: $N7240; }
+.N8240 { background-color: $N8240; }
+.N9240 { background-color: $N9240; }
+.N1255 { background-color: $N1255; }
+.N2255 { background-color: $N2255; }
+.N3255 { background-color: $N3255; }
+.N4255 { background-color: $N4255; }
+.N5255 { background-color: $N5255; }
+.N6255 { background-color: $N6255; }
+.N7255 { background-color: $N7255; }
+.N8255 { background-color: $N8255; }
+.N9255 { background-color: $N9255; }
+.N1270 { background-color: $N1270; }
+.N2270 { background-color: $N2270; }
+.N3270 { background-color: $N3270; }
+.N4270 { background-color: $N4270; }
+.N5270 { background-color: $N5270; }
+.N6270 { background-color: $N6270; }
+.N7270 { background-color: $N7270; }
+.N8270 { background-color: $N8270; }
+.N9270 { background-color: $N9270; }
+.N1285 { background-color: $N1285; }
+.N2285 { background-color: $N2285; }
+.N3285 { background-color: $N3285; }
+.N4285 { background-color: $N4285; }
+.N5285 { background-color: $N5285; }
+.N6285 { background-color: $N6285; }
+.N7285 { background-color: $N7285; }
+.N8285 { background-color: $N8285; }
+.N9285 { background-color: $N9285; }
+.N1300 { background-color: $N1300; }
+.N2300 { background-color: $N2300; }
+.N3300 { background-color: $N3300; }
+.N4300 { background-color: $N4300; }
+.N5300 { background-color: $N5300; }
+.N6300 { background-color: $N6300; }
+.N7300 { background-color: $N7300; }
+.N8300 { background-color: $N8300; }
+.N9300 { background-color: $N9300; }
+.N1315 { background-color: $N1315; }
+.N2315 { background-color: $N2315; }
+.N3315 { background-color: $N3315; }
+.N4315 { background-color: $N4315; }
+.N5315 { background-color: $N5315; }
+.N6315 { background-color: $N6315; }
+.N7315 { background-color: $N7315; }
+.N8315 { background-color: $N8315; }
+.N9315 { background-color: $N9315; }
+.N1330 { background-color: $N1330; }
+.N2330 { background-color: $N2330; }
+.N3330 { background-color: $N3330; }
+.N4330 { background-color: $N4330; }
+.N5330 { background-color: $N5330; }
+.N6330 { background-color: $N6330; }
+.N7330 { background-color: $N7330; }
+.N8330 { background-color: $N8330; }
+.N9330 { background-color: $N9330; }
+.N1345 { background-color: $N1345; }
+.N2345 { background-color: $N2345; }
+.N3345 { background-color: $N3345; }
+.N4345 { background-color: $N4345; }
+.N5345 { background-color: $N5345; }
+.N6345 { background-color: $N6345; }
+.N7345 { background-color: $N7345; }
+.N8345 { background-color: $N8345; }
+.N9345 { background-color: $N9345; }
+.N1360 { background-color: $N1360; }
+.N2360 { background-color: $N2360; }
+.N3360 { background-color: $N3360; }
+.N4360 { background-color: $N4360; }
+.N5360 { background-color: $N5360; }
+.N6360 { background-color: $N6360; }
+.N7360 { background-color: $N7360; }
+.N8360 { background-color: $N8360; }
+.N9360 { background-color: $N9360; }
+
diff --git a/src/scss/niji/_niji_gradients.scss b/src/scss/niji/_niji_gradients.scss
new file mode 100644
index 0000000..02fe730
--- /dev/null
+++ b/src/scss/niji/_niji_gradients.scss
@@ -0,0 +1,101 @@
+
+@mixin gradient_linear_2($val1, $val2) {
+  background: linear-gradient(90deg, $val1 0%, $val2 100%);
+}
+@mixin gradient_linear_3($val1, $val2, $val3) {
+  background: linear-gradient(90deg, $val1 0%, $val2 50%, $val3 100%);
+}
+@mixin gradient_linear_4($val1, $val2, $val3, $val4) {
+  background: linear-gradient(90deg, $val1 0%, $val2 33.33%, $val3 66.67%, $val4 100%);
+}
+@mixin gradient_linear_5($val1, $val2, $val3, $val4, $val5) {
+  background: linear-gradient(90deg, $val1 0%, $val2 25%, $val3 50%, $val4 75%, $val5 100%);
+}
+@mixin gradient_linear_6($val1, $val2, $val3, $val4, $val5, $val6) {
+  background: linear-gradient(90deg, $val1 0%, $val2 20%, $val3 40%, $val4 60%, $val5 80%, $val6 100%);
+}
+
+@mixin gradient_015 { @include gradient_linear_3( $N1015, $N5015, $N9015 ); }
+@mixin gradient_030 { @include gradient_linear_3( $N1030, $N5030, $N9030 ); }
+@mixin gradient_045 { @include gradient_linear_3( $N1045, $N5045, $N9045 ); }
+@mixin gradient_060 { @include gradient_linear_3( $N1060, $N5060, $N9060 ); }
+@mixin gradient_075 { @include gradient_linear_3( $N1075, $N5075, $N9075 ); }
+@mixin gradient_090 { @include gradient_linear_3( $N1090, $N5090, $N9090 ); }
+@mixin gradient_105 { @include gradient_linear_3( $N1105, $N5105, $N9105 ); }
+@mixin gradient_120 { @include gradient_linear_3( $N1120, $N5120, $N9120 ); }
+@mixin gradient_135 { @include gradient_linear_3( $N1135, $N5135, $N9135 ); }
+@mixin gradient_150 { @include gradient_linear_3( $N1150, $N5150, $N9150 ); }
+@mixin gradient_165 { @include gradient_linear_3( $N1165, $N5165, $N9165 ); }
+@mixin gradient_180 { @include gradient_linear_3( $N1180, $N5180, $N9180 ); }
+@mixin gradient_195 { @include gradient_linear_3( $N1195, $N5195, $N9195 ); }
+@mixin gradient_210 { @include gradient_linear_3( $N1210, $N5210, $N9210 ); }
+@mixin gradient_225 { @include gradient_linear_3( $N1225, $N5225, $N9225 ); }
+@mixin gradient_240 { @include gradient_linear_3( $N1240, $N5240, $N9240 ); }
+@mixin gradient_255 { @include gradient_linear_3( $N1255, $N5255, $N9255 ); }
+@mixin gradient_270 { @include gradient_linear_3( $N1270, $N5270, $N9270 ); }
+@mixin gradient_285 { @include gradient_linear_3( $N1285, $N5285, $N9285 ); }
+@mixin gradient_300 { @include gradient_linear_3( $N1300, $N5300, $N9300 ); }
+@mixin gradient_315 { @include gradient_linear_3( $N1315, $N5315, $N9315 ); }
+@mixin gradient_330 { @include gradient_linear_3( $N1330, $N5330, $N9330 ); }
+@mixin gradient_345 { @include gradient_linear_3( $N1345, $N5345, $N9345 ); }
+@mixin gradient_360 { @include gradient_linear_3( $N1360, $N5360, $N9360 ); }
+
+
+.gradient_015 { @include gradient_015; }
+.gradient_030 { @include gradient_030; }
+.gradient_045 { @include gradient_045; }
+.gradient_060 { @include gradient_060; }
+.gradient_075 { @include gradient_075; }
+.gradient_090 { @include gradient_090; }
+.gradient_105 { @include gradient_105; }
+.gradient_120 { @include gradient_120; }
+.gradient_135 { @include gradient_135; }
+.gradient_150 { @include gradient_150; }
+.gradient_165 { @include gradient_165; }
+.gradient_180 { @include gradient_180; }
+.gradient_195 { @include gradient_195; }
+.gradient_210 { @include gradient_210; }
+.gradient_225 { @include gradient_225; }
+.gradient_240 { @include gradient_240; }
+.gradient_255 { @include gradient_255; }
+.gradient_270 { @include gradient_270; }
+.gradient_285 { @include gradient_285; }
+.gradient_300 { @include gradient_300; }
+.gradient_315 { @include gradient_315; }
+.gradient_330 { @include gradient_330; }
+.gradient_345 { @include gradient_345; }
+.gradient_360 { @include gradient_360; }
+
+
+
+@mixin gradient_1x { @include gradient_linear_5( $N1360, $N1090, $N1180, $N1270, $N1360 ); }
+@mixin gradient_2x { @include gradient_linear_5( $N2360, $N2090, $N2180, $N2270, $N2360 ); }
+@mixin gradient_3x { @include gradient_linear_5( $N3360, $N3090, $N3180, $N3270, $N3360 ); }
+@mixin gradient_4x { @include gradient_linear_5( $N4360, $N4090, $N4180, $N4270, $N4360 ); }
+@mixin gradient_5x { @include gradient_linear_5( $N5360, $N5090, $N5180, $N5270, $N5360 ); }
+@mixin gradient_6x { @include gradient_linear_5( $N6360, $N6090, $N6180, $N6270, $N6360 ); }
+@mixin gradient_7x { @include gradient_linear_5( $N7360, $N7090, $N7180, $N7270, $N7360 ); }
+@mixin gradient_8x { @include gradient_linear_5( $N8360, $N8090, $N8180, $N8270, $N8360 ); }
+@mixin gradient_9x { @include gradient_linear_5( $N9360, $N9090, $N9180, $N9270, $N9360 ); }
+
+.gradient_1x { @include gradient_1x; }
+.gradient_2x { @include gradient_2x; }
+.gradient_3x { @include gradient_3x; }
+.gradient_4x { @include gradient_4x; }
+.gradient_5x { @include gradient_5x; }
+.gradient_6x { @include gradient_6x; }
+.gradient_7x { @include gradient_7x; }
+.gradient_8x { @include gradient_8x; }
+.gradient_9x { @include gradient_9x; }
+
+
+
+@mixin gradient_x { @include gradient_linear_4( $N1240, $N5240, $N5360, $N9360 ); }
+.gradient_x { @include gradient_x; }
+
+@mixin gradient_gnbu { @include gradient_linear_5( $N5120, $N5150, $N5180, $N5210, $N5240 ); }
+.gradient_gnbu { @include gradient_gnbu; }
+
+
+@mixin gradient_linear_d120 { @include gradient_linear_5( $N1120, $N3150, $N5180, $N7210, $N9240 ); }
+.gradient_linear_d120 { @include gradient_linear_d120; }
\ No newline at end of file
diff --git a/src/scss/niji/_niji_root.scss b/src/scss/niji/_niji_root.scss
new file mode 100644
index 0000000..dda2be8
--- /dev/null
+++ b/src/scss/niji/_niji_root.scss
@@ -0,0 +1,292 @@
+/* Root Variables */
+:root {
+
+    /* Vermillion */
+    /* ----------------------------------------------------------------------- */
+    --N1015: rgb(98.2% 85.7% 86.7%);
+    --N2015: rgb(93.4% 75.4% 76.9%);
+    --N3015: rgb(88.5% 65.1% 67.3%);
+    --N4015: rgb(83.2% 55% 58%);
+    --N5015: rgb(77.8% 44.8% 49%);
+    --N6015: rgb(65.5% 38.8% 42.1%);
+    --N7015: rgb(53.6% 32.9% 35.3%);
+    --N8015: rgb(42.2% 27.2% 28.8%);
+    --N9015: rgb(31.2% 21.5% 22.5%);
+  
+    /* Orange */
+    /* ----------------------------------------------------------------------- */
+    --N1030: rgb(97.9% 86% 84.5%);
+    --N2030: rgb(93.1% 75.8% 73.7%);
+    --N3030: rgb(87.9% 65.7% 63.1%);
+    --N4030: rgb(82.5% 55.8% 52.9%);
+    --N5030: rgb(76.8% 45.9% 43%);
+    --N6030: rgb(64.7% 39.6% 37.2%);
+    --N7030: rgb(53.1% 33.5% 31.6%);
+    --N8030: rgb(41.8% 27.6% 26.1%);
+    --N9030: rgb(30.9% 21.8% 20.7%);
+  
+    /* Amber */
+    /* ----------------------------------------------------------------------- */
+    --N1045: rgb(97.1% 86.5% 82.6%);
+    --N2045: rgb(91.8% 76.5% 70.9%);
+    --N3045: rgb(86.3% 66.7% 59.5%);
+    --N4045: rgb(80.5% 57.1% 48.4%);
+    --N5045: rgb(74.5% 47.6% 37.8%);
+    --N6045: rgb(62.8% 41% 32.9%);
+    --N7045: rgb(51.6% 34.6% 28.3%);
+    --N8045: rgb(40.7% 28.3% 23.7%);
+    --N9045: rgb(30.3% 22.2% 19.2%);
+  
+    /* Yellow */
+    /* ----------------------------------------------------------------------- */
+    --N1060: rgb(95.7% 87.1% 81.1%);
+    --N2060: rgb(89.8% 77.5% 68.7%);
+    --N3060: rgb(83.7% 68% 56.6%);
+    --N4060: rgb(77.4% 58.8% 44.9%);
+    --N5060: rgb(70.8% 49.7% 33.5%);
+    --N6060: rgb(59.9% 42.7% 29.5%);
+    --N7060: rgb(49.3% 35.8% 25.6%);
+    --N8060: rgb(39% 29.2% 21.8%);
+    --N9060: rgb(29.2% 22.8% 18%);
+  
+    /* Lime */
+    /* ----------------------------------------------------------------------- */
+    --N1075: rgb(93.8% 87.8% 80.1%);
+    --N2075: rgb(87.1% 78.5% 67.3%);
+    --N3075: rgb(80.3% 69.5% 54.7%);
+    --N4075: rgb(73.3% 60.6% 42.5%);
+    --N5075: rgb(66.1% 52% 30.6%);
+    --N6075: rgb(56.1% 44.5% 27.2%);
+    --N7075: rgb(46.3% 37.2% 23.9%);
+    --N8075: rgb(36.9% 30.2% 20.5%);
+    --N9075: rgb(27.8% 23.4% 17.3%);
+  
+    /* Ecru */
+    /* ----------------------------------------------------------------------- */
+    --N1090: rgb(91.6% 88.6% 79.8%);
+    --N2090: rgb(84% 79.7% 66.7%);
+    --N3090: rgb(76.2% 71% 54%);
+    --N4090: rgb(68.5% 62.5% 41.5%);
+    --N5090: rgb(60.6% 54.2% 29.3%);
+    --N6090: rgb(51.6% 46.3% 26.2%);
+    --N7090: rgb(42.8% 38.6% 23.1%);
+    --N8090: rgb(34.3% 31.1% 20%);
+    --N9090: rgb(26.1% 24% 17%);
+  
+    /* Olive */
+    /* ----------------------------------------------------------------------- */
+    --N1105: rgb(89.2% 89.3% 80%);
+    --N2105: rgb(80.4% 80.8% 67.1%);
+    --N3105: rgb(71.7% 72.4% 54.4%);
+    --N4105: rgb(63.1% 64.2% 42.1%);
+    --N5105: rgb(54.4% 56.2% 29.9%);
+    --N6105: rgb(46.6% 47.9% 26.7%);
+    --N7105: rgb(38.9% 39.8% 23.5%);
+    --N8105: rgb(31.5% 32% 20.3%);
+    --N9105: rgb(24.3% 24.6% 17.1%);
+  
+    /* Green */
+    /* ----------------------------------------------------------------------- */
+    --N1120: rgb(86.7% 90% 80.9%);
+    --N2120: rgb(76.8% 81.8% 68.3%);
+    --N3120: rgb(67% 73.7% 56%);
+    --N4120: rgb(57.3% 65.7% 44.1%);
+    --N5120: rgb(47.8% 57.9% 32.4%);
+    --N6120: rgb(41.1% 49.3% 28.7%);
+    --N7120: rgb(34.7% 40.9% 25%);
+    --N8120: rgb(28.4% 32.9% 21.4%);
+    --N9120: rgb(22.3% 25.1% 17.8%);
+  
+    /* Forest */
+    /* ----------------------------------------------------------------------- */
+    --N1135: rgb(84.2% 90.6% 82.2%);
+    --N2135: rgb(73.2% 82.6% 70.3%);
+    --N3135: rgb(62.2% 74.7% 58.7%);
+    --N4135: rgb(51.4% 67% 47.4%);
+    --N5135: rgb(40.7% 59.3% 36.4%);
+    --N6135: rgb(35.4% 50.4% 31.9%);
+    --N7135: rgb(30.3% 41.8% 27.5%);
+    --N8135: rgb(25.3% 33.5% 23.2%);
+    --N9135: rgb(20.4% 25.5% 18.9%);
+  
+    /* Jade */
+    /* ----------------------------------------------------------------------- */
+    --N1150: rgb(82% 91.1% 84.1%);
+    --N2150: rgb(69.8% 83.3% 73%);
+    --N3150: rgb(57.7% 75.6% 62.3%);
+    --N4150: rgb(45.6% 67.9% 51.8%);
+    --N5150: rgb(33.1% 60.3% 41.6%);
+    --N6150: rgb(29.5% 51.3% 36.1%);
+    --N7150: rgb(25.9% 42.5% 30.7%);
+    --N8150: rgb(22.2% 34% 25.5%);
+    --N9150: rgb(18.5% 25.9% 20.4%);
+  
+    /* Mint */
+    /* ----------------------------------------------------------------------- */
+    --N1165: rgb(80.2% 91.4% 86.2%);
+    --N2165: rgb(67% 83.7% 76.2%);
+    --N3165: rgb(53.8% 76.1% 66.5%);
+    --N4165: rgb(40.1% 68.5% 56.9%);
+    --N5165: rgb(25.1% 61% 47.7%);
+    --N6165: rgb(23.5% 51.8% 41%);
+    --N7165: rgb(21.6% 42.9% 34.5%);
+    --N8165: rgb(19.3% 34.3% 28.2%);
+    --N9165: rgb(16.8% 26.1% 22.1%);
+  
+    /* Cyan */
+    /* ----------------------------------------------------------------------- */
+    --N1180: rgb(78.9% 91.5% 88.5%);
+    --N2180: rgb(65% 83.9% 79.6%);
+    --N3180: rgb(50.7% 76.4% 70.9%);
+    --N4180: rgb(35.6% 68.8% 62.4%);
+    --N5180: rgb(16.3% 61.3% 54.1%);
+    --N6180: rgb(17.6% 52.1% 46.2%);
+    --N7180: rgb(17.7% 43.1% 38.5%);
+    --N8180: rgb(16.9% 34.5% 31.1%);
+    --N9180: rgb(15.5% 26.2% 24%);
+  
+    /* Teal */
+    /* ----------------------------------------------------------------------- */
+    --N1195: rgb(78.3% 91.5% 90.9%);
+    --N2195: rgb(63.9% 83.9% 83.1%);
+    --N3195: rgb(49% 76.3% 75.4%);
+    --N4195: rgb(32.6% 68.8% 67.9%);
+    --N5195: rgb(6.3% 61.2% 60.6%);
+    --N6195: rgb(12.6% 52% 51.4%);
+    --N7195: rgb(14.9% 43.1% 42.6%);
+    --N8195: rgb(15.4% 34.5% 34%);
+    --N9195: rgb(14.8% 26.2% 25.8%);
+  
+    /* Capri */
+    /* ----------------------------------------------------------------------- */
+    --N1210: rgb(78.4% 91.3% 93.1%);
+    --N2210: rgb(64% 83.6% 86.3%);
+    --N3210: rgb(49% 75.9% 79.6%);
+    --N4210: rgb(32.1% 68.4% 73.1%);
+    --N5210: rgb(0.31% 60.8% 66.6%);
+    --N6210: rgb(11% 51.7% 56.3%);
+    --N7210: rgb(14.2% 42.8% 46.3%);
+    --N8210: rgb(15.2% 34.3% 36.7%);
+    --N9210: rgb(14.7% 26% 27.6%);
+  
+    /* Cerulean */
+    /* ----------------------------------------------------------------------- */
+    --N1225: rgb(79.3% 90.9% 95%);
+    --N2225: rgb(65.3% 83.1% 89.1%);
+    --N3225: rgb(50.7% 75.3% 83.3%);
+    --N4225: rgb(34.5% 67.6% 77.5%);
+    --N5225: rgb(10% 60% 71.8%);
+    --N6225: rgb(14.6% 51% 60.5%);
+    --N7225: rgb(16.3% 42.3% 49.6%);
+    --N8225: rgb(16.4% 33.9% 39.1%);
+    --N9225: rgb(15.4% 25.8% 29.1%);
+  
+    /* Blue */
+    /* ----------------------------------------------------------------------- */
+    --N1240: rgb(80.8% 90.4% 96.4%);
+    --N2240: rgb(67.6% 82.3% 91.2%);
+    --N3240: rgb(54% 74.4% 86.1%);
+    --N4240: rgb(39.4% 66.5% 81%);
+    --N5240: rgb(21.1% 58.9% 75.8%);
+    --N6240: rgb(21.2% 50.1% 63.8%);
+    --N7240: rgb(20.5% 41.5% 52.1%);
+    --N8240: rgb(19% 33.3% 40.9%);
+    --N9240: rgb(16.9% 25.4% 30.2%);
+  
+    /* Azure */
+    /* ----------------------------------------------------------------------- */
+    --N1255: rgb(82.9% 89.7% 97.4%);
+    --N2255: rgb(70.8% 81.4% 92.6%);
+    --N3255: rgb(58.6% 73.2% 87.9%);
+    --N4255: rgb(45.8% 65.2% 83.2%);
+    --N5255: rgb(31.6% 57.3% 78.4%);
+    --N6255: rgb(28.7% 48.8% 65.9%);
+    --N7255: rgb(25.7% 40.5% 53.7%);
+    --N8255: rgb(22.3% 32.5% 42.1%);
+    --N9255: rgb(18.8% 24.9% 31%);
+  
+    /* Violet */
+    /* ----------------------------------------------------------------------- */
+    --N1270: rgb(85.3% 89% 97.7%);
+    --N2270: rgb(74.6% 80.3% 93.1%);
+    --N3270: rgb(63.8% 71.8% 88.6%);
+    --N4270: rgb(52.9% 63.5% 84%);
+    --N5270: rgb(41.4% 55.4% 79.4%);
+    --N6270: rgb(36.3% 47.2% 66.6%);
+    --N7270: rgb(31.2% 39.3% 54.3%);
+    --N8270: rgb(26.1% 31.7% 42.5%);
+    --N9270: rgb(21% 24.3% 31.3%);
+  
+    /* Purple */
+    /* ----------------------------------------------------------------------- */
+    --N1285: rgb(88% 88.2% 97.5%);
+    --N2285: rgb(78.6% 79.2% 92.8%);
+    --N3285: rgb(69.3% 70.3% 88.1%);
+    --N4285: rgb(59.9% 61.6% 83.3%);
+    --N5285: rgb(50.5% 53.2% 78.6%);
+    --N6285: rgb(43.4% 45.5% 66%);
+    --N7285: rgb(36.5% 38% 53.9%);
+    --N8285: rgb(29.8% 30.7% 42.2%);
+    --N9285: rgb(23.3% 23.7% 31%);
+  
+    /* Magenta */
+    /* ----------------------------------------------------------------------- */
+    --N1300: rgb(90.6% 87.5% 96.6%);
+    --N2300: rgb(82.6% 78% 91.5%);
+    --N3300: rgb(74.5% 68.8% 86.4%);
+    --N4300: rgb(66.6% 59.7% 81.3%);
+    --N5300: rgb(58.6% 50.9% 76.2%);
+    --N6300: rgb(49.9% 43.6% 64.1%);
+    --N7300: rgb(41.5% 36.5% 52.4%);
+    --N8300: rgb(33.3% 29.7% 41.1%);
+    --N9300: rgb(25.4% 23.1% 30.4%);
+  
+    /* Cerise */
+    /* ----------------------------------------------------------------------- */
+    --N1315: rgb(93% 86.8% 95.2%);
+    --N2315: rgb(86.1% 77% 89.5%);
+    --N3315: rgb(79.3% 67.4% 83.7%);
+    --N4315: rgb(72.4% 57.9% 78.1%);
+    --N5315: rgb(65.5% 48.6% 72.4%);
+    --N6315: rgb(55.5% 41.8% 61%);
+    --N7315: rgb(45.8% 35.1% 50%);
+    --N8315: rgb(36.4% 28.7% 39.4%);
+    --N9315: rgb(27.4% 22.5% 29.3%);
+  
+    /* Rose */
+    /* ----------------------------------------------------------------------- */
+    --N1330: rgb(95.1% 86.2% 93.4%);
+    --N2330: rgb(89.2% 76.1% 86.8%);
+    --N3330: rgb(83.2% 66.2% 80.3%);
+    --N4330: rgb(77.1% 56.4% 73.8%);
+    --N5330: rgb(71% 46.6% 67.4%);
+    --N6330: rgb(59.9% 40.2% 57%);
+    --N7330: rgb(49.2% 34% 46.9%);
+    --N8330: rgb(38.9% 27.9% 37.1%);
+    --N9330: rgb(29% 22% 27.8%);
+  
+    /* Pink */
+    /* ----------------------------------------------------------------------- */
+    --N1345: rgb(96.7% 85.9% 91.3%);
+    --N2345: rgb(91.5% 75.6% 83.7%);
+    --N3345: rgb(86.1% 65.4% 76.2%);
+    --N4345: rgb(80.5% 55.3% 68.8%);
+    --N5345: rgb(74.9% 45.2% 61.6%);
+    --N6345: rgb(63.1% 39.1% 52.2%);
+    --N7345: rgb(51.7% 33.1% 43.2%);
+    --N8345: rgb(40.7% 27.3% 34.5%);
+    --N9345: rgb(30.2% 21.6% 26.1%);
+  
+    /* Red */
+    /* ----------------------------------------------------------------------- */
+    --N1360: rgb(97.7% 85.7% 89%);
+    --N2360: rgb(92.9% 75.3% 80.3%);
+    --N3360: rgb(87.9% 65% 71.8%);
+    --N4360: rgb(82.6% 54.8% 63.4%);
+    --N5360: rgb(77.1% 44.5% 55.3%);
+    --N6360: rgb(65% 38.6% 47.2%);
+    --N7360: rgb(53.2% 32.8% 39.3%);
+    --N8360: rgb(41.8% 27.1% 31.6%);
+    --N9360: rgb(30.9% 21.5% 24.3%);
+}
+  
\ No newline at end of file
diff --git a/src/scss/niji/_niji_var.scss b/src/scss/niji/_niji_var.scss
new file mode 100644
index 0000000..94c2fca
--- /dev/null
+++ b/src/scss/niji/_niji_var.scss
@@ -0,0 +1,288 @@
+
+/* Vermillion */
+/* ----------------------------------------------------------------------- */
+$N1015: rgb(98.2% 85.7% 86.7%);
+$N2015: rgb(93.4% 75.4% 76.9%);
+$N3015: rgb(88.5% 65.1% 67.3%);
+$N4015: rgb(83.2% 55% 58%);
+$N5015: rgb(77.8% 44.8% 49%);
+$N6015: rgb(65.5% 38.8% 42.1%);
+$N7015: rgb(53.6% 32.9% 35.3%);
+$N8015: rgb(42.2% 27.2% 28.8%);
+$N9015: rgb(31.2% 21.5% 22.5%);
+
+/* Orange */
+/* ----------------------------------------------------------------------- */
+$N1030: rgb(97.9% 86% 84.5%);
+$N2030: rgb(93.1% 75.8% 73.7%);
+$N3030: rgb(87.9% 65.7% 63.1%);
+$N4030: rgb(82.5% 55.8% 52.9%);
+$N5030: rgb(76.8% 45.9% 43%);
+$N6030: rgb(64.7% 39.6% 37.2%);
+$N7030: rgb(53.1% 33.5% 31.6%);
+$N8030: rgb(41.8% 27.6% 26.1%);
+$N9030: rgb(30.9% 21.8% 20.7%);
+
+/* Amber */
+/* ----------------------------------------------------------------------- */
+$N1045: rgb(97.1% 86.5% 82.6%);
+$N2045: rgb(91.8% 76.5% 70.9%);
+$N3045: rgb(86.3% 66.7% 59.5%);
+$N4045: rgb(80.5% 57.1% 48.4%);
+$N5045: rgb(74.5% 47.6% 37.8%);
+$N6045: rgb(62.8% 41% 32.9%);
+$N7045: rgb(51.6% 34.6% 28.3%);
+$N8045: rgb(40.7% 28.3% 23.7%);
+$N9045: rgb(30.3% 22.2% 19.2%);
+
+/* Yellow */
+/* ----------------------------------------------------------------------- */
+$N1060: rgb(95.7% 87.1% 81.1%);
+$N2060: rgb(89.8% 77.5% 68.7%);
+$N3060: rgb(83.7% 68% 56.6%);
+$N4060: rgb(77.4% 58.8% 44.9%);
+$N5060: rgb(70.8% 49.7% 33.5%);
+$N6060: rgb(59.9% 42.7% 29.5%);
+$N7060: rgb(49.3% 35.8% 25.6%);
+$N8060: rgb(39% 29.2% 21.8%);
+$N9060: rgb(29.2% 22.8% 18%);
+
+/* Lime */
+/* ----------------------------------------------------------------------- */
+$N1075: rgb(93.8% 87.8% 80.1%);
+$N2075: rgb(87.1% 78.5% 67.3%);
+$N3075: rgb(80.3% 69.5% 54.7%);
+$N4075: rgb(73.3% 60.6% 42.5%);
+$N5075: rgb(66.1% 52% 30.6%);
+$N6075: rgb(56.1% 44.5% 27.2%);
+$N7075: rgb(46.3% 37.2% 23.9%);
+$N8075: rgb(36.9% 30.2% 20.5%);
+$N9075: rgb(27.8% 23.4% 17.3%);
+
+/* Ecru */
+/* ----------------------------------------------------------------------- */
+$N1090: rgb(91.6% 88.6% 79.8%);
+$N2090: rgb(84% 79.7% 66.7%);
+$N3090: rgb(76.2% 71% 54%);
+$N4090: rgb(68.5% 62.5% 41.5%);
+$N5090: rgb(60.6% 54.2% 29.3%);
+$N6090: rgb(51.6% 46.3% 26.2%);
+$N7090: rgb(42.8% 38.6% 23.1%);
+$N8090: rgb(34.3% 31.1% 20%);
+$N9090: rgb(26.1% 24% 17%);
+
+/* Olive */
+/* ----------------------------------------------------------------------- */
+$N1105: rgb(89.2% 89.3% 80%);
+$N2105: rgb(80.4% 80.8% 67.1%);
+$N3105: rgb(71.7% 72.4% 54.4%);
+$N4105: rgb(63.1% 64.2% 42.1%);
+$N5105: rgb(54.4% 56.2% 29.9%);
+$N6105: rgb(46.6% 47.9% 26.7%);
+$N7105: rgb(38.9% 39.8% 23.5%);
+$N8105: rgb(31.5% 32% 20.3%);
+$N9105: rgb(24.3% 24.6% 17.1%);
+
+/* Green */
+/* ----------------------------------------------------------------------- */
+$N1120: rgb(86.7% 90% 80.9%);
+$N2120: rgb(76.8% 81.8% 68.3%);
+$N3120: rgb(67% 73.7% 56%);
+$N4120: rgb(57.3% 65.7% 44.1%);
+$N5120: rgb(47.8% 57.9% 32.4%);
+$N6120: rgb(41.1% 49.3% 28.7%);
+$N7120: rgb(34.7% 40.9% 25%);
+$N8120: rgb(28.4% 32.9% 21.4%);
+$N9120: rgb(22.3% 25.1% 17.8%);
+
+/* Forest */
+/* ----------------------------------------------------------------------- */
+$N1135: rgb(84.2% 90.6% 82.2%);
+$N2135: rgb(73.2% 82.6% 70.3%);
+$N3135: rgb(62.2% 74.7% 58.7%);
+$N4135: rgb(51.4% 67% 47.4%);
+$N5135: rgb(40.7% 59.3% 36.4%);
+$N6135: rgb(35.4% 50.4% 31.9%);
+$N7135: rgb(30.3% 41.8% 27.5%);
+$N8135: rgb(25.3% 33.5% 23.2%);
+$N9135: rgb(20.4% 25.5% 18.9%);
+
+/* Jade */
+/* ----------------------------------------------------------------------- */
+$N1150: rgb(82% 91.1% 84.1%);
+$N2150: rgb(69.8% 83.3% 73%);
+$N3150: rgb(57.7% 75.6% 62.3%);
+$N4150: rgb(45.6% 67.9% 51.8%);
+$N5150: rgb(33.1% 60.3% 41.6%);
+$N6150: rgb(29.5% 51.3% 36.1%);
+$N7150: rgb(25.9% 42.5% 30.7%);
+$N8150: rgb(22.2% 34% 25.5%);
+$N9150: rgb(18.5% 25.9% 20.4%);
+
+/* Mint */
+/* ----------------------------------------------------------------------- */
+$N1165: rgb(80.2% 91.4% 86.2%);
+$N2165: rgb(67% 83.7% 76.2%);
+$N3165: rgb(53.8% 76.1% 66.5%);
+$N4165: rgb(40.1% 68.5% 56.9%);
+$N5165: rgb(25.1% 61% 47.7%);
+$N6165: rgb(23.5% 51.8% 41%);
+$N7165: rgb(21.6% 42.9% 34.5%);
+$N8165: rgb(19.3% 34.3% 28.2%);
+$N9165: rgb(16.8% 26.1% 22.1%);
+
+/* Cyan */
+/* ----------------------------------------------------------------------- */
+$N1180: rgb(78.9% 91.5% 88.5%);
+$N2180: rgb(65% 83.9% 79.6%);
+$N3180: rgb(50.7% 76.4% 70.9%);
+$N4180: rgb(35.6% 68.8% 62.4%);
+$N5180: rgb(16.3% 61.3% 54.1%);
+$N6180: rgb(17.6% 52.1% 46.2%);
+$N7180: rgb(17.7% 43.1% 38.5%);
+$N8180: rgb(16.9% 34.5% 31.1%);
+$N9180: rgb(15.5% 26.2% 24%);
+
+/* Teal */
+/* ----------------------------------------------------------------------- */
+$N1195: rgb(78.3% 91.5% 90.9%);
+$N2195: rgb(63.9% 83.9% 83.1%);
+$N3195: rgb(49% 76.3% 75.4%);
+$N4195: rgb(32.6% 68.8% 67.9%);
+$N5195: rgb(6.3% 61.2% 60.6%);
+$N6195: rgb(12.6% 52% 51.4%);
+$N7195: rgb(14.9% 43.1% 42.6%);
+$N8195: rgb(15.4% 34.5% 34%);
+$N9195: rgb(14.8% 26.2% 25.8%);
+
+/* Capri */
+/* ----------------------------------------------------------------------- */
+$N1210: rgb(78.4% 91.3% 93.1%);
+$N2210: rgb(64% 83.6% 86.3%);
+$N3210: rgb(49% 75.9% 79.6%);
+$N4210: rgb(32.1% 68.4% 73.1%);
+$N5210: rgb(0.31% 60.8% 66.6%);
+$N6210: rgb(11% 51.7% 56.3%);
+$N7210: rgb(14.2% 42.8% 46.3%);
+$N8210: rgb(15.2% 34.3% 36.7%);
+$N9210: rgb(14.7% 26% 27.6%);
+
+/* Cerulean */
+/* ----------------------------------------------------------------------- */
+$N1225: rgb(79.3% 90.9% 95%);
+$N2225: rgb(65.3% 83.1% 89.1%);
+$N3225: rgb(50.7% 75.3% 83.3%);
+$N4225: rgb(34.5% 67.6% 77.5%);
+$N5225: rgb(10% 60% 71.8%);
+$N6225: rgb(14.6% 51% 60.5%);
+$N7225: rgb(16.3% 42.3% 49.6%);
+$N8225: rgb(16.4% 33.9% 39.1%);
+$N9225: rgb(15.4% 25.8% 29.1%);
+
+/* Blue */
+/* ----------------------------------------------------------------------- */
+$N1240: rgb(80.8% 90.4% 96.4%);
+$N2240: rgb(67.6% 82.3% 91.2%);
+$N3240: rgb(54% 74.4% 86.1%);
+$N4240: rgb(39.4% 66.5% 81%);
+$N5240: rgb(21.1% 58.9% 75.8%);
+$N6240: rgb(21.2% 50.1% 63.8%);
+$N7240: rgb(20.5% 41.5% 52.1%);
+$N8240: rgb(19% 33.3% 40.9%);
+$N9240: rgb(16.9% 25.4% 30.2%);
+
+/* Azure */
+/* ----------------------------------------------------------------------- */
+$N1255: rgb(82.9% 89.7% 97.4%);
+$N2255: rgb(70.8% 81.4% 92.6%);
+$N3255: rgb(58.6% 73.2% 87.9%);
+$N4255: rgb(45.8% 65.2% 83.2%);
+$N5255: rgb(31.6% 57.3% 78.4%);
+$N6255: rgb(28.7% 48.8% 65.9%);
+$N7255: rgb(25.7% 40.5% 53.7%);
+$N8255: rgb(22.3% 32.5% 42.1%);
+$N9255: rgb(18.8% 24.9% 31%);
+
+/* Violet */
+/* ----------------------------------------------------------------------- */
+$N1270: rgb(85.3% 89% 97.7%);
+$N2270: rgb(74.6% 80.3% 93.1%);
+$N3270: rgb(63.8% 71.8% 88.6%);
+$N4270: rgb(52.9% 63.5% 84%);
+$N5270: rgb(41.4% 55.4% 79.4%);
+$N6270: rgb(36.3% 47.2% 66.6%);
+$N7270: rgb(31.2% 39.3% 54.3%);
+$N8270: rgb(26.1% 31.7% 42.5%);
+$N9270: rgb(21% 24.3% 31.3%);
+
+/* Purple */
+/* ----------------------------------------------------------------------- */
+$N1285: rgb(88% 88.2% 97.5%);
+$N2285: rgb(78.6% 79.2% 92.8%);
+$N3285: rgb(69.3% 70.3% 88.1%);
+$N4285: rgb(59.9% 61.6% 83.3%);
+$N5285: rgb(50.5% 53.2% 78.6%);
+$N6285: rgb(43.4% 45.5% 66%);
+$N7285: rgb(36.5% 38% 53.9%);
+$N8285: rgb(29.8% 30.7% 42.2%);
+$N9285: rgb(23.3% 23.7% 31%);
+
+/* Magenta */
+/* ----------------------------------------------------------------------- */
+$N1300: rgb(90.6% 87.5% 96.6%);
+$N2300: rgb(82.6% 78% 91.5%);
+$N3300: rgb(74.5% 68.8% 86.4%);
+$N4300: rgb(66.6% 59.7% 81.3%);
+$N5300: rgb(58.6% 50.9% 76.2%);
+$N6300: rgb(49.9% 43.6% 64.1%);
+$N7300: rgb(41.5% 36.5% 52.4%);
+$N8300: rgb(33.3% 29.7% 41.1%);
+$N9300: rgb(25.4% 23.1% 30.4%);
+
+/* Cerise */
+/* ----------------------------------------------------------------------- */
+$N1315: rgb(93% 86.8% 95.2%);
+$N2315: rgb(86.1% 77% 89.5%);
+$N3315: rgb(79.3% 67.4% 83.7%);
+$N4315: rgb(72.4% 57.9% 78.1%);
+$N5315: rgb(65.5% 48.6% 72.4%);
+$N6315: rgb(55.5% 41.8% 61%);
+$N7315: rgb(45.8% 35.1% 50%);
+$N8315: rgb(36.4% 28.7% 39.4%);
+$N9315: rgb(27.4% 22.5% 29.3%);
+
+/* Rose */
+/* ----------------------------------------------------------------------- */
+$N1330: rgb(95.1% 86.2% 93.4%);
+$N2330: rgb(89.2% 76.1% 86.8%);
+$N3330: rgb(83.2% 66.2% 80.3%);
+$N4330: rgb(77.1% 56.4% 73.8%);
+$N5330: rgb(71% 46.6% 67.4%);
+$N6330: rgb(59.9% 40.2% 57%);
+$N7330: rgb(49.2% 34% 46.9%);
+$N8330: rgb(38.9% 27.9% 37.1%);
+$N9330: rgb(29% 22% 27.8%);
+
+/* Pink */
+/* ----------------------------------------------------------------------- */
+$N1345: rgb(96.7% 85.9% 91.3%);
+$N2345: rgb(91.5% 75.6% 83.7%);
+$N3345: rgb(86.1% 65.4% 76.2%);
+$N4345: rgb(80.5% 55.3% 68.8%);
+$N5345: rgb(74.9% 45.2% 61.6%);
+$N6345: rgb(63.1% 39.1% 52.2%);
+$N7345: rgb(51.7% 33.1% 43.2%);
+$N8345: rgb(40.7% 27.3% 34.5%);
+$N9345: rgb(30.2% 21.6% 26.1%);
+
+/* Red */
+/* ----------------------------------------------------------------------- */
+$N1360: rgb(97.7% 85.7% 89%);
+$N2360: rgb(92.9% 75.3% 80.3%);
+$N3360: rgb(87.9% 65% 71.8%);
+$N4360: rgb(82.6% 54.8% 63.4%);
+$N5360: rgb(77.1% 44.5% 55.3%);
+$N6360: rgb(65% 38.6% 47.2%);
+$N7360: rgb(53.2% 32.8% 39.3%);
+$N8360: rgb(41.8% 27.1% 31.6%);
+$N9360: rgb(30.9% 21.5% 24.3%);
diff --git a/src/scss/niji/niji.scss b/src/scss/niji/niji.scss
new file mode 100644
index 0000000..5cf378a
--- /dev/null
+++ b/src/scss/niji/niji.scss
@@ -0,0 +1,7 @@
+
+
+
+@import "_niji_var.scss";
+@import "_niji_root.scss";
+@import "_niji_background.scss";
+@import "_niji_gradients.scss";
diff --git a/src/scss/standards/_tailwind.scss b/src/scss/standards/_tailwind.scss
new file mode 100644
index 0000000..0f76932
--- /dev/null
+++ b/src/scss/standards/_tailwind.scss
@@ -0,0 +1,762 @@
+// Copyright 2023 Scape Agency BV
+
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+
+// http://www.apache.org/licenses/LICENSE-2.0
+
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+
+// ============================================================================
+// Color | Tailwind
+// ============================================================================
+
+
+// Color | Tailwind | Base
+// ============================================================================
+
+$transparent: "transparent";
+$black: "#000000";
+$white: "#ffffff";
+
+
+// Color | Tailwind | Red
+// ============================================================================
+
+$red: "#f44336";
+$red-50: "#ffebee";
+$red-100: "#ffcdd2";
+$red-200: "#ef9a9a";
+$red-300: "#e57373";
+$red-400: "#ef5350";
+$red-500: "#f44336";
+$red-600: "#e53935";
+$red-700: "#d32f2f";
+$red-800: "#c62828";
+$red-900: "#b71c1c";
+$red-100-accent: "#ff8a80";
+$red-200-accent: "#ff5252";
+$red-400-accent: "#ff1744";
+$red-700-accent: "#d50000";
+
+
+// Color | Tailwind | Pink
+// ============================================================================
+
+$pink: "#e91e63";
+$pink-50: "#fce4ec";
+$pink-100: "#f8bbd0";
+$pink-200: "#f48fb1";
+$pink-300: "#f06292";
+$pink-400: "#ec407a";
+$pink-500: "#e91e63";
+$pink-600: "#d81b60";
+$pink-700: "#c2185b";
+$pink-800: "#ad1457";
+$pink-900: "#880e4f";
+$pink-100-accent: "#ff80ab";
+$pink-200-accent: "#ff4081";
+$pink-400-accent: "#f50057";
+$pink-700-accent: "#c51162";
+
+
+// Color | Tailwind | Purple
+// ============================================================================
+
+$purple: "#9c27b0";
+$purple-50: "#f3e5f5";
+$purple-100: "#e1bee7";
+$purple-200: "#ce93d8";
+$purple-300: "#ba68c8";
+$purple-400: "#ab47bc";
+$purple-500: "#9c27b0";
+$purple-600: "#8e24aa";
+$purple-700: "#7b1fa2";
+$purple-800: "#6a1b9a";
+$purple-900: "#4a148c";
+$purple-100-accent: "#ea80fc";
+$purple-200-accent: "#e040fb";
+$purple-400-accent: "#d500f9";
+$purple-700-accent: "#aa00ff";
+
+
+// Color | Tailwind | Deep Purple
+// ============================================================================
+
+$deep-purple: "#673ab7";
+$deep-purple-50: "#ede7f6";
+$deep-purple-100: "#d1c4e9";
+$deep-purple-200: "#b39ddb";
+$deep-purple-300: "#9575cd";
+$deep-purple-400: "#7e57c2";
+$deep-purple-500: "#673ab7";
+$deep-purple-600: "#5e35b1";
+$deep-purple-700: "#512da8";
+$deep-purple-800: "#4527a0";
+$deep-purple-900: "#311b92";
+$deep-purple-100-accent: "#b388ff";
+$deep-purple-200-accent: "#7c4dff";
+$deep-purple-400-accent: "#651fff";
+$deep-purple-700-accent: "#6200ea";
+
+
+// Color | Tailwind | Indigo
+// ============================================================================
+
+$indigo: "#3f51b5";
+$indigo-50: "#e8eaf6";
+$indigo-100: "#c5cae9";
+$indigo-200: "#9fa8da";
+$indigo-300: "#7986cb";
+$indigo-400: "#5c6bc0";
+$indigo-500: "#3f51b5";
+$indigo-600: "#3949ab";
+$indigo-700: "#303f9f";
+$indigo-800: "#283593";
+$indigo-900: "#1a237e";
+$indigo-100-accent: "#8c9eff";
+$indigo-200-accent: "#536dfe";
+$indigo-400-accent: "#3d5afe";
+$indigo-700-accent: "#304ffe";
+
+
+// Color | Tailwind | Blue
+// ============================================================================
+
+$blue: "#2196f3";
+$blue-50: "#e3f2fd";
+$blue-100: "#bbdefb";
+$blue-200: "#90caf9";
+$blue-300: "#64b5f6";
+$blue-400: "#42a5f5";
+$blue-500: "#2196f3";
+$blue-600: "#1e88e5";
+$blue-700: "#1976d2";
+$blue-800: "#1565c0";
+$blue-900: "#0d47a1";
+$blue-100-accent: "#82b1ff";
+$blue-200-accent: "#448aff";
+$blue-400-accent: "#2979ff";
+$blue-700-accent: "#2962ff";
+
+
+// Color | Tailwind | Light Blue
+// ============================================================================
+
+$light-blue: "#03a9f4";
+$light-blue-50: "#e1f5fe";
+$light-blue-100: "#b3e5fc";
+$light-blue-200: "#81d4fa";
+$light-blue-300: "#4fc3f7";
+$light-blue-400: "#29b6f6";
+$light-blue-500: "#03a9f4";
+$light-blue-600: "#039be5";
+$light-blue-700: "#0288d1";
+$light-blue-800: "#0277bd";
+$light-blue-900: "#01579b";
+$light-blue-100-accent: "#80d8ff";
+$light-blue-200-accent: "#40c4ff";
+$light-blue-400-accent: "#00b0ff";
+$light-blue-700-accent: "#0091ea";
+
+
+// Color | Tailwind | Cyan
+// ============================================================================
+
+$cyan: "#00bcd4";
+$cyan-50: "#e0f7fa";
+$cyan-100: "#b2ebf2";
+$cyan-200: "#80deea";
+$cyan-300: "#4dd0e1";
+$cyan-400: "#26c6da";
+$cyan-500: "#00bcd4";
+$cyan-600: "#00acc1";
+$cyan-700: "#0097a7";
+$cyan-800: "#00838f";
+$cyan-900: "#006064";
+$cyan-100-accent: "#84ffff";
+$cyan-200-accent: "#18ffff";
+$cyan-400-accent: "#00e5ff";
+$cyan-700-accent: "#00b8d4";
+
+
+// Color | Tailwind | Teal
+// ============================================================================
+
+$teal: "#009688";
+$teal-50: "#e0f2f1";
+$teal-100: "#b2dfdb";
+$teal-200: "#80cbc4";
+$teal-300: "#4db6ac";
+$teal-400: "#26a69a";
+$teal-500: "#009688";
+$teal-600: "#00897b";
+$teal-700: "#00796b";
+$teal-800: "#00695c";
+$teal-900: "#004d40";
+$teal-100-accent: "#a7ffeb";
+$teal-200-accent: "#64ffda";
+$teal-400-accent: "#1de9b6";
+$teal-700-accent: "#00bfa5";
+
+
+// Color | Tailwind | Green
+// ============================================================================
+
+$green: "#4caf50";
+$green-50: "#e8f5e9";
+$green-100: "#c8e6c9";
+$green-200: "#a5d6a7";
+$green-300: "#81c784";
+$green-400: "#66bb6a";
+$green-500: "#4caf50";
+$green-600: "#43a047";
+$green-700: "#388e3c";
+$green-800: "#2e7d32";
+$green-900: "#1b5e20";
+$green-100-accent: "#b9f6ca";
+$green-200-accent: "#69f0ae";
+$green-400-accent: "#00e676";
+$green-700-accent: "#00c853";
+
+
+// Color | Tailwind | Light Green
+// ============================================================================
+
+$light-green: "#8bc34a";
+$light-green-50: "#f1f8e9";
+$light-green-100: "#dcedc8";
+$light-green-200: "#c5e1a5";
+$light-green-300: "#aed581";
+$light-green-400: "#9ccc65";
+$light-green-500: "#8bc34a";
+$light-green-600: "#7cb342";
+$light-green-700: "#689f38";
+$light-green-800: "#558b2f";
+$light-green-900: "#33691e";
+$light-green-100-accent: "#ccff90";
+$light-green-200-accent: "#b2ff59";
+$light-green-400-accent: "#76ff03";
+$light-green-700-accent: "#64dd17";
+
+
+// Color | Tailwind | Lime
+// ============================================================================
+
+$lime: "#cddc39";
+$lime-50: "#f9fbe7";
+$lime-100: "#f0f4c3";
+$lime-200: "#e6ee9c";
+$lime-300: "#dce775";
+$lime-400: "#d4e157";
+$lime-500: "#cddc39";
+$lime-600: "#c0ca33";
+$lime-700: "#afb42b";
+$lime-800: "#9e9d24";
+$lime-900: "#827717";
+$lime-100-accent: "#f4ff81";
+$lime-200-accent: "#eeff41";
+$lime-400-accent: "#c6ff00";
+$lime-700-accent: "#aeea00";
+
+
+// Color | Tailwind | Yellow
+// ============================================================================
+
+$yellow: "#ffeb3b";
+$yellow-50: "#fffde7";
+$yellow-100: "#fff9c4";
+$yellow-200: "#fff59d";
+$yellow-300: "#fff176";
+$yellow-400: "#ffee58";
+$yellow-500: "#ffeb3b";
+$yellow-600: "#fdd835";
+$yellow-700: "#fbc02d";
+$yellow-800: "#f9a825";
+$yellow-900: "#f57f17";
+$yellow-100-accent: "#ffff8d";
+$yellow-200-accent: "#ffff00";
+$yellow-400-accent: "#ffea00";
+$yellow-700-accent: "#ffd600";
+
+
+// Color | Tailwind | Amber
+// ============================================================================
+
+$amber: "#ffc107";
+$amber-50: "#fff8e1";
+$amber-100: "#ffecb3";
+$amber-200: "#ffe082";
+$amber-300: "#ffd54f";
+$amber-400: "#ffca28";
+$amber-500: "#ffc107";
+$amber-600: "#ffb300";
+$amber-700: "#ffa000";
+$amber-800: "#ff8f00";
+$amber-900: "#ff6f00";
+$amber-100-accent: "#ffe57f";
+$amber-200-accent: "#ffd740";
+$amber-400-accent: "#ffc400";
+$amber-700-accent: "#ffab00";
+
+
+// Color | Tailwind | Orange
+// ============================================================================
+
+$orange: "#ff9800";
+$orange-50: "#fff3e0";
+$orange-100: "#ffe0b2";
+$orange-200: "#ffcc80";
+$orange-300: "#ffb74d";
+$orange-400: "#ffa726";
+$orange-500: "#ff9800";
+$orange-600: "#fb8c00";
+$orange-700: "#f57c00";
+$orange-800: "#ef6c00";
+$orange-900: "#e65100";
+$orange-100-accent: "#ffd180";
+$orange-200-accent: "#ffab40";
+$orange-400-accent: "#ff9100";
+$orange-700-accent: "#ff6d00";
+
+
+// Color | Tailwind | Deep Orange
+// ============================================================================
+
+$deep-orange: "#ff5722";
+$deep-orange-50: "#fbe9e7";
+$deep-orange-100: "#ffccbc";
+$deep-orange-200: "#ffab91";
+$deep-orange-300: "#ff8a65";
+$deep-orange-400: "#ff7043";
+$deep-orange-500: "#ff5722";
+$deep-orange-600: "#f4511e";
+$deep-orange-700: "#e64a19";
+$deep-orange-800: "#d84315";
+$deep-orange-900: "#bf360c";
+$deep-orange-100-accent: "#ff9e80";
+$deep-orange-200-accent: "#ff6e40";
+$deep-orange-400-accent: "#ff3d00";
+$deep-orange-700-accent: "#dd2c00";
+
+
+// Color | Tailwind | Brown
+// ============================================================================
+
+$brown: "#795548";
+$brown-50: "#efebe9";
+$brown-100: "#d7ccc8";
+$brown-200: "#bcaaa4";
+$brown-300: "#a1887f";
+$brown-400: "#8d6e63";
+$brown-500: "#795548";
+$brown-600: "#6d4c41";
+$brown-700: "#5d4037";
+$brown-800: "#4e342e";
+$brown-900: "#3e2723";
+
+
+// Color | Tailwind | Grey
+// ============================================================================
+
+$grey: "#9e9e9e";
+$grey-50: "#fafafa";
+$grey-100: "#f5f5f5";
+$grey-200: "#eeeeee";
+$grey-300: "#e0e0e0";
+$grey-400: "#bdbdbd";
+$grey-500: "#9e9e9e";
+$grey-600: "#757575";
+$grey-700: "#616161";
+$grey-800: "#424242";
+$grey-900: "#212121";
+
+
+// Color | Tailwind | Blue Grey
+// ============================================================================
+
+$blue-grey: "#607d8b";
+$blue-grey-50: "#eceff1";
+$blue-grey-100: "#cfd8dc";
+$blue-grey-200: "#b0bec5";
+$blue-grey-300: "#90a4ae";
+$blue-grey-400: "#78909c";
+$blue-grey-500: "#607d8b";
+$blue-grey-600: "#546e7a";
+$blue-grey-700: "#455a64";
+$blue-grey-800: "#37474f";
+$blue-grey-900: "#263238";
+
+
+// Color | Tailwind | Red Contrast
+// ============================================================================
+
+$red-contrast: "white";
+$red-50-contrast: "black";
+$red-100-contrast: "black";
+$red-200-contrast: "black";
+$red-300-contrast: "black";
+$red-400-contrast: "black";
+$red-500-contrast: "white";
+$red-600-contrast: "white";
+$red-700-contrast: "white";
+$red-800-contrast: "white";
+$red-900-contrast: "white";
+$red-100-accent-contrast: "black";
+$red-200-accent-contrast: "white";
+$red-400-accent-contrast: "white";
+$red-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Pink Contrast
+// ============================================================================
+
+$pink-contrast: "white";
+$pink-50-contrast: "black";
+$pink-100-contrast: "black";
+$pink-200-contrast: "black";
+$pink-300-contrast: "black";
+$pink-400-contrast: "black";
+$pink-500-contrast: "white";
+$pink-600-contrast: "white";
+$pink-700-contrast: "white";
+$pink-800-contrast: "white";
+$pink-900-contrast: "white";
+$pink-100-accent-contrast: "black";
+$pink-200-accent-contrast: "white";
+$pink-400-accent-contrast: "white";
+$pink-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Purple Contrast
+// ============================================================================
+
+$purple-contrast: "white";
+$purple-50-contrast: "black";
+$purple-100-contrast: "black";
+$purple-200-contrast: "black";
+$purple-300-contrast: "white";
+$purple-400-contrast: "white";
+$purple-500-contrast: "white";
+$purple-600-contrast: "white";
+$purple-700-contrast: "white";
+$purple-800-contrast: "white";
+$purple-900-contrast: "white";
+$purple-100-accent-contrast: "black";
+$purple-200-accent-contrast: "white";
+$purple-400-accent-contrast: "white";
+$purple-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Deep Purple Contrast
+// ============================================================================
+
+$deep-purple-contrast: "white";
+$deep-purple-50-contrast: "black";
+$deep-purple-100-contrast: "black";
+$deep-purple-200-contrast: "black";
+$deep-purple-300-contrast: "white";
+$deep-purple-400-contrast: "white";
+$deep-purple-500-contrast: "white";
+$deep-purple-600-contrast: "white";
+$deep-purple-700-contrast: "white";
+$deep-purple-800-contrast: "white";
+$deep-purple-900-contrast: "white";
+$deep-purple-100-accent-contrast: "black";
+$deep-purple-200-accent-contrast: "white";
+$deep-purple-400-accent-contrast: "white";
+$deep-purple-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Indigo Contrast
+// ============================================================================
+
+$indigo-contrast: "white";
+$indigo-50-contrast: "black";
+$indigo-100-contrast: "black";
+$indigo-200-contrast: "black";
+$indigo-300-contrast: "white";
+$indigo-400-contrast: "white";
+$indigo-500-contrast: "white";
+$indigo-600-contrast: "white";
+$indigo-700-contrast: "white";
+$indigo-800-contrast: "white";
+$indigo-900-contrast: "white";
+$indigo-100-accent-contrast: "black";
+$indigo-200-accent-contrast: "white";
+$indigo-400-accent-contrast: "white";
+$indigo-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Blue Contrast
+// ============================================================================
+
+$blue-contrast: "white";
+$blue-50-contrast: "black";
+$blue-100-contrast: "black";
+$blue-200-contrast: "black";
+$blue-300-contrast: "black";
+$blue-400-contrast: "black";
+$blue-500-contrast: "white";
+$blue-600-contrast: "white";
+$blue-700-contrast: "white";
+$blue-800-contrast: "white";
+$blue-900-contrast: "white";
+$blue-100-accent-contrast: "black";
+$blue-200-accent-contrast: "white";
+$blue-400-accent-contrast: "white";
+$blue-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Light Blue Contrast
+// ============================================================================
+
+$light-blue-contrast: "white";
+$light-blue-50-contrast: "black";
+$light-blue-100-contrast: "black";
+$light-blue-200-contrast: "black";
+$light-blue-300-contrast: "black";
+$light-blue-400-contrast: "black";
+$light-blue-500-contrast: "white";
+$light-blue-600-contrast: "white";
+$light-blue-700-contrast: "white";
+$light-blue-800-contrast: "white";
+$light-blue-900-contrast: "white";
+$light-blue-100-accent-contrast: "black";
+$light-blue-200-accent-contrast: "black";
+$light-blue-400-accent-contrast: "black";
+$light-blue-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Cyan Contrast
+// ============================================================================
+
+$cyan-contrast: "white";
+$cyan-50-contrast: "black";
+$cyan-100-contrast: "black";
+$cyan-200-contrast: "black";
+$cyan-300-contrast: "black";
+$cyan-400-contrast: "black";
+$cyan-500-contrast: "white";
+$cyan-600-contrast: "white";
+$cyan-700-contrast: "white";
+$cyan-800-contrast: "white";
+$cyan-900-contrast: "white";
+$cyan-100-accent-contrast: "black";
+$cyan-200-accent-contrast: "black";
+$cyan-400-accent-contrast: "black";
+$cyan-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Teal Contrast
+// ============================================================================
+
+$teal-contrast: "white";
+$teal-50-contrast: "black";
+$teal-100-contrast: "black";
+$teal-200-contrast: "black";
+$teal-300-contrast: "black";
+$teal-400-contrast: "black";
+$teal-500-contrast: "white";
+$teal-600-contrast: "white";
+$teal-700-contrast: "white";
+$teal-800-contrast: "white";
+$teal-900-contrast: "white";
+$teal-100-accent-contrast: "black";
+$teal-200-accent-contrast: "black";
+$teal-400-accent-contrast: "black";
+$teal-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Green Contrast
+// ============================================================================
+
+$green-contrast: "white";
+$green-50-contrast: "black";
+$green-100-contrast: "black";
+$green-200-contrast: "black";
+$green-300-contrast: "black";
+$green-400-contrast: "black";
+$green-500-contrast: "white";
+$green-600-contrast: "white";
+$green-700-contrast: "white";
+$green-800-contrast: "white";
+$green-900-contrast: "white";
+$green-100-accent-contrast: "black";
+$green-200-accent-contrast: "black";
+$green-400-accent-contrast: "black";
+$green-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Light Green Contrast
+// ============================================================================
+
+$light-green-contrast: "black";
+$light-green-50-contrast: "black";
+$light-green-100-contrast: "black";
+$light-green-200-contrast: "black";
+$light-green-300-contrast: "black";
+$light-green-400-contrast: "black";
+$light-green-500-contrast: "black";
+$light-green-600-contrast: "black";
+$light-green-700-contrast: "black";
+$light-green-800-contrast: "white";
+$light-green-900-contrast: "white";
+$light-green-100-accent-contrast: "black";
+$light-green-200-accent-contrast: "black";
+$light-green-400-accent-contrast: "black";
+$light-green-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Lime Contrast
+// ============================================================================
+
+$lime-contrast: "black";
+$lime-50-contrast: "black";
+$lime-100-contrast: "black";
+$lime-200-contrast: "black";
+$lime-300-contrast: "black";
+$lime-400-contrast: "black";
+$lime-500-contrast: "black";
+$lime-600-contrast: "black";
+$lime-700-contrast: "black";
+$lime-800-contrast: "black";
+$lime-900-contrast: "white";
+$lime-100-accent-contrast: "black";
+$lime-200-accent-contrast: "black";
+$lime-400-accent-contrast: "black";
+$lime-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Yellow Contrast
+// ============================================================================
+
+$yellow-contrast: "black";
+$yellow-50-contrast: "black";
+$yellow-100-contrast: "black";
+$yellow-200-contrast: "black";
+$yellow-300-contrast: "black";
+$yellow-400-contrast: "black";
+$yellow-500-contrast: "black";
+$yellow-600-contrast: "black";
+$yellow-700-contrast: "black";
+$yellow-800-contrast: "black";
+$yellow-900-contrast: "black";
+$yellow-100-accent-contrast: "black";
+$yellow-200-accent-contrast: "black";
+$yellow-400-accent-contrast: "black";
+$yellow-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Amber Contrast
+// ============================================================================
+
+$amber-contrast: "black";
+$amber-50-contrast: "black";
+$amber-100-contrast: "black";
+$amber-200-contrast: "black";
+$amber-300-contrast: "black";
+$amber-400-contrast: "black";
+$amber-500-contrast: "black";
+$amber-600-contrast: "black";
+$amber-700-contrast: "black";
+$amber-800-contrast: "black";
+$amber-900-contrast: "black";
+$amber-100-accent-contrast: "black";
+$amber-200-accent-contrast: "black";
+$amber-400-accent-contrast: "black";
+$amber-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Orange Contrast
+// ============================================================================
+
+$orange-contrast: "black";
+$orange-50-contrast: "black";
+$orange-100-contrast: "black";
+$orange-200-contrast: "black";
+$orange-300-contrast: "black";
+$orange-400-contrast: "black";
+$orange-500-contrast: "black";
+$orange-600-contrast: "black";
+$orange-700-contrast: "black";
+$orange-800-contrast: "white";
+$orange-900-contrast: "white";
+$orange-100-accent-contrast: "black";
+$orange-200-accent-contrast: "black";
+$orange-400-accent-contrast: "black";
+$orange-700-accent-contrast: "black";
+
+
+// Color | Tailwind | Deep Orange Contrast
+// ============================================================================
+
+$deep-orange-contrast: "white";
+$deep-orange-50-contrast: "black";
+$deep-orange-100-contrast: "black";
+$deep-orange-200-contrast: "black";
+$deep-orange-300-contrast: "black";
+$deep-orange-400-contrast: "black";
+$deep-orange-500-contrast: "white";
+$deep-orange-600-contrast: "white";
+$deep-orange-700-contrast: "white";
+$deep-orange-800-contrast: "white";
+$deep-orange-900-contrast: "white";
+$deep-orange-100-accent-contrast: "black";
+$deep-orange-200-accent-contrast: "black";
+$deep-orange-400-accent-contrast: "white";
+$deep-orange-700-accent-contrast: "white";
+
+
+// Color | Tailwind | Brown Contrast
+// ============================================================================
+
+$brown-contrast: "white";
+$brown-50-contrast: "black";
+$brown-100-contrast: "black";
+$brown-200-contrast: "black";
+$brown-300-contrast: "white";
+$brown-400-contrast: "white";
+$brown-500-contrast: "white";
+$brown-600-contrast: "white";
+$brown-700-contrast: "white";
+$brown-800-contrast: "white";
+$brown-900-contrast: "white";
+
+
+// Color | Tailwind | Grey Contrast
+// ============================================================================
+
+$grey-contrast: "black";
+$grey-50-contrast: "black";
+$grey-100-contrast: "black";
+$grey-200-contrast: "black";
+$grey-300-contrast: "black";
+$grey-400-contrast: "black";
+$grey-500-contrast: "black";
+$grey-600-contrast: "white";
+$grey-700-contrast: "white";
+$grey-800-contrast: "white";
+$grey-900-contrast: "white";
+
+
+// Color | Tailwind | Blue Grey Contrast
+// ============================================================================
+
+$blue-grey-contrast: "white";
+$blue-grey-50-contrast: "black";
+$blue-grey-100-contrast: "black";
+$blue-grey-200-contrast: "black";
+$blue-grey-300-contrast: "black";
+$blue-grey-400-contrast: "white";
+$blue-grey-500-contrast: "white";
+$blue-grey-600-contrast: "white";
+$blue-grey-700-contrast: "white";
+$blue-grey-800-contrast: "white";
+$blue-grey-900-contrast: "white";
diff --git a/src/scss/standards/flat-design-colors-scss/flat_design_colors.scss b/src/scss/standards/flat-design-colors-scss/flat_design_colors.scss
new file mode 100644
index 0000000..cb5246a
--- /dev/null
+++ b/src/scss/standards/flat-design-colors-scss/flat_design_colors.scss
@@ -0,0 +1,72 @@
+/*  Flat color palette downloaded from
+ *  http://htmlcolorcodes.com/color-charts/
+ *
+ *  Check out our powerful color picker
+ *  http://htmlcolorcodes.com/color-picker/
+ *
+ *  Want to learn more about colors in SCSS?
+ *  http://htmlcolorcodes.com/tutorials/
+ *
+ *  - - - - - - - - - - - - - - - - - - 
+ *  Credits:
+ *
+ *  Original color palette by
+ *  http://designmodo.github.io/Flat-UI/
+ *
+ *  - - - - - - - - - - - - - - - - - -
+ *  How to use:
+ *  
+ *  Include this file with your other .scss files:
+ *
+ *  @import "flat_colors";
+ *  
+ *  and use the color variables in your stylesheets:
+ *	
+ *  .class {
+ *    color: $turquoise;
+ *  }
+ */
+
+/* Teals */
+$turquoise: #1abc9c;
+$green-sea: #16a085;
+
+/* Greens */
+$emerald: #2ecc71;
+$nephritis: #27ae60;
+
+/* Blues */
+$peter-river: #3498db;
+$belize-hole: #2980b9;
+
+/* Purples */
+$amethyst: #9b59b6;
+$wisteria: #8e44ad;
+
+/* Blacks */
+$wet-asphalt: #34495e;
+$midnight-blue: #2c3e50;
+
+/* Yellows */
+$sunflower: #f1c40f;
+$orange: #f39c12;
+
+/* Oranges */
+$carrot: #e67e22;
+$pumpkin: #d35400;
+
+/* Reds */
+$alizarin: #e74c3c;
+$pomegranate: #c0392b;
+
+/* Whites */
+$clouds: #ecf0f1;
+$silver: #bdc3c7;
+
+/* Grays */
+$concrete: #95a5a6;
+$asbestos: #7f8c8d;
+
+/*  Want more? Get the full flat color palette at
+ *  http://htmlcolorcodes.com/color-charts/
+ */
\ No newline at end of file
diff --git a/src/scss/standards/flat-design-colors-scss/flat_design_colors_full.scss b/src/scss/standards/flat-design-colors-scss/flat_design_colors_full.scss
new file mode 100644
index 0000000..97f5849
--- /dev/null
+++ b/src/scss/standards/flat-design-colors-scss/flat_design_colors_full.scss
@@ -0,0 +1,298 @@
+/*  Flat color palette (full) downloaded from
+ *  http://htmlcolorcodes.com/color-charts/
+ *
+ *  Check out our powerful color picker
+ *  http://htmlcolorcodes.com/color-picker/
+ *
+ *  Want to learn more about colors in SCSS?
+ *  http://htmlcolorcodes.com/tutorials/
+ *
+ *  - - - - - - - - - - - - - - - - - - 
+ *  Credits:
+ *
+ *  Original color palette by
+ *  http://designmodo.github.io/Flat-UI/
+ *
+ *  - - - - - - - - - - - - - - - - - -
+ *  How to use:
+ *  
+ *  Include this file with your other .scss files:
+ *
+ *  @import "flat_colors_full";
+ *  
+ *  and use the color variables in your stylesheets:
+ *	
+ *  .class {
+ *    color: $turquoise-500;
+ *  }
+ *
+ *  - - - - - - - - - - - - - - - - - -
+ *  Note:
+ *
+ *  $color and $color-500 are the same, simply there
+ *  for your convenience.
+ */
+
+/* Turquoise */
+$turquoise: #1abc9c;
+$turquoise-50: #e8f8f5;
+$turquoise-100: #d1f2eb;
+$turquoise-200: #a3e4d7;
+$turquoise-300: #76d7c4;
+$turquoise-400: #48c9b0;
+$turquoise-500: #1abc9c;
+$turquoise-600: #17a589;
+$turquoise-700: #148f77;
+$turquoise-800: #117864;
+$turquoise-900: #0e6251;
+
+/* Green Sea */
+$green-sea: #16a085;
+$green-sea-50: #e8f6f3;
+$green-sea-100: #d0ece7;
+$green-sea-200: #a2d9ce;
+$green-sea-300: #73c6b6;
+$green-sea-400: #45b39d;
+$green-sea-500: #16a085;
+$green-sea-600: #138d75;
+$green-sea-700: #117a65;
+$green-sea-800: #0e6655;
+$green-sea-900: #0b5345;
+
+/* Emerald */
+$emerald: #2ecc71;
+$emerald-50: #eafaf1;
+$emerald-100: #d5f5e3;
+$emerald-200: #abebc6;
+$emerald-300: #82e0aa;
+$emerald-400: #58d68d;
+$emerald-500: #2ecc71;
+$emerald-600: #28b463;
+$emerald-700: #239b56;
+$emerald-800: #1d8348;
+$emerald-900: #186a3b;
+
+/* Nephritis */
+$nephritis: #27ae60;
+$nephritis-50: #e9f7ef;
+$nephritis-100: #d4efdf;
+$nephritis-200: #a9dfbf;
+$nephritis-300: #7dcea0;
+$nephritis-400: #52be80;
+$nephritis-500: #27ae60;
+$nephritis-600: #229954;
+$nephritis-700: #1e8449;
+$nephritis-800: #196f3d;
+$nephritis-900: #145a32;
+
+/* Peter River */
+$peter-river: #3498db;
+$peter-river-50: #ebf5fb;
+$peter-river-100: #d6eaf8;
+$peter-river-200: #aed6f1;
+$peter-river-300: #85c1e9;
+$peter-river-400: #5dade2;
+$peter-river-500: #3498db;
+$peter-river-600: #2e86c1;
+$peter-river-700: #2874a6;
+$peter-river-800: #21618c;
+$peter-river-900: #1b4f72;
+
+/* Belize Hole */
+$belize-hole: #2980b9;
+$belize-hole-50: #eaf2f8;
+$belize-hole-100: #d4e6f1;
+$belize-hole-200: #a9cce3;
+$belize-hole-300: #7fb3d5;
+$belize-hole-400: #5499c7;
+$belize-hole-500: #2980b9;
+$belize-hole-600: #2471a3;
+$belize-hole-700: #1f618d;
+$belize-hole-800: #1a5276;
+$belize-hole-900: #154360;
+
+/* Amethyst */
+$amethyst: #9b59b6;
+$amethyst-50: #f5eef8;
+$amethyst-100: #ebdef0;
+$amethyst-200: #d7bde2;
+$amethyst-300: #c39bd3;
+$amethyst-400: #af7ac5;
+$amethyst-500: #9b59b6;
+$amethyst-600: #884ea0;
+$amethyst-700: #76448a;
+$amethyst-800: #633974;
+$amethyst-900: #512e5f;
+
+/* Wisteria */
+$wisteria: #8e44ad;
+$wisteria-50: #f4ecf7;
+$wisteria-100: #e8daef;
+$wisteria-200: #d2b4de;
+$wisteria-300: #bb8fce;
+$wisteria-400: #a569bd;
+$wisteria-500: #8e44ad;
+$wisteria-600: #7d3c98;
+$wisteria-700: #6c3483;
+$wisteria-800: #5b2c6f;
+$wisteria-900: #4a235a;
+
+/* Wet Asphalt */
+$wet-asphalt: #34495e;
+$wet-asphalt-50: #ebedef;
+$wet-asphalt-100: #d6dbdf;
+$wet-asphalt-200: #aeb6bf;
+$wet-asphalt-300: #85929e;
+$wet-asphalt-400: #5d6d7e;
+$wet-asphalt-500: #34495e;
+$wet-asphalt-600: #2e4053;
+$wet-asphalt-700: #283747;
+$wet-asphalt-800: #212f3c;
+$wet-asphalt-900: #1b2631;
+
+/* Midnight Blue */
+$midnight-blue: #2c3e50;
+$midnight-blue-50: #eaecee;
+$midnight-blue-100: #d5d8dc;
+$midnight-blue-200: #abb2b9;
+$midnight-blue-300: #808b96;
+$midnight-blue-400: #566573;
+$midnight-blue-500: #2c3e50;
+$midnight-blue-600: #273746;
+$midnight-blue-700: #212f3d;
+$midnight-blue-800: #1c2833;
+$midnight-blue-900: #17202a;
+
+/* Sunflower */
+$sunflower: #f1c40f;
+$sunflower-50: #fef9e7;
+$sunflower-100: #fcf3cf;
+$sunflower-200: #f9e79f;
+$sunflower-300: #f7dc6f;
+$sunflower-400: #f4d03f;
+$sunflower-500: #f1c40f;
+$sunflower-600: #d4ac0d;
+$sunflower-700: #b7950b;
+$sunflower-800: #9a7d0a;
+$sunflower-900: #7d6608;
+
+/* Orange */
+$orange: #f39c12;
+$orange-50: #fef5e7;
+$orange-100: #fdebd0;
+$orange-200: #fad7a0;
+$orange-300: #f8c471;
+$orange-400: #f5b041;
+$orange-500: #f39c12;
+$orange-600: #d68910;
+$orange-700: #b9770e;
+$orange-800: #9c640c;
+$orange-900: #7e5109;
+
+/* Carrot */
+$carrot: #e67e22;
+$carrot-50: #fdf2e9;
+$carrot-100: #fae5d3;
+$carrot-200: #f5cba7;
+$carrot-300: #f0b27a;
+$carrot-400: #eb984e;
+$carrot-500: #e67e22;
+$carrot-600: #ca6f1e;
+$carrot-700: #af601a;
+$carrot-800: #935116;
+$carrot-900: #784212;
+
+/* Pumpkin */
+$pumpkin: #d35400;
+$pumpkin-50: #fbeee6;
+$pumpkin-100: #f6ddcc;
+$pumpkin-200: #edbb99;
+$pumpkin-300: #e59866;
+$pumpkin-400: #dc7633;
+$pumpkin-500: #d35400;
+$pumpkin-600: #ba4a00;
+$pumpkin-700: #a04000;
+$pumpkin-800: #873600;
+$pumpkin-900: #6e2c00;
+
+/* Alizarin */
+$alizarin: #e74c3c;
+$alizarin-50: #fdedec;
+$alizarin-100: #fadbd8;
+$alizarin-200: #f5b7b1;
+$alizarin-300: #f1948a;
+$alizarin-400: #ec7063;
+$alizarin-500: #e74c3c;
+$alizarin-600: #cb4335;
+$alizarin-700: #b03a2e;
+$alizarin-800: #943126;
+$alizarin-900: #78281f;
+
+/* Pomegranate */
+$pomegranate: #c0392b;
+$pomegranate-50: #f9ebea;
+$pomegranate-100: #f2d7d5;
+$pomegranate-200: #e6b0aa;
+$pomegranate-300: #d98880;
+$pomegranate-400: #cd6155;
+$pomegranate-500: #c0392b;
+$pomegranate-600: #a93226;
+$pomegranate-700: #922b21;
+$pomegranate-800: #7b241c;
+$pomegranate-900: #641e16;
+
+/* Clouds */
+$clouds: #ecf0f1;
+$clouds-50: #fdfefe;
+$clouds-100: #fbfcfc;
+$clouds-200: #f7f9f9;
+$clouds-300: #f4f6f7;
+$clouds-400: #f0f3f4;
+$clouds-500: #ecf0f1;
+$clouds-600: #d0d3d4;
+$clouds-700: #b3b6b7;
+$clouds-800: #979a9a;
+$clouds-900: #7b7d7d;
+
+/* Silver */
+$silver: #bdc3c7;
+$silver-50: #f8f9f9;
+$silver-100: #f2f3f4;
+$silver-200: #e5e7e9;
+$silver-300: #d7dbdd;
+$silver-400: #cacfd2;
+$silver-500: #bdc3c7;
+$silver-600: #a6acaf;
+$silver-700: #909497;
+$silver-800: #797d7f;
+$silver-900: #626567;
+
+/* Concrete */
+$concrete: #95a5a6;
+$concrete-50: #f4f6f6;
+$concrete-100: #eaeded;
+$concrete-200: #d5dbdb;
+$concrete-300: #bfc9ca;
+$concrete-400: #aab7b8;
+$concrete-500: #95a5a6;
+$concrete-600: #839192;
+$concrete-700: #717d7e;
+$concrete-800: #5f6a6a;
+$concrete-900: #4d5656;
+
+/* Asbestos */
+$asbestos: #7f8c8d;
+$asbestos-50: #f2f4f4;
+$asbestos-100: #e5e8e8;
+$asbestos-200: #ccd1d1;
+$asbestos-300: #b2babb;
+$asbestos-400: #99a3a4;
+$asbestos-500: #7f8c8d;
+$asbestos-600: #707b7c;
+$asbestos-700: #616a6b;
+$asbestos-800: #515a5a;
+$asbestos-900: #424949;
+
+/*  Want more? Check our our other color palettes at
+ *  http://htmlcolorcodes.com/color-charts/
+ */
\ No newline at end of file
diff --git a/src/scss/standards/material-design-colors-scss/material_design_colors.scss b/src/scss/standards/material-design-colors-scss/material_design_colors.scss
new file mode 100644
index 0000000..2143ca0
--- /dev/null
+++ b/src/scss/standards/material-design-colors-scss/material_design_colors.scss
@@ -0,0 +1,93 @@
+/*  Material Design color palette downloaded from
+ *  http://htmlcolorcodes.com/color-charts/
+ *
+ *  Check out our powerful color picker
+ *  http://htmlcolorcodes.com/color-picker/
+ *
+ *  Want to learn more about colors in SCSS?
+ *  http://htmlcolorcodes.com/tutorials/
+ *
+ *  - - - - - - - - - - - - - - - - - - 
+ *  Credits:
+ *
+ *  Original color palette by
+ *  https://www.google.com/design/spec/style/color.html
+ *
+ *  - - - - - - - - - - - - - - - - - -
+ *  How to use:
+ *  
+ *  Include this file with your other .scss files:
+ *
+ *  @import "material_colors";
+ *  
+ *  and use the color variables in your stylesheets:
+ *	
+ *  .class {
+ *    color: $red;
+ *  }
+ */
+
+/* Red */
+$red: #f44336;
+
+/* Pink */
+$pink: #e91e63;
+
+/* Purple */
+$purple: #9c27b0;
+
+/* Deep Purple */
+$deep-purple: #673ab7;
+
+/* Indigo */
+$indigo: #3f51b5;
+
+/* Blue */
+$blue: #2196f3;
+
+/* Light Blue */
+$light-blue: #03a9f4;
+
+/* Cyan */
+$cyan: #00bcd4;
+
+/* Teal */
+$teal: #009688;
+
+/* Green */
+$green: #4caf50;
+
+/* Light Green */
+$light-green: #8bc34a;
+
+/* Lime */
+$lime: #cddc39;
+
+/* Yellow */
+$yellow: #ffeb3b;
+
+/* Amber */
+$amber: #ffc107;
+
+/* Orange */
+$orange: #ff9800;
+
+/* Deep Orange */
+$deep-orange: #ff5722;
+
+/* Brown */
+$brown: #795548;
+
+/* Grey */
+$grey: #9e9e9e;
+
+/* Blue Grey */
+$blue-grey: #607d8b;
+
+/* White / Black */
+$white: #ffffff;
+$black: #000000;
+
+/*  Want more? Get the full Material Design color palette at
+ *  http://htmlcolorcodes.com/color-charts/
+ */
\ No newline at end of file
diff --git a/src/scss/standards/material-design-colors-scss/material_design_colors_full.scss b/src/scss/standards/material-design-colors-scss/material_design_colors_full.scss
new file mode 100644
index 0000000..d157541
--- /dev/null
+++ b/src/scss/standards/material-design-colors-scss/material_design_colors_full.scss
@@ -0,0 +1,355 @@
+/*  Material Design color palette (full) downloaded from
+ *  http://htmlcolorcodes.com/color-charts/
+ *
+ *  Check out our powerful color picker
+ *  http://htmlcolorcodes.com/color-picker/
+ *
+ *  Want to learn more about colors in SCSS?
+ *  http://htmlcolorcodes.com/tutorials/
+ *
+ *  - - - - - - - - - - - - - - - - - - 
+ *  Credits:
+ *
+ *  Original color palette by
+ *  https://www.google.com/design/spec/style/color.html
+ *
+ *  - - - - - - - - - - - - - - - - - -
+ *  How to use:
+ *  
+ *  Include this file with your other .scss files:
+ *
+ *  @import "material_colors_full";
+ *  
+ *  and use the color variables in your stylesheets:
+ *	
+ *  .class {
+ *    color: $red-500;
+ *  }
+ *
+ *  - - - - - - - - - - - - - - - - - -
+ *  Note:
+ *
+ *  $color and $color-500 are the same, simply there
+ *  for your convenience.
+ *
+ *  Variables with numbers prefixed by 'a' are accent colors
+ */
+
+/* Red */
+$red: #f44336;
+$red-50: #ffebee;
+$red-100: #ffcdd2;
+$red-200: #ef9a9a;
+$red-300: #e57373;
+$red-400: #ef5350;
+$red-500: #f44336;
+$red-600: #e53935;
+$red-700: #d32f2f;
+$red-800: #c62828;
+$red-900: #b71c1c;
+$red-a100: #ff8a80;
+$red-a200: #ff5252;
+$red-a400: #ff1744;
+$red-a700: #d50000;
+
+/* Pink */
+$pink: #e91e63;
+$pink-50: #fce4ec;
+$pink-100: #f8bbd0;
+$pink-200: #f48fb1;
+$pink-300: #f06292;
+$pink-400: #ec407a;
+$pink-500: #e91e63;
+$pink-600: #d81b60;
+$pink-700: #c2185b;
+$pink-800: #ad1457;
+$pink-900: #880e4f;
+$pink-a100: #ff80ab;
+$pink-a200: #ff4081;
+$pink-a400: #f50057;
+$pink-a700: #c51162;
+
+/* Purple */
+$purple: #9c27b0;
+$purple-50: #f3e5f5;
+$purple-100: #e1bee7;
+$purple-200: #ce93d8;
+$purple-300: #ba68c8;
+$purple-400: #ab47bc;
+$purple-500: #9c27b0;
+$purple-600: #8e24aa;
+$purple-700: #7b1fa2;
+$purple-800: #6a1b9a;
+$purple-900: #4a148c;
+$purple-a100: #ea80fc;
+$purple-a200: #e040fb;
+$purple-a400: #d500f9;
+$purple-a700: #aa00ff;
+
+/* Deep Purple */
+$deep-purple: #673ab7;
+$deep-purple-50: #ede7f6;
+$deep-purple-100: #d1c4e9;
+$deep-purple-200: #b39ddb;
+$deep-purple-300: #9575cd;
+$deep-purple-400: #7e57c2;
+$deep-purple-500: #673ab7;
+$deep-purple-600: #5e35b1;
+$deep-purple-700: #512da8;
+$deep-purple-800: #4527a0;
+$deep-purple-900: #311b92;
+$deep-purple-a100: #b388ff;
+$deep-purple-a200: #7c4dff;
+$deep-purple-a400: #651fff;
+$deep-purple-a700: #6200ea;
+
+/* Indigo */
+$indigo: #3f51b5;
+$indigo-50: #e8eaf6;
+$indigo-100: #c5cae9;
+$indigo-200: #9fa8da;
+$indigo-300: #7986cb;
+$indigo-400: #5c6bc0;
+$indigo-500: #3f51b5;
+$indigo-600: #3949ab;
+$indigo-700: #303f9f;
+$indigo-800: #283593;
+$indigo-900: #1a237e;
+$indigo-a100: #8c9eff;
+$indigo-a200: #536dfe;
+$indigo-a400: #3d5afe;
+$indigo-a700: #304ffe;
+
+/* Blue */
+$blue: #2196f3;
+$blue-50: #e3f2fd;
+$blue-100: #bbdefb;
+$blue-200: #90caf9;
+$blue-300: #64b5f6;
+$blue-400: #42a5f5;
+$blue-500: #2196f3;
+$blue-600: #1e88e5;
+$blue-700: #1976d2;
+$blue-800: #1565c0;
+$blue-900: #0d47a1;
+$blue-a100: #82b1ff;
+$blue-a200: #448aff;
+$blue-a400: #2979ff;
+$blue-a700: #2962ff;
+
+/* Light Blue */
+$light-blue: #03a9f4;
+$light-blue-50: #e1f5fe;
+$light-blue-100: #b3e5fc;
+$light-blue-200: #81d4fa;
+$light-blue-300: #4fc3f7;
+$light-blue-400: #29b6f6;
+$light-blue-500: #03a9f4;
+$light-blue-600: #039be5;
+$light-blue-700: #0288d1;
+$light-blue-800: #0277bd;
+$light-blue-900: #01579b;
+$light-blue-a100: #80d8ff;
+$light-blue-a200: #40c4ff;
+$light-blue-a400: #00b0ff;
+$light-blue-a700: #0091ea;
+
+/* Cyan */
+$cyan: #00bcd4;
+$cyan-50: #e0f7fa;
+$cyan-100: #b2ebf2;
+$cyan-200: #80deea;
+$cyan-300: #4dd0e1;
+$cyan-400: #26c6da;
+$cyan-500: #00bcd4;
+$cyan-600: #00acc1;
+$cyan-700: #0097a7;
+$cyan-800: #00838f;
+$cyan-900: #006064;
+$cyan-a100: #84ffff;
+$cyan-a200: #18ffff;
+$cyan-a400: #00e5ff;
+$cyan-a700: #00b8d4;
+
+/* Teal */
+$teal: #009688;
+$teal-50: #e0f2f1;
+$teal-100: #b2dfdb;
+$teal-200: #80cbc4;
+$teal-300: #4db6ac;
+$teal-400: #26a69a;
+$teal-500: #009688;
+$teal-600: #00897b;
+$teal-700: #00796b;
+$teal-800: #00695c;
+$teal-900: #004d40;
+$teal-a100: #a7ffeb;
+$teal-a200: #64ffda;
+$teal-a400: #1de9b6;
+$teal-a700: #00bfa5;
+
+/* Green */
+$green: #4caf50;
+$green-50: #e8f5e9;
+$green-100: #c8e6c9;
+$green-200: #a5d6a7;
+$green-300: #81c784;
+$green-400: #66bb6a;
+$green-500: #4caf50;
+$green-600: #43a047;
+$green-700: #388e3c;
+$green-800: #2e7d32;
+$green-900: #1b5e20;
+$green-a100: #b9f6ca;
+$green-a200: #69f0ae;
+$green-a400: #00e676;
+$green-a700: #00c853;
+
+/* Light Green */
+$light-green: #8bc34a;
+$light-green-50: #f1f8e9;
+$light-green-100: #dcedc8;
+$light-green-200: #c5e1a5;
+$light-green-300: #aed581;
+$light-green-400: #9ccc65;
+$light-green-500: #8bc34a;
+$light-green-600: #7cb342;
+$light-green-700: #689f38;
+$light-green-800: #558b2f;
+$light-green-900: #33691e;
+$light-green-a100: #ccff90;
+$light-green-a200: #b2ff59;
+$light-green-a400: #76ff03;
+$light-green-a700: #64dd17;
+
+/* Lime */
+$lime: #cddc39;
+$lime-50: #f9fbe7;
+$lime-100: #f0f4c3;
+$lime-200: #e6ee9c;
+$lime-300: #dce775;
+$lime-400: #d4e157;
+$lime-500: #cddc39;
+$lime-600: #c0ca33;
+$lime-700: #afb42b;
+$lime-800: #9e9d24;
+$lime-900: #827717;
+$lime-a100: #f4ff81;
+$lime-a200: #eeff41;
+$lime-a400: #c6ff00;
+$lime-a700: #aeea00;
+
+/* Yellow */
+$yellow: #ffeb3b;
+$yellow-50: #fffde7;
+$yellow-100: #fff9c4;
+$yellow-200: #fff59d;
+$yellow-300: #fff176;
+$yellow-400: #ffee58;
+$yellow-500: #ffeb3b;
+$yellow-600: #fdd835;
+$yellow-700: #fbc02d;
+$yellow-800: #f9a825;
+$yellow-900: #f57f17;
+$yellow-a100: #ffff8d;
+$yellow-a200: #ffff00;
+$yellow-a400: #ffea00;
+$yellow-a700: #ffd600;
+
+/* Amber */
+$amber: #ffc107;
+$amber-50: #fff8e1;
+$amber-100: #ffecb3;
+$amber-200: #ffe082;
+$amber-300: #ffd54f;
+$amber-400: #ffca28;
+$amber-500: #ffc107;
+$amber-600: #ffb300;
+$amber-700: #ffa000;
+$amber-800: #ff8f00;
+$amber-900: #ff6f00;
+$amber-a100: #ffe57f;
+$amber-a200: #ffd740;
+$amber-a400: #ffc400;
+$amber-a700: #ffab00;
+
+/* Orange */
+$orange: #ff9800;
+$orange-50: #fff3e0;
+$orange-100: #ffe0b2;
+$orange-200: #ffcc80;
+$orange-300: #ffb74d;
+$orange-400: #ffa726;
+$orange-500: #ff9800;
+$orange-600: #fb8c00;
+$orange-700: #f57c00;
+$orange-800: #ef6c00;
+$orange-900: #e65100;
+$orange-a100: #ffd180;
+$orange-a200: #ffab40;
+$orange-a400: #ff9100;
+$orange-a700: #ff6d00;
+
+/* Deep Orange */
+$deep-orange: #ff5722;
+$deep-orange-50: #fbe9e7;
+$deep-orange-100: #ffccbc;
+$deep-orange-200: #ffab91;
+$deep-orange-300: #ff8a65;
+$deep-orange-400: #ff7043;
+$deep-orange-500: #ff5722;
+$deep-orange-600: #f4511e;
+$deep-orange-700: #e64a19;
+$deep-orange-800: #d84315;
+$deep-orange-900: #bf360c;
+$deep-orange-a100: #ff9e80;
+$deep-orange-a200: #ff6e40;
+$deep-orange-a400: #ff3d00;
+$deep-orange-a700: #dd2c00;
+
+/* Brown */
+$brown: #795548;
+$brown-50: #efebe9;
+$brown-100: #d7ccc8;
+$brown-200: #bcaaa4;
+$brown-300: #a1887f;
+$brown-400: #8d6e63;
+$brown-500: #795548;
+$brown-600: #6d4c41;
+$brown-700: #5d4037;
+$brown-800: #4e342e;
+$brown-900: #3e2723;
+
+/* Grey */
+$grey: #9e9e9e;
+$grey-50: #fafafa;
+$grey-100: #f5f5f5;
+$grey-200: #eeeeee;
+$grey-300: #e0e0e0;
+$grey-400: #bdbdbd;
+$grey-500: #9e9e9e;
+$grey-600: #757575;
+$grey-700: #616161;
+$grey-800: #424242;
+$grey-900: #212121;
+
+/* Blue Grey */
+$blue-grey: #607d8b;
+$blue-grey-50: #eceff1;
+$blue-grey-100: #cfd8dc;
+$blue-grey-200: #b0bec5;
+$blue-grey-300: #90a4ae;
+$blue-grey-400: #78909c;
+$blue-grey-500: #607d8b;
+$blue-grey-600: #546e7a;
+$blue-grey-700: #455a64;
+$blue-grey-800: #37474f;
+$blue-grey-900: #263238;
+
+/* White / Black */
+$white: #ffffff;
+$black: #000000;
+
+/*  Want more? Check our our other color palettes at
+ *  http://htmlcolorcodes.com/color-charts/
+ */
\ No newline at end of file