diff --git a/src/elements/button.less b/src/elements/button.less
index 21e645e1a..a8911b609 100755
--- a/src/elements/button.less
+++ b/src/elements/button.less
@@ -10,84 +10,14 @@
  */
 
 /*******************************
-           Variables
+             Theme
 *******************************/
 
-@import "../global.variables";
+@import "../theme.less";
 
-/*-------------------
-    Globals Used
---------------------*/
-
-// (Color Variables)
-// @transitionDuration
-// @transitionEasing
-// @iconWidth
-// @borderColor
-
-/*-------------------
-   Button Variables
---------------------*/
-
-/* Button Variables */
-@textTransform: uppercase;
-@fontWeight: bold;
-@textColor: rgba(0, 0, 0, 0.6);
-
-@borderRadius: 0.25em;
-
-@shadowDistance: 0.133em;
-@shadowOffset: (@shadowDistance / 2 + 0.05em);
-
-@verticalPadding: 0.8em;
-@horizontalPadding: 1.5em;
-
-@compactVerticalPadding: (@verticalPadding * 0.75);
-@compactHorizontalPadding: (@horizontalPadding * 0.75);
-
-@backgroundColor: #FAFAFA;
-@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
-
-@boxShadow:
-  0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
-  0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
-;
-
-@hoverBackgroundColor: '';
-@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
-@hoverBoxShadow: '';
-
-@downBackgroundColor: #F1F1F1;
-@downBackgroundImage: '';
-@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
-
-@activeBackgroundColor: #EAEAEA;
-@activeBackgroundImage: none;
-@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
-
-@iconMargin: 0.6em;
-@iconHoverOpacity: 0.85;
-@iconButtonOpacity: 0.9;
-
-@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
-@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
-@labeledIconBoxShadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
-
-@floatedMargin: 0.25em;
-
-@animationDuration: 0.3s;
-@animationEasing: ease;
-@fadeScaleHigh: 1.5;
-@fadeScaleLow: 0.75;
-
-@mini: 0.7rem;
-@tiny: 0.8rem;
-@small: 0.875rem;
-@medium: 1rem;
-@large: 1.125rem;
-@big: 1.25rem;
-@huge: 1.375rem;
-@massive: 1.5rem;
+@element: 'button';
+.importVariables(@element);
+.importOverides(@element);
 
 
 /*******************************
diff --git a/src/elements/header.less b/src/elements/header.less
index aa8367471..cd48b3643 100755
--- a/src/elements/header.less
+++ b/src/elements/header.less
@@ -13,33 +13,11 @@
            Variables
 *******************************/
 
-@import "../global.variables";
-
-/*-------------------
-    Globals Used
---------------------*/
-
-// @white
-// @blue
-// @red
-// @green
-// @purple
-// @teal
-// @black
-
-/*-------------------
-   Modified Globals
---------------------*/
-
-@tiny: 1em;
-@small: 1.1em;
-@medium: 1.33em;
-@large: 1.75em;
-@huge: 2em;
+@element: 'header';
 
-/*-------------------
-   Header Variables
---------------------*/
+@import "../global.variables";
+.importVariables(@element);
+.importOverides(@element);
 
 
 /*******************************
diff --git a/src/elements/icon.less b/src/elements/icon.less
index 6786a7a11..a2db76f94 100755
--- a/src/elements/icon.less
+++ b/src/elements/icon.less
@@ -22,18 +22,28 @@
  *  - The Font Awesome font is licensed under SIL OFL 1.1 -
  *    http://scripts.sil.org/OFL
 
+/*******************************
+           Variables
+*******************************/
+
+@element: 'icon';
+@import '../semantic.config';
+
+.importVariables(@element);
+.importOverrides(@element);
+
 /*******************************
              Icon
 *******************************/
 
 @font-face {
   font-family: 'Icons';
-  src: url(../fonts/icons.eot);
+  src: url("@{iconFont}.eot");
   src:
-    url(../fonts/icons.eot?#iefix) format('embedded-opentype'),
-    url(../fonts/icons.woff) format('woff'),
-    url(../fonts/icons.ttf) format('truetype'),
-    url(../fonts/icons.svg#icons) format('svg')
+    url("@{iconFont}.eot?#iefix") format('embedded-opentype'),
+    url("@{iconFont}.woff") format('woff'),
+    url("@{iconFont}.ttf") format('truetype'),
+    url("@{iconFont}.svg#icons") format('svg')
   ;
 
   font-style: normal;
@@ -45,12 +55,12 @@
 
 i.icon {
   display: inline-block;
-  opacity: 0.75;
+  opacity: @opacity;
 
-  margin: 0em 0.25em 0em 0em;
+  margin: 0em @margin 0em 0em;
 
-  width: 1.23em;
-  height: 1em;
+  width: @width;
+  height: @height;
 
   font-family: 'Icons';
   font-style: normal;
@@ -60,14 +70,7 @@ i.icon {
   text-align: center;
 
   speak: none;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
   box-sizing: border-box;
-
-  -webkit-font-smoothing: antialiased;
-  -moz-font-smoothing: antialiased;
   font-smoothing: antialiased;
 }
 
@@ -462,7 +465,7 @@ i.icon.left,
 i.icon.left,
 i.icon.left {
   width: auto;
-  margin: 0em 0.5em 0em 0em;
+  margin: 0em @directionMargin 0em 0em;
 }
 
 /* right side icons */
@@ -471,7 +474,7 @@ i.icon.up,
 i.icon.down,
 i.icon.right {
   width: auto;
-  margin: 0em 0em 0em 0.5em;
+  margin: 0em 0em 0em @directionMargin;
 }
 
 
@@ -484,70 +487,16 @@ i.icon.right {
 ---------------*/
 
 i.icon.loading {
-  -webkit-animation: icon-loading 2s linear infinite;
-  -moz-animation: icon-loading 2s linear infinite;
-  -ms-animation: icon-loading 2s linear infinite;
-  -o-animation: icon-loading 2s linear infinite;
-  animation: icon-loading 2s linear infinite;
+  animation: icon-loading @loadingDuration linear infinite;
 }
 @keyframes icon-loading {
  from {
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
  to {
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-    -ms-transform: rotate(360deg);
     transform: rotate(360deg);
  }
 }
-@-moz-keyframes icon-loading {
- from {
-   -moz-transform: rotate(0deg);
-   transform: rotate(0deg);
- }
- to {
-   -moz-transform: rotate(360deg);
-   transform: rotate(360deg);
- }
-}
-@-webkit-keyframes icon-loading {
- from {
-   -webkit-transform: rotate(0deg);
-   transform: rotate(0deg);
- }
- to {
-   -webkit-transform: rotate(360deg);
-   transform: rotate(360deg);
- }
-}
-@-ms-keyframes icon-loading {
- from {
-   -ms-transform: rotate(0deg);
-   transform: rotate(0deg);
- }
- to {
-   -ms-transform: rotate(360deg);
-   transform: rotate(360deg);
- }
-}
-@-o-keyframes icon-loading {
- from {
-   -o-transform: rotate(0deg);
-   transform: rotate(0deg);
- }
- to {
-   -o-transform: rotate(360deg);
-   transform: rotate(360deg);
- }
-}
-
-
 
 /*******************************
              States
@@ -566,7 +515,7 @@ i.emphasized.icon {
 }
 
 i.icon.disabled {
-  opacity: 0.3;
+  opacity: @disabledOpacity;
 }
 
 
@@ -581,12 +530,8 @@ i.icon.disabled {
 
 i.link.icon {
   cursor: pointer;
-  opacity: 0.7;
-  -webkit-transition: opacity 0.3s ease-out;
-  -moz-transition: opacity 0.3s ease-out;
-  -o-transition: opacity 0.3s ease-out;
-  -ms-transition: opacity 0.3s ease-out;
-  transition: opacity 0.3s ease-out;
+  opacity: @opacity;
+  transition: opacity @transitionDuration @transitionEasing;
 }
 i.link.icon:hover {
   opacity: 1 !important;
@@ -597,24 +542,18 @@ i.link.icon:hover {
 --------------------*/
 
 i.circular.icon {
-  -webkit-border-radius: 500em !important;
-  -moz-border-radius: 500em !important;
   border-radius: 500em !important;
 
-  padding: 0.5em 0.35em !important;
+  padding: @circularPadding !important;
 
-  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  box-shadow: @circularShadow;
 
   line-height: 1 !important;
-  width: 2em !important;
-  height: 2em !important;
+  width: @circularSize !important;
+  height: @circularSize !important;
 }
 i.circular.inverted.icon {
   border: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none;
 }
 
@@ -624,17 +563,9 @@ i.circular.inverted.icon {
 
 i.flipped.icon,
 i.horizontally.flipped.icon {
-  -webkit-transform: scale(-1, 1);
-  -moz-transform: scale(-1, 1);
-  -o-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 i.vertically.flipped.icon {
-  -webkit-transform: scale(1, -1);
-  -moz-transform: scale(1, -1);
-  -o-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
   transform: scale(1, -1);
 }
 
@@ -645,19 +576,11 @@ i.vertically.flipped.icon {
 i.rotated.icon,
 i.right.rotated.icon,
 i.clockwise.rotated.icon {
-  -webkit-transform: rotate(90deg);
-  -moz-transform: rotate(90deg);
-  -o-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 
 i.left.rotated.icon,
 i.counterclockwise.rotated.icon {
-  -webkit-transform: rotate(-90deg);
-  -moz-transform: rotate(-90deg);
-  -o-transform: rotate(-90deg);
-  -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
 }
 
@@ -666,20 +589,16 @@ i.counterclockwise.rotated.icon {
 --------------------*/
 
 i.square.icon {
-  width: 2em;
-  height: 2em;
-  padding: 0.5em 0.35em !important;
+  width: @squareSize;
+  height: @squareSize;
 
-  -webkit-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+  padding: @squareSize !important;
+  box-shadow: @squareShadow;
 
   vertical-align: baseline;
 }
 i.square.inverted.icon {
   border: none;
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
   box-shadow: none;
 }
 
@@ -697,78 +616,98 @@ i.inverted.icon {
        Colors
 --------------------*/
 
-i.blue.icon {
-  color: #6ECFF5 !important;
-}
 i.black.icon {
-  color: #5C6166 !important;
+  color: @black !important;
+}
+i.blue.icon {
+  color: @blue !important;
 }
 i.green.icon {
-  color: #A1CF64 !important;
+  color: @green !important;
 }
-i.red.icon {
-  color: #D95C5C !important;
+i.orange.icon {
+  color: @orange !important;
+}
+i.pink.icon {
+  color: @pink !important;
 }
 i.purple.icon {
-  color: #564F8A !important;
+  color: @purple !important;
+}
+i.red.icon {
+  color: @red !important;
 }
 i.teal.icon {
-  color: #00B5AD !important;
+  color: @teal !important;
+}
+i.yellow.icon {
+  color: @yellow !important;
 }
 
 /*-------------------
    Inverted Colors
 --------------------*/
 
-i.inverted.black.icon {
-  background-color: #5C6166 !important;
+i.black.icon {
+  background-color: @black !important;
   color: #FFFFFF !important;
 }
-i.inverted.blue.icon {
-  background-color: #6ECFF5 !important;
+i.blue.icon {
+  background-color: @blue !important;
   color: #FFFFFF !important;
 }
-i.inverted.green.icon {
-  background-color: #A1CF64 !important;
+i.green.icon {
+  background-color: @green !important;
   color: #FFFFFF !important;
 }
-i.inverted.red.icon {
-  background-color: #D95C5C !important;
+i.orange.icon {
+  background-color: @orange !important;
   color: #FFFFFF !important;
 }
-i.inverted.purple.icon {
-  background-color: #564F8A !important;
+i.pink.icon {
+  background-color: @pink !important;
   color: #FFFFFF !important;
 }
-i.inverted.teal.icon {
-  background-color: #00B5AD !important;
+i.purple.icon {
+  background-color: @purple !important;
+  color: #FFFFFF !important;
+}
+i.red.icon {
+  background-color: @red !important;
+  color: #FFFFFF !important;
+}
+i.teal.icon {
+  background-color: @teal !important;
+  color: #FFFFFF !important;
+}
+i.yellow.icon {
+  background-color: @yellow !important;
   color: #FFFFFF !important;
 }
-
 
 /*-------------------
         Sizes
 --------------------*/
 
 i.small.icon {
-  font-size: 0.875em;
+  font-size: @small;
 }
 i.icon {
-  font-size: 1em;
+  font-size: @medium;
 }
 i.large.icon {
-  font-size: 1.5em;
+  font-size: @large;
   vertical-align: middle;
 }
 i.big.icon {
-  font-size: 2em;
+  font-size: @big;
   vertical-align: middle;
 }
 i.huge.icon {
-  font-size: 4em;
+  font-size: @huge;
   vertical-align: middle;
 }
 i.massive.icon {
-  font-size: 8em;
+  font-size: @massive;
   vertical-align: middle;
-}
+}
\ No newline at end of file
diff --git a/src/elements/segment.less b/src/elements/segment.less
index a98462c54..c0cd07ee3 100755
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@@ -14,34 +14,10 @@
            Variables
 *******************************/
 
-@import "../global.variables";
-
-/*-------------------
-    Globals Used
---------------------*/
-
-/*
-@borderColor
-
-*/
-
-/*-------------------
-   Segment Variables
---------------------*/
-
-@verticalPadding: 1em;
-@horizontalPadding: 1em;
-
-@margin: 1em;
-@borderRadius: 5px;
-
-@pageGridMargin: 2 * @verticalPadding;
-
-@coloredBorderSize: 0.2em;
-
-@secondaryColor: #FAF9FA;
-@tertiaryColor:  #EBEBEB;
+@theme: 'semantic';
 
+@import "../global.variables";
+@import "../theme/@{theme}/segment.variables";
 
 
 /*******************************
diff --git a/src/semantic.config b/src/semantic.config
new file mode 100755
index 000000000..816ccec4b
--- /dev/null
+++ b/src/semantic.config
@@ -0,0 +1,17 @@
+/*-------------------
+       Theme
+--------------------*/
+
+@theme       : 'semantic';
+
+.importVariables(element) {
+  // check if child theme exists
+  @import "theme/semantic/@{element}.variables";
+}
+.importOverrides(element) {
+  // check if child theme exists
+  @import "theme/semantic/@{element}.overrides";
+}
+
+@import "theme/semantic/global.variables";
+
diff --git a/src/theme/semantic/button.overrides b/src/theme/semantic/button.overrides
new file mode 100755
index 000000000..c5c53367f
--- /dev/null
+++ b/src/theme/semantic/button.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/src/theme/semantic/button.variables b/src/theme/semantic/button.variables
new file mode 100755
index 000000000..9c4d3fd6c
--- /dev/null
+++ b/src/theme/semantic/button.variables
@@ -0,0 +1,74 @@
+
+/*-------------------
+    Globals Used
+--------------------*/
+
+// (Color Variables)
+// @transitionDuration
+// @transitionEasing
+// @iconWidth
+// @borderColor
+
+/*-------------------
+   Button Variables
+--------------------*/
+
+/* Button Variables */
+@textTransform: uppercase;
+@fontWeight: bold;
+@textColor: rgba(0, 0, 0, 0.6);
+
+@borderRadius: 0.25em;
+
+@shadowDistance: 0.133em;
+@shadowOffset: (@shadowDistance / 2 + 0.05em);
+
+@verticalPadding: 0.8em;
+@horizontalPadding: 1.5em;
+
+@compactVerticalPadding: (@verticalPadding * 0.75);
+@compactHorizontalPadding: (@horizontalPadding * 0.75);
+
+@backgroundColor: #FAFAFA;
+@backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
+
+@boxShadow:
+  0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
+  0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
+;
+
+@hoverBackgroundColor: '';
+@hoverBackgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
+@hoverBoxShadow: '';
+
+@downBackgroundColor: #F1F1F1;
+@downBackgroundImage: '';
+@downBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+
+@activeBackgroundColor: #EAEAEA;
+@activeBackgroundImage: none;
+@activeBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05) inset !important;
+
+@iconMargin: 0.6em;
+@iconHoverOpacity: 0.85;
+@iconButtonOpacity: 0.9;
+
+@labeledIconWidth: @iconWidth + (@verticalPadding * 2);
+@labeledIconBackgroundColor: rgba(0, 0, 0, 0.05);
+@labeledIconBoxShadow: -1px 0px 0px 0px rgba(0, 0, 0, 0.05) inset;
+
+@floatedMargin: 0.25em;
+
+@animationDuration: 0.3s;
+@animationEasing: ease;
+@fadeScaleHigh: 1.5;
+@fadeScaleLow: 0.75;
+
+@mini: 0.7rem;
+@tiny: 0.8rem;
+@small: 0.875rem;
+@medium: 1rem;
+@large: 1.125rem;
+@big: 1.25rem;
+@huge: 1.375rem;
+@massive: 1.5rem;
diff --git a/src/theme/semantic/global.variables b/src/theme/semantic/global.variables
new file mode 100755
index 000000000..5177cf0b5
--- /dev/null
+++ b/src/theme/semantic/global.variables
@@ -0,0 +1,298 @@
+/*******************************
+        Global Variables
+*******************************/
+
+/*-------------------
+        Paths
+--------------------*/
+
+@imageFolder : '../images';
+
+/*-------------------
+       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;';
+
+/*-------------------
+       Icons
+--------------------*/
+
+/* Width of largest icon */
+@iconWidth : 1.23em;
+
+/*******************************
+           BG Colors
+*******************************/
+
+@subtleTransparentBlack : rgba(0, 0, 0, 0.01);
+@transparentBlack       : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+
+@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
+@transparentWhite       : rgba(255, 255, 255, 0.05);
+@strongTransparentWhite : rgba(255, 255, 255, 0.01);
+
+
+/*******************************
+             Colors
+*******************************/
+
+/*-------------------
+     Background
+--------------------*/
+
+/*---  Colors  ---*/
+@blue           : #6ECFF5;
+@green          : #5BBD72;
+@orange         : #E96633;
+@pink           : #D9499A;
+@purple         : #564F8A;
+@red            : #D95C5C;
+@teal           : #00B5AD;
+@yellow         : #FFCB08;
+
+@primaryColor   : @teal;
+@secondaryColor : @black;
+@tertiaryColor  : @orange;
+
+/*---  Emotive  ---*/
+@positiveColor  : @green;
+@negativeColor  : @red;
+
+@infoColor      : #E6F4F9;
+@warningColor   : #96904D;
+@errorColor     : #D95C5C;
+
+/*---  Neutrals  ---*/
+@darkBlack      : #232323;
+@black          : #555555;
+@lightBlack     : #999999;
+
+@darkGrey       : #AAAAAA;
+@grey           : #CCCCCC;
+@lightGrey      : #DCDDDE;
+
+@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);
+
+@selectedTextColor : rgba(0, 0, 0, 0.8);
+@disabledTextColor : rgba(0, 0, 0, 0.2);
+
+/*-------------------
+     Brand Colors
+--------------------*/
+
+@facebookColor   : #3B579D;
+@twitterColor    : #4092CC;
+@googlePlusColor : #D34836;
+@linkedInColor   : #1F88BE;
+@youtubeColor    : #CC181E;
+@instagramColor  : #49769C;
+@pinterestColor  : #00ACED;
+
+/*-------------------
+      Borders
+--------------------*/
+
+@circularRadius           : 500rem;
+
+@borderColor              : rgba(0, 0, 0, 0.1);
+@selectedBorderColor      : rgba(0, 0, 0, 0.2);
+@solidBorderColor         : #DDDDDD;
+
+@whiteBorderColor         : rgba(255, 255, 255, 0.3);
+@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
+
+/*-------------------
+        Sizes
+--------------------*/
+
+@mini        : 0.7em;
+@tiny        : 0.8em;
+@small       : 0.875em;
+@medium      : 1em;
+@large       : 1.125em;
+@big         : 1.25em;
+@huge        : 1.375em;
+@massive     : 1.5em;
+
+
+/*-------------------
+     Transitions
+--------------------*/
+
+@transitionDuration : 0.25s;
+@transitionEasing   : ease;
+
+
+/*******************************
+           States
+*******************************/
+
+/*-------------------
+      Disabled
+--------------------*/
+
+@disabledOpacity: 0.3;
+
+/*-------------------
+        Hover
+--------------------*/
+
+/*---  Colors  ---*/
+@primaryColorHover    : darken( saturate(@primaryColor, 10), 5);
+@secondaryColorHover  : darken( saturate(@secondaryColor, 10), 5);
+@tertiaryColorHover   : darken( saturate(@tertiaryColor, 10), 5);
+
+@blueHover            : darken( saturate(@blue, 10), 5);
+@greenHover           : darken( saturate(@green, 10), 5);
+@orangeHover          : darken( saturate(@orange, 10), 5);
+@pinkHover            : darken( saturate(@pink, 10), 5);
+@purpleHover          : darken( saturate(@purple, 10), 5);
+@redHover             : darken( saturate(@red, 10), 5);
+@tealHover            : darken( saturate(@teal, 10), 5);
+@yellowHover          : darken( saturate(@yellow, 10), 5);
+
+/*---  Emotive  ---*/
+@positiveColorHover   : darken( saturate(@positiveColor, 10), 5);
+@negativeColorHover   : darken( saturate(@negativeColor, 10), 5);
+
+@infoColorHover       : darken( saturate(@infoColor, 10), 5);
+@warningColorHover    : darken( saturate(@warningColor, 10), 5);
+@errorColorHover      : darken( saturate(@errorColor, 10), 5);
+
+/*---  Neutrals  ---*/
+@darkBlackHover       : darken( saturate(@darkBlack, 10), 5);
+@blackHover           : darken( saturate(@black, 10), 5);
+@lightBlackHover      : darken( saturate(@lightBlack, 10), 5);
+
+@lightGreyHover       : darken( saturate(@lightGrey, 10), 5);
+@greyHover            : darken( saturate(@grey, 10), 5);
+@darkGreyHover        : darken( saturate(@darkGrey, 10), 5);
+
+@whiteHover           : darken( saturate(@white, 10), 5);
+@offWhiteHover        : darken( saturate(@offWhite, 10), 5);
+@darkWhiteHover       : darken( saturate(@darkWhite, 10), 5);
+
+@facebookHoverColor   : darken( saturate(@facebookColor, 10), 5);
+@twitterHoverColor    : darken( saturate(@twitterColor, 10), 5);
+@googlePlusHoverColor : darken( saturate(@googlePlusColor, 10), 5);
+@linkedInHoverColor   : darken( saturate(@linkedInColor, 10), 5);
+@youtubeHoverColor    : darken( saturate(@youtubeColor, 10), 5);
+@instagramHoverColor  : darken( saturate(@instagramColor, 10), 5);
+@pinterestHoverColor  : darken( saturate(@pinterestColor, 10), 5);
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+
+/*---  Colors  ---*/
+@primaryColorDown    : darken(@primaryColor, 15);
+@secondaryColorDown  : darken(@secondaryColor, 15);
+@tertiaryColorDown   : darken(@tertiaryColor, 15);
+
+@blueDown            : darken(@blue, 15);
+@greenDown           : darken(@green, 15);
+@orangeDown          : darken(@orange, 15);
+@pinkDown            : darken(@pink, 15);
+@purpleDown          : darken(@purple, 15);
+@redDown             : darken(@red, 15);
+@tealDown            : darken(@teal, 15);
+@yellowDown          : darken(@yellow, 15);
+
+/*---  Emotive  ---*/
+@positiveColorDown   : darken(@positiveColor, 15);
+@negativeColorDown   : darken(@negativeColor, 15);
+
+@infoColorDown       : darken(@infoColor, 15);
+@warningColorDown    : darken(@warningColor, 15);
+@errorColorDown      : darken(@errorColor, 15);
+
+/*---  Neutrals  ---*/
+@darkBlackDown       : darken(@darkBlack, 15);
+@blackDown           : darken(@black, 15);
+@lightBlackDown      : darken(@lightBlack, 15);
+
+@lightGreyDown       : darken(@lightGrey, 15);
+@greyDown            : darken(@grey, 15);
+@darkGreyDown        : darken(@darkGrey, 15);
+
+@whiteDown           : darken(@white, 15);
+@offWhiteDown        : darken(@offWhite, 15);
+@darkWhiteDown       : darken(@darkWhite, 15);
+
+@facebookDownColor   : darken(@facebookColor, 15);
+@twitterDownColor    : darken(@twitterColor, 15);
+@googlePlusDownColor : darken(@googlePlusColor, 15);
+@linkedInDownColor   : darken(@linkedInColor, 15);
+@youtubeDownColor    : darken(@youtubeColor, 15);
+@instagramDownColor  : darken(@instagramColor, 15);
+@pinterestDownColor  : darken(@pinterestColor, 15);
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Standard  ---*/
+@primaryColorActive    : darken(@primaryColor, 10);
+@secondaryColorActive  : darken(@secondaryColor, 10);
+@tertiaryColorActive   : darken(@tertiaryColor, 10);
+
+@blueActive            : darken(@blue, 10);
+@greenActive           : darken(@green, 10);
+@orangeActive          : darken(@orange, 10);
+@pinkActive            : darken(@pink, 10);
+@purpleActive          : darken(@purple, 10);
+@redActive             : darken(@red, 10);
+@tealActive            : darken(@teal, 10);
+@yellowActive          : darken(@yellow, 10);
+
+/*---  Emotive  ---*/
+@positiveColorActive   : darken(@positiveColor, 10);
+@negativeColorActive   : darken(@negativeColor, 10);
+
+@infoColorActive       : darken(@infoColor, 10);
+@warningColorActive    : darken(@warningColor, 10);
+@errorColorActive      : darken(@errorColor, 10);
+
+/*---  Neutrals  ---*/
+@darkBlackActive       : darken(@darkBlack, 10);
+@blackActive           : darken(@black, 10);
+@lightBlackActive      : darken(@lightBlack, 10);
+
+@lightGreyActive       : darken(@lightGrey, 10);
+@greyActive            : darken(@grey, 10);
+@darkGreyActive        : darken(@darkGrey, 10);
+
+@whiteActive           : darken(@white, 10);
+@offWhiteActive        : darken(@offWhite, 10);
+@darkWhiteActive       : darken(@darkWhite, 10);
+
+@facebookActiveColor   : darken(@facebookColor, 10);
+@twitterActiveColor    : darken(@twitterColor, 10);
+@googlePlusActiveColor : darken(@googlePlusColor, 10);
+@linkedInActiveColor   : darken(@linkedInColor, 10);
+@youtubeActiveColor    : darken(@youtubeColor, 10);
+@instagramActiveColor  : darken(@instagramColor, 10);
+@pinterestActiveColor  : darken(@pinterestColor, 10);
diff --git a/src/theme/semantic/header.variables b/src/theme/semantic/header.variables
new file mode 100755
index 000000000..8f87b771f
--- /dev/null
+++ b/src/theme/semantic/header.variables
@@ -0,0 +1,25 @@
+/*-------------------
+    Globals Used
+--------------------*/
+
+// @white
+// @blue
+// @red
+// @green
+// @purple
+// @teal
+// @black
+
+/*-------------------
+   Modified Globals
+--------------------*/
+
+@tiny: 1em;
+@small: 1.1em;
+@medium: 1.33em;
+@large: 1.75em;
+@huge: 2em;
+
+/*-------------------
+   Header Variables
+--------------------*/
\ No newline at end of file
diff --git a/src/theme/semantic/icon.variables b/src/theme/semantic/icon.variables
new file mode 100755
index 000000000..e1be3da1b
--- /dev/null
+++ b/src/theme/semantic/icon.variables
@@ -0,0 +1,39 @@
+
+/*-------------------
+    Globals Used
+--------------------*/
+
+/*
+@disabledOpacity
+*/
+
+/*-------------------
+   Icon Variables
+--------------------*/
+
+@iconFont: '../fonts/icons';
+
+@opacity: 0.75;
+@width: 1.23em;
+@height: 1em;
+
+@margin: 0.25em;
+@directionMargin: 0.5em;
+
+@linkDuration: 0.3s;
+@loadingDuration: 2s;
+
+@circularSize: 2em;
+@circularPadding: 0.5em 0.35em;
+@circularShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
+@squareSize: 2em;
+@squarePadding: 0.5em 0.35em;
+@squareShadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
+
+@small: 0.875em;
+@medium: 1em;
+@large: 1.5em;
+@big: 2em;
+@huge: 4em;
+@massive: 8em;
\ No newline at end of file
diff --git a/src/theme/semantic/segment.variables b/src/theme/semantic/segment.variables
new file mode 100755
index 000000000..6993072fc
--- /dev/null
+++ b/src/theme/semantic/segment.variables
@@ -0,0 +1,27 @@
+
+/*-------------------
+    Globals Used
+--------------------*/
+
+/*
+@borderColor
+
+*/
+
+/*-------------------
+   Segment Variables
+--------------------*/
+
+@verticalPadding: 1em;
+@horizontalPadding: 1em;
+
+@margin: 1em;
+@borderRadius: 5px;
+
+@pageGridMargin: 2 * @verticalPadding;
+
+@coloredBorderSize: 0.2em;
+
+@secondaryColor: #FAF9FA;
+@tertiaryColor:  #EBEBEB;
+