diff --git a/src/scss/_var.scss b/src/scss/_var.scss
index 644638ff..55ad7316 100644
--- a/src/scss/_var.scss
+++ b/src/scss/_var.scss
@@ -3,41 +3,34 @@
 // =============================================
 
 $colors: (
-    brand: (
-        pink            : #e91e63
+    primary: (
+        pink            : DeepPink
     ),
-
-    grey: (
-        base            : #666,
-        darker          : #222,
-        dark            : #444,
-        light           : #999,
-        lighter         : #e4e4e4
-    ),
-
-    black: (
-        base            : #000
-    ),
-
-    white: (
-        base            : #fff
+    
+    secondary: (
+        purple          : RebeccaPurple
     ),
-
-    success: (
-        base            : #4caf50,
-        light           : #c8e6c9
-    ),
-
-    warning: (
-        base            : #ffeb3b,
-        light           : #fff59d
+    
+    neutral: (
+        black           : #000,
+        white           : #fff,
+        darkest         : #222,
+        darker          : #444,
+        dark            : #666,
+        light           : #999,
+        lighter         : #e4e4e4,
+        lightest        : #f4f4f4
     ),
-
-    error: (
-        base            : #f44336,
-        light           : #ffcdd2
+    
+    contextual: (
+        success         : #4caf50,
+        success-light   : #c8e6c9,
+        warning         : #ffeb3b,
+        warning-light   : #fff59d,
+        error           : #f44336,
+        error-light     : #ffcdd2
     ),
-
+    
     social: (
         twitter         : #55acee,
         facebook        : #32639f,
diff --git a/src/scss/base/_form.scss b/src/scss/base/_form.scss
index 0f967694..ed8fc8df 100644
--- a/src/scss/base/_form.scss
+++ b/src/scss/base/_form.scss
@@ -23,14 +23,14 @@ label {
 input,
 textarea,
 select[multiple=multiple] {
-    background-color: color(white);
-    border: 1px solid color(grey);
+    background-color: color(neutral, white);
+    border: 1px solid color(neutral, dark);
     border-radius: 0;
     padding: spacing(xs) spacing(sm);
     width: 100%;
 
     &:focus {
-        border-color: color(black);
+        border-color: color(neutral, black);
         outline: none;
     }
 }
@@ -125,25 +125,25 @@ optgroup {
 .error,
 abbr[title="Required"],
 .required em {
-    color: color(error, base);
+    color: color(contextual, error);
 }
 
 .required::after {
     content: "*";
-    color: color(error, base);
+    color: color(contextual, error);
     margin-left: spacing(xs);
 }
 
 .valid {
-    color: color(success, base);
+    color: color(contextual, success);
 }
 
 .is-error {
-    border-color: color(error, base);
+    border-color: color(contextual, error);
 }
 
 .is-valid {
-    border-color: color(success, base);
+    border-color: color(contextual, success);
 }
 
 .validation-advice {
@@ -156,7 +156,7 @@ abbr[title="Required"],
 }
 
 .has-error .validation-advice {
-    background-color: color(error, light);
-    border-color: color(error);
+    background-color: color(contextual, error-light);
+    border-color: color(contextual, error);
 }
 
diff --git a/src/scss/base/_horizontal-rule.scss b/src/scss/base/_horizontal-rule.scss
index 519c60ab..cc7ab52f 100644
--- a/src/scss/base/_horizontal-rule.scss
+++ b/src/scss/base/_horizontal-rule.scss
@@ -5,7 +5,7 @@
 hr {
     border: 0;
     height: 1px;
-    background-color: color(grey,light);
+    background-color: color(neutral, light);
     margin-top: spacing(xl);
     margin-bottom: spacing(xl);
 }
diff --git a/src/scss/base/_tag.scss b/src/scss/base/_tag.scss
index 6f2fc019..663d0ce8 100644
--- a/src/scss/base/_tag.scss
+++ b/src/scss/base/_tag.scss
@@ -4,8 +4,8 @@
 
 .tag {
     display: inline-block;
-    background-color: color(grey,dark);
-    color: color(white);
+    background-color: color(neutral,darker);
+    color: color(neutral, white);
     padding: spacing(xs)/2 spacing(xs);
     white-space: nowrap;
     vertical-align: baseline;
diff --git a/src/scss/base/_text.scss b/src/scss/base/_text.scss
index 6f791667..910d9300 100644
--- a/src/scss/base/_text.scss
+++ b/src/scss/base/_text.scss
@@ -25,7 +25,7 @@ html {
     font-size: $font-size;
     font-family: $font-family;
     line-height: $line-height;
-    color: color(grey);
+    color: color(neutral, dark);
 }
 
 ul, ol, p {
@@ -63,14 +63,14 @@ samp {
 code {
     padding: 2px 4px;
     font-size: $font-size-sm;
-    color: color(error);
-    background-color: color(grey, lighter);
+    color: color(contextual, error);
+    background-color: color(neutral, lighter);
     border-radius: $border-radius;
 }
 
 mark {
-    background: color(error);
-    color: color(black);
+    background: color(contextual, error);
+    color: color(neutral, black);
 }
 
 
@@ -80,11 +80,11 @@ mark {
 
 a,
 .link {
-    color: color(black);
+    color: color(neutral, black);
     touch-action: manipulation;
 
     &:hover {
-        color: color(grey);
+        color: color(neutral, dark);
     }
 }
 
diff --git a/src/scss/chopchop-ui.scss b/src/scss/chopchop-ui.scss
index c965d0be..539cb08b 100644
--- a/src/scss/chopchop-ui.scss
+++ b/src/scss/chopchop-ui.scss
@@ -18,7 +18,7 @@
     right: 0;
     z-index: 999;
     font-size: 12px;
-    border-bottom: 4px solid color(grey,darker);
+    border-bottom: 4px solid color(neutral,darkest);
     @include flex;
 
     ul {
@@ -30,7 +30,7 @@
 
     li {
         list-style: none;
-        color: color(white);
+        color: color(neutral, white);
 
         > * {
             display: inline-block;
@@ -39,13 +39,13 @@
     }
 
     a {
-        color: color(white);
-        background-color: color(grey,darker);
+        color: color(neutral, white);
+        background-color: color(neutral,darkest);
         text-decoration: none;
 
         &.is-active {
             background-color: #EFEDED;
-            color: color(grey,darker);
+            color: color(neutral,darkest);
         }
     }
 
@@ -75,23 +75,23 @@
 
     span {
         background-color: #FFE800;
-        color: color(grey,darker);
+        color: color(neutral,darkest);
 
         @include breakpoint(screen(sm) screen(sm, max)) {
             background-color: #E800E8;
-            color: color(white);
+            color: color(neutral, white);
         }
         @include breakpoint(screen(md) screen(md, max)) {
             background-color: #70F800;
-            color: color(grey,darker);
+            color: color(neutral,darkest);
         }
         @include breakpoint(screen(lg) screen(lg, max)) {
             background-color: #00B1F5;
-            color: color(white);
+            color: color(neutral, white);
         }
         @include breakpoint(screen(xl)) {
             background-color: #FF2C00;
-            color: color(white);
+            color: color(neutral, white);
         }
     }
 }
@@ -130,10 +130,10 @@
     width: 200px;
     left: -100%;
     z-index: 998;
-    background-color: color(grey,darker);
+    background-color: color(neutral,darkest);
     padding: 20px 10px;
     padding-bottom: 46px;
-    color: color(grey,lighter);
+    color: color(neutral, lighter);
 
     &.is-active {
         left: 0;
@@ -151,7 +151,7 @@
             counter-increment: section;
             content: counters(section,".") ". ";
             font-size: $font-size-sm;
-            color: color(grey);
+            color: color(neutral, dark);
         }
 
         ol {
@@ -163,7 +163,7 @@
     }
 
     a {
-        color: color(grey,lighter);
+        color: color(neutral, lighter);
         text-decoration: none;
 
         &:hover {
@@ -178,9 +178,9 @@
 // =============================================
 
 .cc-section {
-    border: 5px solid color(grey,lighter);
+    border: 5px solid color(neutral, lighter);
     border-top: 0;
-    background-color: color(white);
+    background-color: color(neutral, white);
 }
 
 .cc-demo {
@@ -201,7 +201,7 @@
 // =============================================
 
 .cc-title {
-    background-color: color(grey,lighter);
+    background-color: color(neutral, lighter);
     @include flex;
     @include justify-content(space-between);
     @include align-items(center);
@@ -234,13 +234,13 @@
 
 .cc-title-desc {
     padding: 20px 20px 0;
-    border-left: 5px solid color(grey,lighter);
-    border-right: 5px solid color(grey,lighter);
+    border-left: 5px solid color(neutral, lighter);
+    border-right: 5px solid color(neutral, lighter);
     border-top: 0;
 
     > *:last-child {
         margin-bottom: 0;
-        border-bottom: 2px solid color(grey,lighter);
+        border-bottom: 2px solid color(neutral, lighter);
         padding-bottom: 20px;
     }
 }
@@ -330,7 +330,7 @@
     display: block;
     max-height: 20em;
     overflow: scroll;
-    background-color: color(grey,lighter) !important;
+    background-color: color(neutral, lighter) !important;
 }
 
 
diff --git a/src/scss/component/_alert.scss b/src/scss/component/_alert.scss
index b3dae55c..fbea96bc 100644
--- a/src/scss/component/_alert.scss
+++ b/src/scss/component/_alert.scss
@@ -4,8 +4,8 @@
 
 .alert {
     padding: spacing();
-    background-color: color(grey, lighter);
-    border: 1px solid color(grey);
+    background-color: color(neutral, lighter);
+    border: 1px solid color(neutral, dark);
     margin-bottom: spacing();
 
     p {
@@ -55,11 +55,11 @@
 // =============================================
 
 .alert--success {
-    background-color: color(success, light);
-    border-color: color(success);
+    background-color: color(contextual, success-light);
+    border-color: color(contextual, success);
 }
 
 .alert--error {
-    background-color: color(error, light);
-    border-color: color(error);
+    background-color: color(contextual, error-light);
+    border-color: color(contextual, error);
 }
diff --git a/src/scss/component/_breadcrumb.scss b/src/scss/component/_breadcrumb.scss
index 7c70613b..6ec125f9 100644
--- a/src/scss/component/_breadcrumb.scss
+++ b/src/scss/component/_breadcrumb.scss
@@ -8,7 +8,7 @@
         margin-right: spacing(sm);
         
         &:after {
-            @include chevron(color(grey), 4px, right, 1px);
+            @include chevron(color(neutral, dark), 4px, right, 1px);
             vertical-align: middle;
         }
     }
diff --git a/src/scss/component/_drawer.scss b/src/scss/component/_drawer.scss
index 6888dcd1..9f8fe060 100644
--- a/src/scss/component/_drawer.scss
+++ b/src/scss/component/_drawer.scss
@@ -8,7 +8,7 @@
     bottom: 0;
     width: 90%;
     max-width: 30em;
-    background: color(white);
+    background: color(neutral, white);
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 }
diff --git a/src/scss/component/_modal.scss b/src/scss/component/_modal.scss
index ea2c9218..02c00dc5 100644
--- a/src/scss/component/_modal.scss
+++ b/src/scss/component/_modal.scss
@@ -22,7 +22,7 @@
 // =============================================
 
 .modal__dialog {
-    background-color: color(white);
+    background-color: color(neutral, white);
     margin-left: auto;
     margin-right: auto;
     position: relative;
diff --git a/src/scss/component/_pagination.scss b/src/scss/component/_pagination.scss
index 6ab8650c..851836dc 100644
--- a/src/scss/component/_pagination.scss
+++ b/src/scss/component/_pagination.scss
@@ -7,9 +7,9 @@
         vertical-align: middle;
     }
     li:first-child a::after {
-        @include chevron(color(grey), 6px, left, 2px);
+        @include chevron(color(neutral, dark), 6px, left, 2px);
     }
     li:last-child a::after {
-        @include chevron(color(grey), 6px, right, 2px);
+        @include chevron(color(neutral, dark), 6px, right, 2px);
     }
 }
\ No newline at end of file
diff --git a/src/scss/component/_responsive-table.scss b/src/scss/component/_responsive-table.scss
index 0c5001ab..15a68e75 100644
--- a/src/scss/component/_responsive-table.scss
+++ b/src/scss/component/_responsive-table.scss
@@ -18,6 +18,6 @@
         width: 100%;
         overflow-y: hidden;
         -ms-overflow-style: -ms-autohiding-scrollbar;
-        border: 1px solid color(grey,light);
+        border: 1px solid color(neutral, light);
     }
 }
\ No newline at end of file
diff --git a/src/scss/component/_select.scss b/src/scss/component/_select.scss
index 5610ad43..e1cdeebb 100644
--- a/src/scss/component/_select.scss
+++ b/src/scss/component/_select.scss
@@ -6,10 +6,10 @@
     padding: 0;
     padding-right: 2em;
     margin: 0;
-    border: 1px solid color(grey);
+    border: 1px solid color(neutral, dark);
     overflow: hidden;
     position: relative;
-    background-color: color(white);
+    background-color: color(neutral, white);
 
     &::after,
     &::before {
@@ -18,12 +18,12 @@
     }
 
     &::after {
-        @include chevron(color(grey), 8px, down, 1px);
+        @include chevron(color(neutral, dark), 8px, down, 1px);
         top: 1.25em;
     }
 
     &::before {
-        @include chevron(color(grey), 8px, up, 1px);
+        @include chevron(color(neutral, dark), 8px, up, 1px);
         top: 0.8em;
     }
 
diff --git a/src/scss/helper/_button.scss b/src/scss/helper/_button.scss
index cb4d7303..665d3ce6 100644
--- a/src/scss/helper/_button.scss
+++ b/src/scss/helper/_button.scss
@@ -17,14 +17,14 @@
     text-align: center;
     white-space: nowrap;
     width: auto;
-    background-color: color(grey,darker);
-    color: color(white);
+    background-color: color(neutral,darkest);
+    color: color(neutral, white);
     fill: currentColor;
 
     &:hover,
     &:focus {
-        color: color(white);
-        background-color: color(grey,dark);
+        color: color(neutral, white);
+        background-color: color(neutral,darker);
     }
 
     &::moz-focus-inner {
@@ -61,20 +61,20 @@
 @mixin btn--text {
     @extend .link;
     background-color: transparent;
-    color: color(black);
+    color: color(neutral, black);
     font-weight: inherit;
     text-decoration: underline;
 
     &:hover,
     &:focus {
         background-color: transparent;
-        color: color(black);
+        color: color(neutral, black);
         text-decoration: none;
     }
 
     &:disabled {
         background-color: transparent;
-        color: color(grey);
+        color: color(neutral, dark);
     }
 }
 
@@ -94,12 +94,12 @@
 
 @mixin btn--disabled {
     cursor: not-allowed;
-    background-color: color(grey);
-    color: color(grey,dark);
+    background-color: color(neutral, dark);
+    color: color(neutral,darker);
 
     &:hover,
     &:focus {
-        background-color: color(grey);
-        color: color(grey,dark);
+        background-color: color(neutral, dark);
+        color: color(neutral,darker);
     }
 }
diff --git a/src/scss/helper/_card.scss b/src/scss/helper/_card.scss
index 05bc5f0e..5724e5d2 100644
--- a/src/scss/helper/_card.scss
+++ b/src/scss/helper/_card.scss
@@ -3,19 +3,19 @@
 // =============================================
 
 @mixin card {
-    border: 1px solid color(grey,light);
+    border: 1px solid color(neutral, light);
 
     &__header,
     &__footer {
-        background-color: color(grey,lighter);
+        background-color: color(neutral, lighter);
         padding: spacing(sm) spacing();
     }
 
     &__header {
-        border-bottom: 1px solid color(grey, light);
+        border-bottom: 1px solid color(neutral, light);
     }
 
     &__footer {
-        border-top: 1px solid color(grey, light);
+        border-top: 1px solid color(neutral, light);
     }
 }
diff --git a/src/scss/helper/_nav.scss b/src/scss/helper/_nav.scss
index c5745408..419d8c31 100644
--- a/src/scss/helper/_nav.scss
+++ b/src/scss/helper/_nav.scss
@@ -105,15 +105,15 @@
     font-size: 0;
 
     a {
-        @include circle(color(grey, light), 16px);
+        @include circle(color(neutral, light), 16px);
 
         &:hover,
         &.is-active {
-            background-color: color(grey, lighter);
+            background-color: color(neutral, lighter);
         }
 
         &:active {
-            background-color: color(white);
+            background-color: color(neutral, white);
         }
     }
 }
diff --git a/src/scss/helper/_shape.scss b/src/scss/helper/_shape.scss
index 13d51ca9..1d580256 100644
--- a/src/scss/helper/_shape.scss
+++ b/src/scss/helper/_shape.scss
@@ -2,7 +2,7 @@
 // Circle
 // =============================================
 
-@mixin circle($color: color(grey), $size: 5px) {
+@mixin circle($color: color(neutral, dark), $size: 5px) {
     height: $size;
     width: $size;
     border-radius: 100%;
@@ -15,7 +15,7 @@
 // Square
 // =============================================
 
-@mixin square($color: color(grey), $size: 5px) {
+@mixin square($color: color(neutral, dark), $size: 5px) {
     height: $size;
     width: $size;
     background-color: $color;
@@ -27,7 +27,7 @@
 // Triangle
 // =============================================
 
-@mixin triangle($color: color(grey), $size: 5px, $size-2: $size, $direction: up) {
+@mixin triangle($color: color(neutral, dark), $size: 5px, $size-2: $size, $direction: up) {
     content: '';
     width: 0;
     height: 0;
@@ -68,7 +68,7 @@
 // Chevron
 // =============================================
 
-@mixin chevron($color:  color(grey), $size: 5px, $direction: left, $thickness: 1px) {
+@mixin chevron($color:  color(neutral, dark), $size: 5px, $direction: left, $thickness: 1px) {
     content: '';
     display: inline-block;
     width: $size;
@@ -99,7 +99,7 @@
 // Minus
 // =============================================
 
-@mixin minus($color: color(grey), $size: 22px, $thickness: 2px) {
+@mixin minus($color: color(neutral, dark), $size: 22px, $thickness: 2px) {
     display: inline-block;
     position: relative;
     width: $size;
@@ -129,7 +129,7 @@
 // Plus
 // =============================================
 
-@mixin plus($color: color(grey), $size: 22px, $thickness: 2px) {
+@mixin plus($color: color(neutral, dark), $size: 22px, $thickness: 2px) {
     display: inline-block;
     position: relative;
     width: $size;
@@ -163,7 +163,7 @@
 // Cross
 // =============================================
 
-@mixin cross($color: color(grey), $size: 22px, $thickness: 2px) {
+@mixin cross($color: color(neutral, dark), $size: 22px, $thickness: 2px) {
     transform: rotate(45deg);
     display: inline-block;
     position: relative;
@@ -198,7 +198,7 @@
 // Tick
 // =============================================
 
-@mixin tick($color: color(grey), $size: 20px, $thickness: 2px) {
+@mixin tick($color: color(neutral, dark), $size: 20px, $thickness: 2px) {
     
     position: relative;
     display: inline-block;
@@ -232,7 +232,7 @@
 // Hamburger
 // =============================================
 
-@mixin hamburger($color: color(grey), $size: 20px, $size2: $size, $thickness: 2px) {
+@mixin hamburger($color: color(neutral, dark), $size: 20px, $size2: $size, $thickness: 2px) {
     position: relative;
     display: inline-block;
     border-top: $thickness solid $color;
@@ -259,7 +259,7 @@
 // Ring
 // =============================================
 
-@mixin ring($foreground-color: color(grey), $background-color: color(grey, dark), $size: 20px, $thickness: 4px) {
+@mixin ring($foreground-color: color(neutral, dark), $background-color: color(neutral, darker), $size: 20px, $thickness: 4px) {
     display: inline-block;
     background: transparent;
     border-bottom: $thickness solid $background-color;
diff --git a/src/scss/helper/_table.scss b/src/scss/helper/_table.scss
index a18d1564..968ef028 100644
--- a/src/scss/helper/_table.scss
+++ b/src/scss/helper/_table.scss
@@ -9,7 +9,7 @@
     }
     
     td {
-        border-top: 1px solid color(grey,light);
+        border-top: 1px solid color(neutral, light);
     }
 
     th {
@@ -19,13 +19,13 @@
     caption {
         padding-top: spacing(sm);
         padding-bottom: spacing(sm);
-        color: color(grey);
+        color: color(neutral, dark);
         text-align: left;
     }
 
     thead th {
         border-top: 0;
-        border-bottom: 2px solid color(grey,light);
+        border-bottom: 2px solid color(neutral, light);
     }
 
     tfoot td {
@@ -51,11 +51,11 @@
 // =============================================
 
 @mixin table--bordered {
-    border: 1px solid color(grey,light);
+    border: 1px solid color(neutral, light);
 
     th,
     td {
-        border: 1px solid color(grey,light);
+        border: 1px solid color(neutral, light);
     }
 
     thead th,
@@ -71,6 +71,6 @@
 
 @mixin table--striped {
     tbody tr:nth-child(odd) {
-        background-color: color(grey,lighter);
+        background-color: color(neutral, lighter);
     }
 }