diff --git a/.gitignore b/.gitignore
index 310b78cc6..497e3c970 100755
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,30 @@
 docs/
 node/server.json
-node/node_modules
\ No newline at end of file
+node/node_modules
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+*.sass-cache
+*.ruby-version
+
+# OS or Editor folders
+.DS_Store
+._*
+Thumbs.db
+.cache
+.project
+.settings
+.tmproj
+*.esproj
+nbproject
+*.sublime-project
+*.sublime-workspace
\ No newline at end of file
diff --git a/node/package.json b/node/package.json
index aa305644d..65afe61ff 100755
--- a/node/package.json
+++ b/node/package.json
@@ -23,7 +23,6 @@
     "grunt-contrib-compress": "~0.5.2",
     "grunt-contrib-concat": "~0.3.0",
     "grunt-docco-multi": "0.0.2",
-    "grunt-flipcss": "~0.1.2",
     "grunt-cssjanus": "~0.1.1"
   }
 }
diff --git a/src/elements/button.less b/src/elements/button.less
index 702287024..d19332d3a 100755
--- a/src/elements/button.less
+++ b/src/elements/button.less
@@ -9,6 +9,7 @@
  *
  */
 
+@import "button.variables";
 
 /*******************************
             Button
@@ -25,9 +26,9 @@
   outline: none;
   border: none;
   background-color: #EBEBEB;
-  color: #999999;
+  color: @lightTextColor;
 
-  padding: 0.8em 1.5em;
+  padding: @verticalPadding @horizontalPadding;
 
   font-size: 1rem;
   text-transform: uppercase;
@@ -37,18 +38,18 @@
   text-align: center;
   text-decoration: none;
 
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
+  -webkit-border-radius: @borderRadius;
+  -moz-border-radius: @borderRadius;
+  border-radius: @borderRadius;
 
   -webkit-box-shadow:
-    0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset
+    @boxShadow
   ;
   -moz-box-shadow:
-    0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset
+    @boxShadow
   ;
   box-shadow:
-    0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset
+    @boxShadow
   ;
 
   -webkit-user-select: none;
@@ -64,39 +65,39 @@
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   -webkit-transition:
-    opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    box-shadow 0.25s ease
+    opacity @transitionDuration ease,
+    background-color @transitionDuration ease,
+    color @transitionDuration ease,
+    background @transitionDuration ease,
+    box-shadow @transitionDuration ease
   ;
   -moz-transition:
-    opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    box-shadow 0.25s ease
+    opacity @transitionDuration ease,
+    background-color @transitionDuration ease,
+    color @transitionDuration ease,
+    background @transitionDuration ease,
+    box-shadow @transitionDuration ease
   ;
   -o-transition:
-    opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    box-shadow 0.25s ease
+    opacity @transitionDuration ease,
+    background-color @transitionDuration ease,
+    color @transitionDuration ease,
+    background @transitionDuration ease,
+    box-shadow @transitionDuration ease
   ;
   -ms-transition:
-    opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    box-shadow 0.25s ease
+    opacity @transitionDuration ease,
+    background-color @transitionDuration ease,
+    color @transitionDuration ease,
+    background @transitionDuration ease,
+    box-shadow @transitionDuration ease
   ;
   transition:
-    opacity 0.25s ease,
-    background-color 0.25s ease,
-    color 0.25s ease,
-    background 0.25s ease,
-    box-shadow 0.25s ease
+    opacity @transitionDuration ease,
+    background-color @transitionDuration ease,
+    color @transitionDuration ease,
+    background @transitionDuration ease,
+    box-shadow @transitionDuration ease
   ;
 }
 
@@ -105,17 +106,17 @@
 ---------------*/
 
 .ui.count.button {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
+  -webkit-box-shadow: 0px 0px 0px 1px @borderColor !important;
+  -moz-box-shadow: 0px 0px 0px 1px @borderColor !important;
+  box-shadow: 0px 0px 0px 1px @borderColor !important;
 }
 
 .ui.count.button > .count {
   position: absolute;
   background-color: #FFFFFF;
   border: 1px solid #F0F0F0;
-  margin: -0.8em -1.5em;
-  padding: 0.8em 1.5em;
+  margin: -@verticalPadding -@horizontalPadding;
+  padding: @verticalPadding @horizontalPadding;
 }
 
 /*-------------------
@@ -124,7 +125,7 @@
 
 .ui.primary.buttons .button,
 .ui.primary.button {
-  background-color: #D95C5C;
+  background-color: @primaryColor;
   color: #FFFFFF;
 }
 .ui.primary.buttons .button:hover,
@@ -279,9 +280,9 @@
 
   color: #FFFFFF;
 
-  -webkit-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-  -moz-box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
-  box-shadow: 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
+  -webkit-box-shadow: 0px 1px @borderRadius 0px rgba(0, 0, 0, 0.3) inset;
+  -moz-box-shadow: 0px 1px @borderRadius 0px rgba(0, 0, 0, 0.3) inset;
+  box-shadow: 0px 1px @borderRadius 0px rgba(0, 0, 0, 0.3) inset;
 }
 
 /*--------------
@@ -329,7 +330,7 @@
 
 .ui.disabled.button {
   cursor: default;
-  color: #DDDDDD !important;
+  color: @disabledTextColor !important;
   background-color: rgba(50, 50, 50, 0.05) !important;
   background-image: none !important;
 
@@ -461,22 +462,22 @@
 .ui.basic.button {
   background-color: transparent !important;
   background-image: none;
-  color: #999999 !important;
+  color: @textColor !important;
   font-weight: normal;
   text-transform: none;
 
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  -moz-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  box-shadow: 0px 0px 0px 1px @borderColor inset;
 }
 .ui.basic.buttons {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  -moz-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  box-shadow: 0px 0px 0px 1px @borderColor inset;
 
-  -webkit-border-radius: 0.2em;
-  -moz-border-radius: 0.2em;
-  border-radius: 0.2em;
+  -webkit-border-radius: @borderRadius;
+  -moz-border-radius: @borderRadius;
+  border-radius: @borderRadius;
 }
 
 .ui.basic.buttons .button:hover,
@@ -491,9 +492,9 @@
   background-color: rgba(0, 0, 0, 0.02) !important;
   color: #7F7F7F !important;
 
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  -moz-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  box-shadow: 0px 0px 0px 1px @borderColor inset;
 }
 .ui.basic.buttons .button.active,
 .ui.basic.button.active {
@@ -506,7 +507,7 @@
 }
 .ui.basic.buttons .button.active:hover,
 .ui.basic.button.active:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: @borderColor;
 }
 
 /* Basic Group */
@@ -524,9 +525,9 @@
   box-shadow: none;
 }
 .ui.basic.buttons .button.active {
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+  -webkit-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  -moz-box-shadow: 0px 0px 0px 1px @borderColor inset;
+  box-shadow: 0px 0px 0px 1px @borderColor inset;
 }
 
 
@@ -559,9 +560,9 @@
   background-color: rgba(0, 0, 0, 0.05);
   text-align: center;
 
-  -webkit-border-radius: 0.2em 0px 0px 0.2em;
-  -moz-border-radius: 0.2em 0px 0px 0.2em;
-  border-radius: 0.2em 0px 0px 0.2em;
+  -webkit-border-radius: @borderRadius 0px 0px @borderRadius;
+  -moz-border-radius: @borderRadius 0px 0px @borderRadius;
+  border-radius: @borderRadius 0px 0px @borderRadius;
 
   line-height: 1;
 
@@ -576,24 +577,24 @@
   border-radius: 0em;
 }
 .ui.labeled.icon.buttons .button:first-child > .icon {
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: @borderRadius;
+  border-bottom-left-radius: @borderRadius;
 }
 .ui.labeled.icon.buttons .button:last-child > .icon {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: @borderRadius;
+  border-bottom-right-radius: @borderRadius;
 }
 .ui.vertical.labeled.icon.buttons .button:first-child > .icon {
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-top-left-radius: 0.2em;
+  border-top-left-radius: @borderRadius;
 }
 .ui.vertical.labeled.icon.buttons .button:last-child > .icon {
   -webkit-border-radius: 0em;
   -moz-border-radius: 0em;
   border-radius: 0em;
-  border-bottom-left-radius: 0.2em;
+  border-bottom-left-radius: @borderRadius;
 }
 
 .ui.right.labeled.icon.button {
@@ -610,9 +611,9 @@
   left: auto;
   right: 0em;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em @borderRadius @borderRadius 0em;
+  -moz-border-radius: 0em @borderRadius @borderRadius 0em;
+  border-radius: 0em @borderRadius @borderRadius 0em;
 
   -webkit-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
   -moz-box-shadow: 2px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
@@ -653,20 +654,20 @@
 
 .ui.attached.button {
   display: block;
-  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
+  -webkit-box-shadow: 0px 0px 0px 1px @borderColor !important;
+  -moz-box-shadow: 0px 0px 0px 1px @borderColor !important;
+  box-shadow: 0px 0px 0px 1px @borderColor !important;
 }
 .ui.attached.top.button {
 
-  -webkit-border-radius: 0.2em 0.2em 0em 0em;
-  -moz-border-radius: 0.2em 0.2em 0em 0em;
-  border-radius: 0.2em 0.2em 0em 0em;
+  -webkit-border-radius: @borderRadius @borderRadius 0em 0em;
+  -moz-border-radius: @borderRadius @borderRadius 0em 0em;
+  border-radius: @borderRadius @borderRadius 0em 0em;
 }
 .ui.attached.bottom.button {
-  -webkit-border-radius: 0em 0em 0.2em 0.2em;
-  -moz-border-radius: 0em 0em 0.2em 0.2em;
-  border-radius: 0em 0em 0.2em 0.2em;
+  -webkit-border-radius: 0em 0em @borderRadius @borderRadius;
+  -moz-border-radius: 0em 0em @borderRadius @borderRadius;
+  border-radius: 0em 0em @borderRadius @borderRadius;
 }
 .ui.attached.left.button {
   display: inline-block;
@@ -675,9 +676,9 @@
   padding-right: 0.75em;
   text-align: right;
 
-  -webkit-border-radius: 0.2em 0em 0em 0.2em;
-  -moz-border-radius: 0.2em 0em 0em 0.2em;
-  border-radius: 0.2em 0em 0em 0.2em;
+  -webkit-border-radius: @borderRadius 0em 0em @borderRadius;
+  -moz-border-radius: @borderRadius 0em 0em @borderRadius;
+  border-radius: @borderRadius 0em 0em @borderRadius;
 }
 .ui.attached.right.button {
   display: inline-block;
@@ -685,9 +686,9 @@
   padding-left: 0.75em;
   text-align: left;
 
-  -webkit-border-radius: 0em 0.2em 0.2em 0em;
-  -moz-border-radius: 0em 0.2em 0.2em 0em;
-  border-radius: 0em 0.2em 0.2em 0em;
+  -webkit-border-radius: 0em @borderRadius @borderRadius 0em;
+  -moz-border-radius: 0em @borderRadius @borderRadius 0em;
+  border-radius: 0em @borderRadius @borderRadius 0em;
 }
 
 
@@ -979,7 +980,7 @@
 /*--- Red ---*/
 .ui.red.buttons .button,
 .ui.red.button {
-  background-color: #D95C5C;
+  background-color: @primaryColor;
   color: #FFFFFF;
 }
 .ui.red.buttons .button:hover,
@@ -1099,7 +1100,7 @@
 ----------------*/
 .ui.negative.buttons .button,
 .ui.negative.button {
-  background-color: #D95C5C !important;
+  background-color: @primaryColor !important;
   color: #FFFFFF;
 }
 .ui.negative.buttons .button:hover,
@@ -1144,12 +1145,12 @@
 }
 .ui.buttons .button:first-child  {
   margin-left: 0em;
-  border-top-left-radius: 0.2em;
-  border-bottom-left-radius: 0.2em;
+  border-top-left-radius: @borderRadius;
+  border-bottom-left-radius: @borderRadius;
 }
 .ui.buttons .button:last-child {
-  border-top-right-radius: 0.2em;
-  border-bottom-right-radius: 0.2em;
+  border-top-right-radius: @borderRadius;
+  border-bottom-right-radius: @borderRadius;
 }
 
 /* Vertical  Style */
@@ -1170,9 +1171,9 @@
 .ui.vertical.buttons .massive.button:first-child,
 .ui.vertical.buttons .huge.button:first-child {
   margin-top: 0px;
-  -moz-border-radius: 0.2em 0.2em 0px 0px;
-  -webkit-border-radius: 0.2em 0.2em 0px 0px;
-  border-radius: 0.2em 0.2em 0px 0px;
+  -moz-border-radius: @borderRadius @borderRadius 0px 0px;
+  -webkit-border-radius: @borderRadius @borderRadius 0px 0px;
+  border-radius: @borderRadius @borderRadius 0px 0px;
 }
 .ui.vertical.buttons .button:last-child,
 .ui.vertical.buttons .mini.button:last-child,
@@ -1181,7 +1182,7 @@
 .ui.vertical.buttons .massive.button:last-child,
 .ui.vertical.buttons .huge.button:last-child,
 .ui.vertical.buttons .gigantic.button:last-child {
-  -moz-border-radius: 0px 0px 0.2em 0.2em;
-  -webkit-border-radius: 0px 0px 0.2em 0.2em;
-  border-radius: 0px 0px 0.2em 0.2em;
+  -moz-border-radius: 0px 0px @borderRadius @borderRadius;
+  -webkit-border-radius: 0px 0px @borderRadius @borderRadius;
+  border-radius: 0px 0px @borderRadius @borderRadius;
 }
diff --git a/src/elements/button.variables b/src/elements/button.variables
new file mode 100755
index 000000000..881f415c5
--- /dev/null
+++ b/src/elements/button.variables
@@ -0,0 +1,36 @@
+/*******************************
+           Variables
+*******************************/
+
+@import "../global.variables";
+
+/*-------------------
+ Unchanged Globals
+--------------------*/
+
+// @primaryColor       : @primaryColor;
+// @secondaryColor     : @secondaryColor;
+//
+// @transitionDuration : @transitionDuration;
+// @transitionEasing   : @transitionEasing;
+
+
+/*-------------------
+   Modified Globals
+--------------------*/
+
+@neutral : #E8E8E8;
+
+
+/*-------------------
+   Button Variables
+--------------------*/
+
+@verticalPadding    : 0.8em;
+@horizontalPadding  : 1.5em;
+
+@borderRadius       : 0.2em;
+
+
+@boxShadow          : 0em -0.185rem 0em rgba(0, 0, 0, 0.1) inset;
+@activeBoxShadow    : 0px 1px 0.2em 0px rgba(0, 0, 0, 0.3) inset;
\ No newline at end of file
diff --git a/src/global.variables b/src/global.variables
new file mode 100755
index 000000000..dd5413785
--- /dev/null
+++ b/src/global.variables
@@ -0,0 +1,237 @@
+
+/*******************************
+            Site
+*******************************/
+
+/*-------------------
+       Page
+--------------------*/
+
+@bodyColor  : #FCFCFC;
+@fontSize   : 15px;
+
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont : 'Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;';
+@pageFont   : 'Open Sans, Helvetica Neue, Helvetica, Arial, sans-serif;';
+
+
+
+/*******************************
+             Colors
+*******************************/
+
+
+/*-------------------
+      Background
+--------------------*/
+
+/*---  Colors  ---*/
+@primaryColor   : #D95C5C;
+@secondaryColor : #00B5AD;
+@tertiaryColor  : #00B5AD;
+
+@blue           : #6ECFF5;
+@gold           : #FFCB08;
+@green          : #5BBD72;
+@orange         : #E96633;
+@pink           : #D9499A;
+@purple         : #564F8A;
+@red            : #F00000;
+@teal           : #00B5AD;
+@white          : #FFFFFF;
+@yellow         : #F6F3D5;
+
+/*---  Emotive  ---*/
+@positiveColor : #5BBD72;
+@negativeColor : #D95C5C;
+
+@infoColor     : #E6F4F9;
+@warningColor  : #96904D;
+@errorColor    : #D95C5C;
+
+/*---  Neutrals  ---*/
+@darkGrey       : #231F20;
+@midGrey        : #5C6166;
+@grey           : #9DA6AB;
+@lightGrey      : #DCDDDE;
+
+@neutral        : #CCCCCC;
+
+@white          : #FFFFFF;
+@offWhite       : #FAFAFA;
+@darkWhite      : #F0F0F0;
+
+
+/*-------------------
+     Text Colors
+--------------------*/
+
+@darkTextColor  : rgba(0, 0, 0, 0.85);
+@textColor      : rgba(0, 0, 0, 0.7);
+@lightTextColor : rgba(0, 0, 0, 0.4);
+
+@disabledTextColor : rgba(0, 0, 0, 0.2);
+
+
+/*-------------------
+      Borders
+--------------------*/
+
+@borderColor      : rgba(0, 0, 0, 0.1);
+@solidBorderColor : #DDDDDD;
+
+
+/*-------------------
+        Sizes
+--------------------*/
+
+@mini    : 0.7;
+@tiny    : 0.8;
+@small   : 0.875;
+@medium  : 1;
+@large   : 1.125;
+@big     : 1.25;
+@huge    : 1.375;
+@massive : 1.5;
+
+
+/*-------------------
+     Transitions
+--------------------*/
+
+@transitionDuration : 0.25s;
+@transitionEasing   : ease;
+
+
+
+/*******************************
+         Colors States
+*******************************/
+
+
+/*-------------------
+        Hover
+--------------------*/
+
+/*---  Colors  ---*/
+@primaryColorHover   : lighten( saturate(@primaryColor, 10), 10);
+@secondaryColorHover : lighten( saturate(@secondaryColor, 10), 10);
+@tertiaryColorHover  : lighten( saturate(@tertiaryColor, 10), 10);
+
+@blueHover           : lighten( saturate(@blue, 10), 10);
+@goldHover           : lighten( saturate(@gold, 10), 10);
+@greenHover          : lighten( saturate(@green, 10), 10);
+@orangeHover         : lighten( saturate(@orange, 10), 10);
+@pinkHover           : lighten( saturate(@pink, 10), 10);
+@purpleHover         : lighten( saturate(@purple, 10), 10);
+@redHover            : lighten( saturate(@red, 10), 10);
+@tealHover           : lighten( saturate(@teal, 10), 10);
+@whiteHover          : lighten( saturate(@white, 10), 10);
+@yellowHover         : lighten( saturate(@yellow, 10), 10);
+
+/*---  Emotive  ---*/
+@positiveColorHover  : lighten( saturate(@positiveColor, 10), 10);
+@negativeColorHover  : lighten( saturate(@negativeColor, 10), 10);
+
+@infoColorHover      : lighten( saturate(@infoColor, 10), 10);
+@warningColorHover   : lighten( saturate(@warningColor, 10), 10);
+@errorColorHover     : lighten( saturate(@errorColor, 10), 10);
+
+/*---  Neutrals  ---*/
+@darkGreyHover       : lighten( saturate(@darkGrey, 10), 10);
+@midGreyHover        : lighten( saturate(@midGrey, 10), 10);
+@greyHover           : lighten( saturate(@grey, 10), 10);
+@lightGreyHover      : lighten( saturate(@lightGrey, 10), 10);
+
+@neutralHover        : lighten( saturate(@neutral, 10), 10);
+
+@whiteHover          : lighten( saturate(@white, 10), 10);
+@offWhiteHover       : lighten( saturate(@offWhite, 10), 10);
+@darkWhiteHover      : lighten( saturate(@darkWhite, 10), 10);
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+
+/*---  Colors  ---*/
+@primaryColorDown   : darken(@primaryColor, 10);
+@secondaryColorDown : darken(@secondaryColor, 10);
+@tertiaryColorDown  : darken(@tertiaryColor, 10);
+
+@blueDown           : darken(@blue, 10);
+@goldDown           : darken(@gold, 10);
+@greenDown          : darken(@green, 10);
+@orangeDown         : darken(@orange, 10);
+@pinkDown           : darken(@pink, 10);
+@purpleDown         : darken(@purple, 10);
+@redDown            : darken(@red, 10);
+@tealDown           : darken(@teal, 10);
+@whiteDown          : darken(@white, 10);
+@yellowDown         : darken(@yellow, 10);
+
+/*---  Emotive  ---*/
+@positiveColorDown  : darken(@positiveColor, 10);
+@negativeColorDown  : darken(@negativeColor, 10);
+
+@infoColorDown      : darken(@infoColor, 10);
+@warningColorDown   : darken(@warningColor, 10);
+@errorColorDown     : darken(@errorColor, 10);
+
+/*---  Neutrals  ---*/
+@darkGreyDown       : darken(@darkGrey, 10);
+@midGreyDown        : darken(@midGrey, 10);
+@greyDown           : darken(@grey, 10);
+@lightGreyDown      : darken(@lightGrey, 10);
+
+@neutralDown        : darken(@neutral, 10);
+
+@whiteDown          : darken(@white, 10);
+@offWhiteDown       : darken(@offWhite, 10);
+@darkWhiteDown      : darken(@darkWhite, 10);
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Standard  ---*/
+@primaryColorActive   : lighten(@primaryColor, 10);
+@secondaryColorActive : lighten(@secondaryColor, 10);
+@tertiaryColorActive  : lighten(@tertiaryColor, 10);
+
+@blueActive           : lighten(@blue, 10);
+@goldActive           : lighten(@gold, 10);
+@greenActive          : lighten(@green, 10);
+@orangeActive         : lighten(@orange, 10);
+@pinkActive           : lighten(@pink, 10);
+@purpleActive         : lighten(@purple, 10);
+@redActive            : lighten(@red, 10);
+@tealActive           : lighten(@teal, 10);
+@whiteActive          : lighten(@white, 10);
+@yellowActive         : lighten(@yellow, 10);
+
+/*---  Emotive  ---*/
+@positiveColorActive  : lighten(@positiveColor, 10);
+@negativeColorActive  : lighten(@negativeColor, 10);
+
+@infoColorActive      : lighten(@infoColor, 10);
+@warningColorActive   : lighten(@warningColor, 10);
+@errorColorActive     : lighten(@errorColor, 10);
+
+/*---  Neutrals  ---*/
+@darkGreyActive       : lighten(@darkGrey, 10);
+@midGreyActive        : lighten(@midGrey, 10);
+@greyActive           : lighten(@grey, 10);
+@lightGreyActive      : lighten(@lightGrey, 10);
+
+@neutralActive        : lighten(@neutral, 10);
+
+@whiteActive          : lighten(@white, 10);
+@offWhiteActive       : lighten(@offWhite, 10);
+@darkWhiteActive      : lighten(@darkWhite, 10);