diff --git a/gulpfile.js b/gulpfile.js
index b2ea922779..3d1927a3a9 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -294,6 +294,17 @@ gulp.task('sass', function() {
     .pipe(gulp.dest('dist/css/'));
 });
 
+gulp.task('sass.dark', function() {
+  return gulp.src('scripts/build/ionic.dark.scss')
+    .pipe(sass({
+      onError: function(err) {
+        console.log(err)
+      }
+    }))
+    .pipe(autoprefixer(buildConfig.autoprefixer))
+    .pipe(gulp.dest('dist/css/'));
+});
+
 gulp.task('fonts', function() {
   return gulp.src('ionic/components/icon/fonts/**/*')
     .pipe(gulp.dest('dist/fonts'));
diff --git a/ionic/components/app/colors.scss b/ionic/components/app/colors.scss
deleted file mode 100644
index c42a35a602..0000000000
--- a/ionic/components/app/colors.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-
-// App Colors
-// --------------------------------------------------
-// Color values and names can be changed here
-// inverse: A color that looks good as a foreground to the base
-//
-// Use get-color($style, base/inverse) to grab
-
-
-$colors: (
-
-
-  // Brand colors
-  // ----------------------
-  primary: (
-    base: #387ef5,
-    light: #387ef5,
-    inverse: #fff
-  ),
-
-  secondary: (
-    base: #32db64,
-    light: #32db64,
-    inverse: #fff
-  ),
-
-
-  // Action Colors
-  // ----------------------
-  danger: (
-    base: #f53d3d,
-    light: #f53d3d,
-    inverse: #fff,
-  ),
-
-
-  // Shade Colors
-  // ----------------------
-  light: (
-    base: #fff,
-    light: #ddd,
-    inverse: #444,
-  ),
-
-  stable: (
-    base: #f4f4f4,
-    light: #888,
-    inverse: #444,
-  ),
-
-  dark: (
-    base: #222,
-    light: #222,
-    inverse: #fff,
-  ),
-
-
-) !default;
-
-
-
-// Placeholder Colors
-// --------------------------------------------------
-// Default colors which are meant to be overridden
-
-$placeholder-background:      #f9f9f9 !default;
diff --git a/ionic/components/button/button-clear.scss b/ionic/components/button/button-clear.scss
new file mode 100644
index 0000000000..1f246e7c60
--- /dev/null
+++ b/ionic/components/button/button-clear.scss
@@ -0,0 +1,48 @@
+
+// Clear Button
+// --------------------------------------------------
+
+button,
+[button] {
+
+  &[clear] {
+    border-color: transparent;
+    background: transparent;
+    color: darken-or-lighten($button-color);
+
+    &.activated {
+      opacity: 0.4;
+    }
+  }
+
+}
+
+
+// Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-clear($fg-color) {
+
+  &[clear] {
+    border-color: transparent;
+    background: transparent;
+    color: $fg-color;
+  }
+
+}
+
+
+// Generate Clear Button Colors
+// --------------------------------------------------
+
+@each $color, $value in auxiliary-colors() {
+
+  button[#{$color}],
+  [button][#{$color}] {
+
+    $fg-color: darken-or-lighten($value);
+    @include button-clear($fg-color);
+
+  }
+
+}
diff --git a/ionic/components/button/button-outline.scss b/ionic/components/button/button-outline.scss
new file mode 100644
index 0000000000..3c2d36dd42
--- /dev/null
+++ b/ionic/components/button/button-outline.scss
@@ -0,0 +1,55 @@
+
+// Outline Button
+// --------------------------------------------------
+
+button,
+[button] {
+
+  &[outline] {
+    border: 1px solid $button-color;
+    background: $background-color;
+    color: $button-color;
+
+    &.activated {
+      opacity: 1;
+      color: $background-color;
+      background-color: $button-color;
+    }
+  }
+
+}
+
+
+// Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin button-outline($fg-color) {
+
+  &[outline] {
+    border-color: $fg-color;
+    background: $background-color;
+    color: $fg-color;
+
+    &.activated {
+      color: $background-color;
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Outline Clear Button Colors
+// --------------------------------------------------
+
+@each $color, $value in auxiliary-colors() {
+
+  button[#{$color}],
+  [button][#{$color}] {
+
+    $fg-color: darken-or-lighten($value);
+    @include button-outline($fg-color);
+
+  }
+
+}
diff --git a/ionic/components/button/button-size.scss b/ionic/components/button/button-size.scss
new file mode 100644
index 0000000000..a1800e0d4a
--- /dev/null
+++ b/ionic/components/button/button-size.scss
@@ -0,0 +1,31 @@
+
+// Button Sizes
+// --------------------------------------------------
+
+$button-large-font-size:          2rem !default;
+$button-large-height:             5.4rem !default;
+$button-large-padding:            1.4rem !default;
+
+$button-small-font-size:          1.3rem !default;
+$button-small-height:             2.8rem !default;
+$button-small-padding:            1.1rem !default;
+
+
+button,
+[button] {
+
+  &[large] {
+    padding: 0 $button-large-padding;
+    min-width: ($button-large-padding * 4);
+    min-height: $button-large-height;
+    font-size: $button-large-font-size;
+  }
+
+  &[small] {
+    padding: 0 $button-small-padding;
+    min-width: ($button-small-padding * 3);
+    min-height: $button-small-height;
+    font-size: $button-small-font-size;
+  }
+
+}
diff --git a/ionic/components/button/button.scss b/ionic/components/button/button.scss
index 8845f5be72..35a6ec5db4 100644
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -1,5 +1,5 @@
 
-// Core Button Variables
+// Button Variables
 // --------------------------------------------------
 
 $button-font-size:                1.6rem !default;
@@ -9,19 +9,16 @@ $button-height:                   4.4rem !default;
 $button-border-width:             1px !default;
 $button-border-radius:            4px !default;
 
-$button-large-font-size:          2rem !default;
-$button-large-height:             5.4rem !default;
-$button-large-padding:            1.4rem !default;
-
-$button-small-font-size:          1.3rem !default;
-$button-small-height:             2.8rem !default;
-$button-small-padding:            1.1rem !default;
-
 $button-round-border-radius:      64px !default;
 $button-round-padding:            0 2.6rem !default;
 
+$button-color:                    color(primary) !default;
+$button-color-activated:          darken-or-lighten($button-color) !default;
+$button-text-color:               inverse(primary) !default;
+$button-hover-opacity:            0.88 !default;
 
-// Core Button
+
+// Default Button
 // --------------------------------------------------
 
 button,
@@ -33,7 +30,8 @@ button,
   align-items: center;
   justify-content: center;
 
-  will-change: transform;
+  will-change: background-color, opacity;
+  transition: background-color, opacity 100ms linear;
 
   margin: $button-margin;
   line-height: 1;
@@ -58,46 +56,30 @@ button,
   padding: $button-padding;
   min-height: $button-height;
 
-  background: transparent;
-
   text-align: center;
   font-size: $button-font-size;
   border: transparent;
   border-radius: $button-border-radius;
 
-  &[large] {
-    padding: 0 $button-large-padding;
-    min-width: ($button-large-padding * 4);
-    min-height: $button-large-height;
-    font-size: $button-large-font-size;
+  background: $button-color;
+  color: $button-text-color;
+
+  &:hover,
+  &.hover {
+    opacity: $button-hover-opacity;
+    color: $button-text-color;
+    text-decoration: none;
   }
 
-  &[small] {
-    padding: 0 $button-small-padding;
-    min-width: ($button-small-padding * 3);
-    min-height: $button-small-height;
-    font-size: $button-small-font-size;
+  &.activated {
+    opacity: 1;
+    background-color: $button-color-activated;
   }
 
 
-  // Core Button Types
+  // Button Types
   // --------------------------------------------------
 
-  &[clear] {
-    border-color: transparent;
-    background: none;
-  }
-
-  &[outline] {
-    background: none;
-
-    &[full] {
-      border-radius: 0;
-      border-right-width: 0;
-      border-left-width: 0;
-    }
-  }
-
   &[block] {
     display: flex;
     clear: both;
@@ -117,13 +99,12 @@ button,
     border-radius: 0;
     border-right-width: 0;
     border-left-width: 0;
-  }
 
-  &.disabled,
-  &[disabled] {
-    opacity: .4;
-    cursor: default !important;
-    pointer-events: none;
+    &[outline] {
+      border-radius: 0;
+      border-right-width: 0;
+      border-left-width: 0;
+    }
   }
 
   &[round] {
@@ -131,6 +112,13 @@ button,
     padding: $button-round-padding;
   }
 
+  &.disabled,
+  &[disabled] {
+    opacity: 0.4;
+    cursor: default !important;
+    pointer-events: none;
+  }
+
 }
 
 
@@ -139,88 +127,38 @@ button,
   margin-top: 0;
 }
 
-
-// Button Misc
-// --------------------------------------------------
-
 a[button] {
   color: inherit;
   text-decoration: none;
 }
 
 
-// Core Button Mixins
+// Default Button Color Mixin
 // --------------------------------------------------
 
-@mixin button-default($bg-color, $fg-color) {
+@mixin button-default($bg-color, $bg-color-activated, $text-color) {
   background-color: $bg-color;
-  color: $fg-color;
-  transition: background-color,opacity 100ms linear;
-
-  &[full][outline] {
-    border-radius: 0;
-    border-right-width: 0;
-    border-left-width: 0;
-  }
-
-  &:hover,
-  &.hover {
-    opacity: 0.88;
-    color: $fg-color;
-    text-decoration: none;
-  }
+  color: $text-color;
 
   &.activated {
-    opacity: 1;
-    background-color: darken($bg-color, 12%);
-  }
-}
-
-@mixin button-clear($fg-color) {
-  &[clear] {
-    color: $fg-color;
-    background: none;
-
-    &.activated {
-      opacity: 0.4;
-    }
-  }
-}
-
-@mixin button-outline($fg-color) {
-  &[outline] {
-    border: 1px solid $fg-color;
-    background: transparent;
-    color: $fg-color;
-
-    &.activated {
-      color: white;
-      background-color: rgb(red($fg-color), green($fg-color), blue($fg-color));
-    }
+    background-color: $bg-color-activated;
   }
 }
 
 
-// Core Button Color Generation
+// Generate Default Button Colors
 // --------------------------------------------------
 
-@each $color, $value in $colors {
+@each $color, $value in auxiliary-colors() {
 
   button[#{$color}],
   [button][#{$color}] {
 
-    @if lightness(get-color($color, base)) > 90 {
-      $fg-color: get-color($color, inverse);
-    } @else {
-      $fg-color: get-color($color, base);
-    }
+    $bg-color: $value;
+    $bg-color-activated: darken-or-lighten($bg-color);
+    $text-color: inverse($color);
+    @include button-default($bg-color, $bg-color-activated, $text-color);
 
-    @include button-default(get-color($color, base),
-                            get-color($color, inverse));
-
-    @include button-clear($fg-color);
-
-    @include button-outline(get-color($color, light));
   }
 
 }
diff --git a/ionic/components/button/test/basic/main.html b/ionic/components/button/test/basic/main.html
index 9507319f4b..fdf67d56c6 100644
--- a/ionic/components/button/test/basic/main.html
+++ b/ionic/components/button/test/basic/main.html
@@ -1,5 +1,9 @@
 
-<div class="padding" style="text-align:center">
+<ion-toolbar>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <button>D</button>
@@ -7,12 +11,6 @@
     <button class="activated">D.activated</button>
   </p>
 
-  <p>
-    <button primary>P</button>
-    <button primary class="hover">P.hover</button>
-    <button primary class="activated">P.activated</button>
-  </p>
-
   <p>
     <button secondary>S</button>
     <button secondary class="hover">S.hover</button>
@@ -31,16 +29,10 @@
     <button light class="activated">L.activated</button>
   </p>
 
-  <p>
-    <button stable>S</button>
-    <button stable class="hover">S.hover</button>
-    <button stable class="activated">S.activated</button>
-  </p>
-
   <p>
     <button dark>D</button>
     <button dark class="hover">D.hover</button>
     <button dark class="activated">D.activated</button>
   </p>
 
-</div>
+</ion-content>
diff --git a/ionic/components/button/test/block/main.html b/ionic/components/button/test/block/main.html
index 0a95f61edf..695604a084 100644
--- a/ionic/components/button/test/block/main.html
+++ b/ionic/components/button/test/block/main.html
@@ -1,5 +1,9 @@
 
-<div class="padding">
+<ion-toolbar>
+  <ion-title>Block Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <a button block href="#">a[button][block]</a>
@@ -21,4 +25,4 @@
     <button block clear stable>button[block]</button>
   </p>
 
-</div>
+</ion-content>
diff --git a/ionic/components/button/test/clear/main.html b/ionic/components/button/test/clear/main.html
index 23535ee18c..178c7570dc 100644
--- a/ionic/components/button/test/clear/main.html
+++ b/ionic/components/button/test/clear/main.html
@@ -1,5 +1,9 @@
 
-<div class="padding" style="text-align:center">
+<ion-toolbar>
+  <ion-title>Clear Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <button clear>D</button>
@@ -7,12 +11,6 @@
     <button clear class="activated">D.activated</button>
   </p>
 
-  <p>
-    <button clear primary>P</button>
-    <button clear primary class="hover">P.hover</button>
-    <button clear primary class="activated">P.activated</button>
-  </p>
-
   <p>
     <button clear secondary>S</button>
     <button clear secondary class="hover">S.hover</button>
@@ -31,16 +29,10 @@
     <button clear light class="activated">L.activated</button>
   </p>
 
-  <p>
-    <button clear stable>S</button>
-    <button clear stable class="hover">S.hover</button>
-    <button clear stable class="activated">S.activated</button>
-  </p>
-
   <p>
     <button clear dark>D</button>
     <button clear dark class="hover">D.hover</button>
     <button clear dark class="activated">D.activated</button>
   </p>
 
-</div>
+</ion-content>
diff --git a/ionic/components/button/test/fab/main.html b/ionic/components/button/test/fab/main.html
index 5445ddb1b9..e1d50525f2 100644
--- a/ionic/components/button/test/fab/main.html
+++ b/ionic/components/button/test/fab/main.html
@@ -1,10 +1,16 @@
 
-<div>
-  <button fab fab-left fab-top primary><i class="icon ion-plus"></i></button>
+<ion-toolbar>
+  <ion-title>FAB Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content>
+
+  <button fab fab-left fab-top><i class="icon ion-plus"></i></button>
   <button fab fab-center fab-top secondary><i class="icon ion-plus"></i></button>
   <button fab fab-right fab-top danger><i class="icon ion-plus"></i></button>
 
   <button fab fab-left fab-bottom light><i class="icon ion-plus"></i></button>
-  <button fab fab-center fab-bottom stable><i class="icon ion-plus"></i></button>
+  <button fab fab-center fab-bottom><i class="icon ion-plus"></i></button>
   <button fab fab-right fab-bottom dark><i class="icon ion-plus"></i></button>
-</div>
+
+</ion-content>
diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html
index 9de5d7ae9a..15590211b5 100644
--- a/ionic/components/button/test/full/main.html
+++ b/ionic/components/button/test/full/main.html
@@ -1,20 +1,28 @@
 
-<div>
-  <a button full href="#">a[button][full]</a>
-  <button full>button[full]</button>
-</div>
+<ion-toolbar>
+  <ion-title>Full Buttons</ion-title>
+</ion-toolbar>
 
-<div>
-  <a button full primary href="#">a[button][full][primary]</a>
-  <button full primary>button[full][primary]</button>
-</div>
+<ion-content>
 
-<div>
-  <a button full outline primary href="#">a[button][full][outline][primary]</a>
-  <button full outline primary>button[full][outline][primary]</button>
-</div>
+  <div>
+    <a button full href="#">a[button][full]</a>
+    <button full>button[full]</button>
+  </div>
 
-<div>
-  <a button full clear primary href="#">a[button][full][clear][primary]</a>
-  <button full clear primary>button[full][clear][primary]</button>
-</div>
+  <div>
+    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
+    <button full outline secondary>button[full][outline][secondary]</button>
+  </div>
+
+  <div>
+    <a button full clear light href="#">a[button][full][clear][light]</a>
+    <button full clear light>button[full][clear][light]</button>
+  </div>
+
+  <div>
+    <a button full clear dark href="#">a[button][full][clear][dark]</a>
+    <button full clear dark>button[full][clear][dark]</button>
+  </div>
+
+</ion-content>
diff --git a/ionic/components/button/test/icons/main.html b/ionic/components/button/test/icons/main.html
index 385d93110a..1af779516d 100644
--- a/ionic/components/button/test/icons/main.html
+++ b/ionic/components/button/test/icons/main.html
@@ -1,97 +1,101 @@
 
-<div class="padding">
+<ion-toolbar>
+  <ion-title>Buttons Icons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding">
 
   <div>
-    <button primary>
+    <button>
       <icon name="ion-home"></icon>
       Left Icon
     </button>
-    <a button primary>
+    <a button>
       <icon name="ion-home"></icon>
       Left Icon
     </a>
   </div>
 
   <div>
-    <button primary>
+    <button>
       Right Icon
       <icon name="ion-star"></icon>
     </button>
-    <a button primary>
+    <a button>
       Right Icon
       <icon name="ion-star"></icon>
     </a>
   </div>
 
   <div>
-    <button primary>
+    <button>
       <icon name="ion-flag"></icon>
     </button>
-    <a button primary>
+    <a button>
       <icon name="ion-flag"></icon>
     </a>
   </div>
 
   <div>
-    <button large primary>
+    <button large>
       <icon name="ion-help-circled"></icon>
       Left, Large
     </button>
-    <a button large primary>
+    <a button large>
       <icon name="ion-help-circled"></icon>
       Left, Large
     </a>
   </div>
 
   <div>
-    <button large primary>
+    <button large>
       Right, Large
       <icon name="ion-settings"></icon>
     </button>
-    <a button large primary>
+    <a button large>
       Right, Large
       <icon name="ion-settings"></icon>
     </a>
   </div>
 
   <div>
-    <button large primary>
+    <button large>
       <icon name="ion-heart"></icon>
     </button>
-    <a button large primary>
+    <a button large>
       <icon name="ion-heart"></icon>
     </a>
   </div>
 
   <div>
-    <button small primary>
+    <button small>
       <icon name="ion-checkmark"></icon>
       Left, Small
     </button>
-    <a button small primary>
+    <a button small>
       <icon name="ion-checkmark"></icon>
       Left, Small
     </a>
   </div>
 
   <div>
-    <button small primary>
+    <button small>
       Right, Small
       <icon name="ion-forward"></icon>
     </button>
-    <a button small primary>
+    <a button small>
       Right, Small
       <icon name="ion-forward"></icon>
     </a>
   </div>
 
   <div>
-    <button small primary>
+    <button small>
       <icon name="ion-search"></icon>
     </button>
-    <a button small primary>
+    <a button small>
       <icon name="ion-search"></icon>
     </a>
   </div>
 
-</div>
+</ion-content>
diff --git a/ionic/components/button/test/outline/main.html b/ionic/components/button/test/outline/main.html
index 7055836e4b..fc5f4e9b33 100644
--- a/ionic/components/button/test/outline/main.html
+++ b/ionic/components/button/test/outline/main.html
@@ -1,5 +1,9 @@
 
-<div class="padding" style="text-align:center">
+<ion-toolbar>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding" style="text-align:center">
 
   <p>
     <button outline>D</button>
@@ -7,12 +11,6 @@
     <button outline class="activated">D.activated</button>
   </p>
 
-  <p>
-    <button outline primary>P</button>
-    <button outline primary class="hover">P.hover</button>
-    <button outline primary class="activated">P.activated</button>
-  </p>
-
   <p>
     <button outline secondary>S</button>
     <button outline secondary class="hover">S.hover</button>
@@ -31,12 +29,6 @@
     <button outline light class="activated">L.activated</button>
   </p>
 
-  <p>
-    <button outline stable>S</button>
-    <button outline stable class="hover">S.hover</button>
-    <button outline stable class="activated">S.activated</button>
-  </p>
-
   <p>
     <button outline dark>D</button>
     <button outline dark class="hover">D.hover</button>
@@ -44,15 +36,27 @@
   </p>
 
   <p>
-    <button outline primary block>button[outline][block][primary]</button>
+    <button outline block>button[outline][block]</button>
   </p>
 
   <p>
-    <button outline primary block class="hover">[outline][block][primary].hover</button>
+    <button outline block class="hover">[outline][block].hover</button>
   </p>
 
   <p>
-    <button outline primary block class="activated">[outline][block][primary].activated</button>
+    <button outline block class="activated">[outline][block].activated</button>
   </p>
 
-</div>
+  <p>
+    <button outline block secondary>button[outline][block][secondary]</button>
+  </p>
+
+  <p>
+    <button outline block secondary class="hover">[outline][block][secondary].hover</button>
+  </p>
+
+  <p>
+    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+  </p>
+
+</ion-content>
diff --git a/ionic/components/button/test/round/main.html b/ionic/components/button/test/round/main.html
index 5d91000905..21a6b57e80 100644
--- a/ionic/components/button/test/round/main.html
+++ b/ionic/components/button/test/round/main.html
@@ -1,18 +1,23 @@
 
-<div>
+<ion-toolbar>
+  <ion-title>Round Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding">
+  <button round>button</button>
   <button round light>button light</button>
-  <button round stable>button stable</button>
-  <button round primary>button primary</button>
   <button round secondary>button secondary</button>
   <button round danger>button danger</button>
   <button round dark>button dark</button>
+
+  <button round outline>button</button>
   <button round light outline>button light</button>
-  <button round stable outline>button stable</button>
-  <button round primary outline>button primary</button>
   <button round secondary outline>button secondary</button>
   <button round danger outline>button danger</button>
   <button round dark outline>button dark</button>
-</div>
+
+</ion-content>
+
 <style>
   button {
     display: block !important;
diff --git a/ionic/components/button/test/sizes/main.html b/ionic/components/button/test/sizes/main.html
index 6df91b7a74..91234c1ca6 100644
--- a/ionic/components/button/test/sizes/main.html
+++ b/ionic/components/button/test/sizes/main.html
@@ -1,29 +1,33 @@
 
-<div class="padding">
+<ion-toolbar>
+  <ion-title>Button Sizes</ion-title>
+</ion-toolbar>
+
+<ion-content class="padding">
 
   <p>
-    <a button primary href="#">a[button]</a>
-    <button primary>button</button>
+    <a button href="#">a[button]</a>
+    <button>button</button>
   </p>
 
   <p>
-    <a button small primary href="#">a[button][small]</a>
-    <button small primary>button[small]</button>
+    <a button small href="#">a[button][small]</a>
+    <button small>button[small]</button>
   </p>
 
   <p>
-    <a button outline small primary href="#">a[button][outline][small]</a>
-    <button outline small primary>button[outline][small]</button>
+    <a button outline small href="#">a[button][outline][small]</a>
+    <button outline small>button[outline][small]</button>
   </p>
 
   <p>
-    <a button clear small primary href="#">a[button][clear][small]</a>
-    <button clear small primary>button[clear][small]</button>
+    <a button clear small href="#">a[button][clear][small]</a>
+    <button clear small>button[clear][small]</button>
   </p>
 
   <p>
-    <button large primary>[large]</button>
-    <a button large primary href="#">
+    <button large>[large]</button>
+    <a button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
@@ -32,13 +36,13 @@
   </p>
 
   <p>
-    <a button outline large primary href="#">a[button][outline][large]</a>
-    <button outline large primary>button[outline][large]</button>
+    <a button outline large href="#">a[button][outline][large]</a>
+    <button outline large>button[outline][large]</button>
   </p>
 
   <p>
-    <a button clear large primary href="#">a[clear][large]</a>
-    <button clear large primary>button[clear][large]</button>
+    <a button clear large href="#">a[clear][large]</a>
+    <button clear large>button[clear][large]</button>
   </p>
 
-</div>
+</ion-content>
diff --git a/ionic/components/checkbox/extensions/ios.scss b/ionic/components/checkbox/extensions/ios.scss
index 7f7166f04c..2415604617 100644
--- a/ionic/components/checkbox/extensions/ios.scss
+++ b/ionic/components/checkbox/extensions/ios.scss
@@ -1,43 +1,68 @@
 
-// iOS Checkbox
+// iOS Checkbox Structure
 // --------------------------------------------------
 
-$checkbox-ios-icon-size:              21px !default;
-$checkbox-ios-background-color:       get-color(primary, base) !default;
-$checkbox-ios-foreground-color:       get-color(primary, inverse) !default;
+$checkbox-ios-icon-size:             21px !default;
+$checkbox-ios-bg-color-off:          $background-color !default;
+$checkbox-ios-border-color-off:      $border-color !default;
+$checkbox-ios-bg-color-on:           color(primary) !default;
+$checkbox-ios-border-color-on:       color(primary) !default;
+$checkbox-ios-checkmark-color-on:    $background-color !default;
 
 
-.checkbox[mode="ios"] {
+.checkbox[mode=ios] {
 
   .checkbox-icon {
     position: relative;
     width: $checkbox-ios-icon-size;
     height: $checkbox-ios-icon-size;
     border-radius: 50%;
-    background-color: $checkbox-ios-foreground-color;
-    border: 1px solid #c4c4c4;
+    border: 1px solid $checkbox-ios-border-color-off;
+    background-color: $checkbox-ios-bg-color-off;
   }
 
   &[aria-checked=true] .checkbox-icon {
-    background-color: $checkbox-ios-background-color;
-    border-color: $checkbox-ios-background-color;
-
-    &::after {
-      position: absolute;
-      border: 1px solid $checkbox-ios-foreground-color;
-      top: 3px;
-      left: 7px;
-      width: 4px;
-      height: 9px;
-      border-left: none;
-      border-top: none;
-      content: '';
-      transform: rotate(45deg);
-    }
+    background-color: $checkbox-ios-bg-color-on;
+    border-color: $checkbox-ios-border-color-on;
   }
 
-  .input-label {
-    color: inherit;
+  &[aria-checked=true] .checkbox-icon::after {
+    position: absolute;
+    border: 1px solid $checkbox-ios-checkmark-color-on;
+    top: 3px;
+    left: 7px;
+    width: 4px;
+    height: 9px;
+    border-left: none;
+    border-top: none;
+    content: '';
+    transform: rotate(45deg);
   }
 
 }
+
+
+// iOS Checkbox Color Mixin
+// --------------------------------------------------
+
+@mixin checkbox-theme-ios($color, $bg-on) {
+
+  .checkbox[mode=ios][#{$color}] {
+
+    &[aria-checked=true] .checkbox-icon {
+      background-color: $bg-on;
+      border-color: $bg-on;
+    }
+
+  }
+
+}
+
+// Generate iOS Checkbox Auxiliary Colors
+// --------------------------------------------------
+
+@each $color, $value in auxiliary-colors() {
+
+  @include checkbox-theme-ios($color, $value);
+
+}
diff --git a/ionic/components/checkbox/test/basic/main.html b/ionic/components/checkbox/test/basic/main.html
index b0721e47e8..d344e8d2e8 100644
--- a/ionic/components/checkbox/test/basic/main.html
+++ b/ionic/components/checkbox/test/basic/main.html
@@ -24,6 +24,10 @@
         Grape, value=grape, init checked, disabled
       </ion-checkbox>
 
+      <ion-checkbox secondary checked="true">
+        secondary color
+      </ion-checkbox>
+
     </ion-list>
 
   </form>
diff --git a/ionic/components/content/content.scss b/ionic/components/content/content.scss
index 817bb02b83..8f31081dd3 100644
--- a/ionic/components/content/content.scss
+++ b/ionic/components/content/content.scss
@@ -2,8 +2,8 @@
 // Content
 // --------------------------------------------------
 
-$content-container-background-color:         #fff !default;
-$content-background-color:                   #fff !default;
+$content-container-background-color:      $background-color !default;
+$content-background-color:                $background-color !default;
 
 
 .content-container {
diff --git a/ionic/components/content/extensions/ios.scss b/ionic/components/content/extensions/ios.scss
index 565163336b..a117308f3c 100644
--- a/ionic/components/content/extensions/ios.scss
+++ b/ionic/components/content/extensions/ios.scss
@@ -2,7 +2,7 @@
 // iOS Content
 // --------------------------------------------------
 
-$content-container-ios-background-color:     #000 !default;
+/*$content-container-ios-background-color:     #000 !default;
 $content-ios-background-color:               #efeff4 !default;
 
 
@@ -17,3 +17,4 @@ $content-ios-background-color:               #efeff4 !default;
   }
 
 }
+*/
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index e140466421..39a9ca6040 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -2,10 +2,10 @@
 // Tabs
 // --------------------------------------------------
 
-$tab-bar-background-color:         $placeholder-background !default;
+$tab-bar-background-color:         $toolbar-background-color !default;
 
-$tab-button-text-inactive:         #8c8c8c !default;
-$tab-button-text-active:           get-color(primary, base) !default;
+$tab-button-text-active:           $toolbar-active-color !default;
+$tab-button-text-inactive:         $toolbar-inactive-color !default;
 $tab-button-padding:               10px !default;
 $tab-button-min-width:             80px !default;
 $tab-button-max-width:             160px !default;
diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss
index fe9fa9c601..4858795f09 100644
--- a/ionic/components/toolbar/extensions/ios.scss
+++ b/ionic/components/toolbar/extensions/ios.scss
@@ -10,7 +10,7 @@ $toolbar-order-ios: (
 );
 
 $toolbar-ios-height:                        4.4rem !default;
-$toolbar-ios-border-color:                  #c4c4c4 !default;
+$toolbar-ios-border-color:                  $toolbar-border-color !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 615798d728..e5192b24c5 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -9,10 +9,6 @@ $toolbar-order: (
   secondary: 40
 );
 
-$toolbar-background:                    $placeholder-background !default;
-$toolbar-button-text-color:             #007aff !default;
-$toolbar-title-text-color:              #000 !default;
-
 
 .toolbar {
   position: relative;
@@ -28,11 +24,11 @@ $toolbar-title-text-color:              #000 !default;
   order: $flex-order-toolbar-top;
   flex: 0;
 
-  background-color: $toolbar-background;
+  background-color: $toolbar-background-color;
 
   button,
   [button] {
-    color: $toolbar-button-text-color;
+    color: $toolbar-active-color;
     box-shadow: none;
   }
 }
@@ -66,6 +62,7 @@ ion-title {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
+  color: $toolbar-text-color;
 }
 
 .toolbar-item {
diff --git a/ionic/ionic.scss b/ionic/ionic.scss
index 18801ad1e6..dc69cdd34c 100755
--- a/ionic/ionic.scss
+++ b/ionic/ionic.scss
@@ -7,12 +7,17 @@
   "components/app/z-index",
   "components/app/flex-order",
   "components/app/normalize",
-  "components/app/colors",
   "components/app/structure",
   "components/app/typography",
   "util/util";
 
 
+// Default Theme
+// If a theme wasn't set then it'll use this default
+@import
+  "themes/default";
+
+
 // Core Components
 @import
   "components/toolbar/toolbar",
@@ -21,6 +26,9 @@
   "components/aside/aside",
   "components/badge/badge",
   "components/button/button",
+  "components/button/button-clear",
+  "components/button/button-outline",
+  "components/button/button-size",
   "components/button/button-icon",
   "components/button/button-fab",
   "components/card/card",
@@ -89,3 +97,4 @@
 // Platforms
 @import
   "platform/cordova";
+
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
new file mode 100644
index 0000000000..17cb016c95
--- /dev/null
+++ b/ionic/themes/dark.scss
@@ -0,0 +1,27 @@
+
+// Dark Theme
+// ----------------------------------
+
+$colors: (
+
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #fff,
+  dark:       #333,
+
+) !default;
+
+
+$text-color:                 #fff !default;
+$background-color:           #222 !default;
+$border-color:               #666 !default;
+
+$link-color:                 map-get($colors, primary) !default;
+$link-hover-color:           lighten($link-color, 15%) !default;
+
+$toolbar-background-color:   #111 !default;
+$toolbar-border-color:       #000 !default;
+$toolbar-text-color:         $text-color !default;
+$toolbar-active-color:       $link-color !default;
+$toolbar-inactive-color:     #8c8c8c !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
new file mode 100644
index 0000000000..2793edc2ed
--- /dev/null
+++ b/ionic/themes/default.scss
@@ -0,0 +1,27 @@
+
+// Default Theme
+// ----------------------------------
+
+$colors: (
+
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+
+) !default;
+
+
+$text-color:                 #000 !default;
+$background-color:           #fff !default;
+$border-color:               #ddd !default;
+
+$link-color:                 map-get($colors, primary) !default;
+$link-hover-color:           darken($link-color, 15%) !default;
+
+$toolbar-background-color:   #f9f9f9 !default;
+$toolbar-border-color:       #c4c4c4 !default;
+$toolbar-text-color:         $text-color !default;
+$toolbar-active-color:       $link-color !default;
+$toolbar-inactive-color:     #8c8c8c !default;
diff --git a/ionic/util/mixins.scss b/ionic/util/mixins.scss
index 24b4b1b0e0..8f6df585dc 100644
--- a/ionic/util/mixins.scss
+++ b/ionic/util/mixins.scss
@@ -3,24 +3,43 @@
 // --------------------------------------------------
 
 @function get-color($color, $tone: base) {
-  @return map-get(map-get($colors, $color), $tone);
+  @return red;
 }
 
-@function inverse-tone($color) {
-  // For a lighter colored "base" the darker colored "inverse"
-  // the inverse-tone will be the "light" tone
+@function inverse($color-name) {
+  @if (lightness( color($color-name) ) > 70) {
+    @return #000;
+  }
+  @else {
+    @return #fff;
+  }
+}
 
-  // For a darker colored "base" the lighter colored "inverse"
-  // the inverse-tone will be the "dark" tone
+@function darken-or-lighten($color, $amount:12%) {
+  // lightness is a percent value, 0% darkest, 100% lightest
+  $lightness-percent: lightness($color);
 
-  $base: map-get(map-get($colors, $color), base);
-  $inverse: map-get(map-get($colors, $color), inverse);
-  $light: map-get(map-get($colors, $color), light);
-  $dark: map-get(map-get($colors, $color), dark);
 
-  $lightness: lightness($base) - lightness($inverse);
+  @if ($lightness-percent > 80) {
+    // really light foreground color, so really darken it up
+    @return darken($color, ($amount * 2));
+  }
 
-  @return if($lightness < 0, $dark, $light);
+  @if ($lightness-percent < 35) {
+    // dark foreground color, so light it up
+    @return lighten($color, $amount);
+  }
+
+  // default to darken
+  @return darken($color, $amount);
+}
+
+@function color($color-name) {
+  @return map-get($colors, $color-name);
+}
+
+@function auxiliary-colors() {
+  @return map-remove($colors, primary);
 }
 
 
diff --git a/package.json b/package.json
index d7a016632c..a452f2ded6 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "gulp-insert": "^0.5.0",
     "gulp-plumber": "^1.0.0",
     "gulp-rename": "~1.2.0",
-    "gulp-sass": "^1.3.3",
+    "gulp-sass": "^2.0.4",
     "gulp-shell": "^0.4.0",
     "gulp-typescript": "^2.7.7",
     "gulp-util": "^3.0.6",
diff --git a/scripts/build/ionic.dark.scss b/scripts/build/ionic.dark.scss
new file mode 100644
index 0000000000..1ee8c86d4c
--- /dev/null
+++ b/scripts/build/ionic.dark.scss
@@ -0,0 +1,11 @@
+
+// Ionic Dark
+// Sass file to create and demo the default dark theme
+
+
+// Manually set to use the dark theme
+@import "ionic/themes/dark";
+
+
+// Import Ionic SCSS
+@import "ionic/ionic";
diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html
index 94ef06323d..d3a7a3d770 100644
--- a/scripts/e2e/e2e.template.html
+++ b/scripts/e2e/e2e.template.html
@@ -5,7 +5,19 @@
   <!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
-  <link href="../../../css/ionic.css" rel="stylesheet">
+  <script>
+    // dynamically load the stylesheet depending on theme querystring
+    // defaults to use the light-theme
+    var theme = 'ionic.css';
+    if (location.href.indexOf('ionictheme=dark') > -1) {
+      theme = 'ionic.dark.css';
+    }
+
+    var stylesheet = document.createElement('link');
+    stylesheet.setAttribute('rel', 'stylesheet');
+    stylesheet.setAttribute('href', '../../../css/' + theme);
+    document.getElementsByTagName('head')[0].appendChild(stylesheet);
+  </script>
 
   <style>
     /* hack to create tall scrollable areas for testing using <f></f> */