diff --git a/scripts/examples/index.template.html b/scripts/examples/index.template.html
index eade2bd593..86c35a4ca6 100644
--- a/scripts/examples/index.template.html
+++ b/scripts/examples/index.template.html
@@ -20,7 +20,7 @@
   <meta charset="UTF-8">
   <title>Ionic 2 Example</title>
 </head>
-<body>
+<body ion-app>
 </body>
 <script>
   System.register({
diff --git a/src/components/app/_colors.scss b/src/components/app/_colors.scss
index 98432a42a1..9fdec9940a 100644
--- a/src/components/app/_colors.scss
+++ b/src/components/app/_colors.scss
@@ -1,42 +1,39 @@
-$light:                           #fff !default;
-$stable:                          #f8f8f8 !default;
-$positive:                        #387ef5 !default;
-$assertive:                       #ef473a !default;
-$dark:                            #444 !default;
-
-
-
 
 $colors: (
-  gray: (
-    base: #ccc,
-    light: #f2f2f2,
-    dark: #666
+
+  light: (
+    base: #fff,
+    inverse: #444,
+    light: #fafafa,
+    dark: #ddd
   ),
-  brown: (
-    base: #ab906b,
-    light: #ecdac3,
-    dark: #5e421c
-  )
+
+  stable: (
+    base: #f8f8f8,
+    inverse: #444,
+    light: #e5e5e5,
+    dark: #b2b2b2
+  ),
+
+  positive: (
+    base: #387ef5,
+    inverse: #fff,
+    light: #145fd7,
+    dark: #145fd7
+  ),
+
+  assertive: (
+    base: #ef473a,
+    inverse: #fff,
+    light: #f37369,
+    dark: #cc2311
+  ),
+
+  dark: (
+    base: #444,
+    inverse: #fff,
+    light: #262626,
+    dark: #000
+  ),
+
 );
-
-@function getcolor($color, $tone: base) {
-  @return map-get(map-get($colors, $color), $tone);
-}
-
-.button {
-  display: block;
-  border-radius: 4px;
-  padding: 5px;
-  margin: 5px;
-  text-align: center;
-}
-
-@each $key, $value in $colors {
-  .button-#{$key} {
-    @extend .button;
-    color: getcolor($key, dark);
-    background: getcolor($key, base);
-    border-color: getcolor($key, dark);
-  }
-}
diff --git a/src/components/app/_normalize.scss b/src/components/app/_normalize.scss
index e242a8ea76..d8366cf0d3 100644
--- a/src/components/app/_normalize.scss
+++ b/src/components/app/_normalize.scss
@@ -43,13 +43,13 @@ template {
 // ==========================================================================
 
 // Remove the gray background color from active links in IE 10.
-[ion-app] a {
+a {
   background-color: transparent;
 }
 
 // Improve readability when focused and also mouse hovered in all browsers.
-[ion-app] a:active,
-[ion-app] a:hover {
+a:active,
+a:hover {
   outline: 0;
 }
 
diff --git a/src/components/app/ionic.scss b/src/components/app/ionic.scss
index 03fc1c0ff2..7b79495e79 100644
--- a/src/components/app/ionic.scss
+++ b/src/components/app/ionic.scss
@@ -12,6 +12,7 @@
   "normalize",
   "globals",
   "colors",
+  "mixins/colors",
   "util",
   "scaffolding",
   "typography";
diff --git a/src/components/app/mixins/_colors.scss b/src/components/app/mixins/_colors.scss
new file mode 100644
index 0000000000..ea8bd002c9
--- /dev/null
+++ b/src/components/app/mixins/_colors.scss
@@ -0,0 +1,22 @@
+
+@function get-color($color, $tone: base) {
+  @return map-get(map-get($colors, $color), $tone);
+}
+
+
+@function inverse-tone($color) {
+  // For a lighter colored "base" the darker colored "inverse"
+  // the inverse-tone will be the "light" tone
+
+  // For a darker colored "base" the lighter colored "inverse"
+  // the inverse-tone will be the "dark" tone
+
+  $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);
+
+  @return if($lightness < 0, $dark, $light);
+}
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 6c9e2b4e7a..a59e06870f 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -1,7 +1,7 @@
-// Buttons
+
+// Button Variables
 // -------------------------------
 
-$button-color:                    #222 !default;
 $button-block-margin:             10px !default;
 $button-clear-padding:            6px !default;
 $button-border-radius:            2px !default;
@@ -27,58 +27,24 @@ $button-bar-button-height:        32px !default;
 $button-bar-button-padding:       8px !default;
 $button-bar-button-icon-size:     20px !default;
 
-$button-light-bg:                 $light !default;
-$button-light-text:               #444 !default;
-$button-light-border:             #ddd !default;
-$button-light-active-bg:          #fafafa !default;
-$button-light-active-border:      #ccc !default;
-
-$button-stable-bg:                $stable !default;
-$button-stable-text:              #444 !default;
-$button-stable-border:            #b2b2b2 !default;
-$button-stable-active-bg:         #e5e5e5 !default;
-$button-stable-active-border:     #a2a2a2 !default;
-
-$button-positive-bg:              $positive !default;
-$button-positive-text:            #fff !default;
-$button-positive-border:          darken($positive, 10%) !default;
-$button-positive-active-bg:       darken($positive, 10%) !default;
-$button-positive-active-border:   darken($positive, 10%) !default;
-
-$button-assertive-bg:             $assertive !default;
-$button-assertive-text:           #fff !default;
-$button-assertive-border:         darken($assertive, 10%) !default;
-$button-assertive-active-bg:      darken($assertive, 10%) !default;
-$button-assertive-active-border:  darken($assertive, 10%) !default;
-
-$button-dark-bg:                  $dark !default;
-$button-dark-text:                #fff !default;
-$button-dark-border:              #111 !default;
-$button-dark-active-bg:           #262626 !default;
-$button-dark-active-border:       #000 !default;
-
-$button-default-bg:               $button-stable-bg !default;
-$button-default-text:             $button-stable-text !default;
-$button-default-border:           $button-stable-border !default;
-$button-default-active-bg:        $button-stable-active-bg !default;
-$button-default-active-border:    $button-stable-active-border !default;
 
 // Button Mixins
 // --------------------------------------------------
 
-@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
-  border-color: $border-color;
+@mixin button-default($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
   background-color: $bg-color;
+  border-color: $border-color;
   color: $color;
 
-  // Give desktop users something to play with
-  &:hover {
+  &:hover,
+  &.hover {
+    opacity: 0.8;
     color: $color;
     text-decoration: none;
   }
-  &.active,
+
   &.activated {
-    border-color: $active-border-color;
+    border-color: darken($border-color, 10%);
     background-color: $active-bg-color;
     box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
   }
@@ -95,10 +61,6 @@ $button-default-active-border:    $button-stable-active-border !default;
       font-size: $font-size;
     }
   }
-  &.button-icon {
-    border-color: transparent;
-    background: none;
-  }
 }
 
 @mixin button-outline($color, $text-color:"") {
@@ -109,7 +71,7 @@ $button-default-active-border:    $button-stable-active-border !default;
       $text-color: $color;
     }
     color: $text-color;
-    &.active,
+
     &.activated {
       background-color: $color;
       box-shadow: none;
@@ -119,15 +81,24 @@ $button-default-active-border:    $button-stable-active-border !default;
 }
 
 
-/**
- * Buttons
- * --------------------------------------------------
- */
+// Button Type and Color Generation
+// --------------------------------------------------
 
-button {
-  // set the color defaults
-  @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text);
+@each $color, $value in $colors {
+  .button-#{$color} {
+    @include button-default(get-color($color, base),
+                            get-color($color, dark),
+                            inverse-tone($color),
+                            get-color($color, dark),
+                            get-color($color, inverse));
+  }
+}
 
+
+// Button Defaults
+// --------------------------------------------------
+
+.button {
   position: relative;
   display: inline-block;
   margin: 0;
@@ -146,6 +117,7 @@ button {
   text-overflow: ellipsis;
   font-size: $button-font-size;
   line-height: $button-height - $button-border-width + 1px;
+  outline: none;
 
   cursor: pointer;
 
@@ -159,84 +131,18 @@ button {
     content: ' ';
   }
 
-  .icon {
-    vertical-align: top;
-    pointer-events: none;
-  }
-
-  .icon:before,
-  &.icon:before,
-  &.icon-left:before,
-  &.icon-right:before {
-    display: inline-block;
-    padding: 0 0 $button-border-width 0;
-    vertical-align: inherit;
-    font-size: $button-icon-size;
-    line-height: $button-height - $button-border-width;
-    pointer-events: none;
-  }
-  &.icon-left:before {
-    float: left;
-    padding-right: .2em;
-    padding-left: 0;
-  }
-  &.icon-right:before {
-    float: right;
-    padding-right: 0;
-    padding-left: .2em;
-  }
-
-  &.button-block, &.button-full {
-    margin-top: $button-block-margin;
-    margin-bottom: $button-block-margin;
-  }
-
-  &[type="primary"] {
-    @include button-style($button-light-bg, $button-light-border, $button-light-active-bg, $button-light-active-border, $button-light-text);
-    @include button-clear($button-light-border);
-    @include button-outline($button-light-border);
-  }
-
-  &[type="secondary"] {
-    @include button-style($button-stable-bg, $button-stable-border, $button-stable-active-bg, $button-stable-active-border, $button-stable-text);
-    @include button-clear($button-stable-border);
-    @include button-outline($button-stable-border);
-  }
-
-  &[type="highlight"] {
-    @include button-style($button-positive-bg, $button-positive-border, $button-positive-active-bg, $button-positive-active-border, $button-positive-text);
-    @include button-clear($button-positive-bg);
-    @include button-outline($button-positive-bg);
-  }
-
-  &[type="exception"] {
-    @include button-style($button-assertive-bg, $button-assertive-border, $button-assertive-active-bg, $button-assertive-active-border, $button-assertive-text);
-    @include button-clear($button-assertive-bg);
-    @include button-outline($button-assertive-bg);
-  }
-
-  &[type="dark"] {
-    @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $button-dark-text);
-    @include button-clear($button-dark-bg);
-    @include button-outline($button-dark-bg);
-  }
 }
 
+
+// Button Types
+// --------------------------------------------------
+
 .button-small {
   padding: 2px $button-small-padding 1px;
   min-width: $button-small-height;
   min-height: $button-small-height + 2;
   font-size: $button-small-font-size;
   line-height: $button-small-height - $button-border-width - 1;
-
-  .icon:before,
-  &.icon:before,
-  &.icon-left:before,
-  &.icon-right:before {
-    font-size: $button-small-icon-size;
-    line-height: $button-small-icon-size + 3;
-    margin-top: 3px;
-  }
 }
 
 .button-large {
@@ -245,40 +151,9 @@ button {
   min-height: $button-large-height + 5;
   font-size: $button-large-font-size;
   line-height: $button-large-height - $button-border-width;
-
-  .icon:before,
-  &.icon:before,
-  &.icon-left:before,
-  &.icon-right:before {
-    padding-bottom: ($button-border-width * 2);
-    font-size: $button-large-icon-size;
-    line-height: $button-large-height - ($button-border-width * 2) - 1;
-  }
-}
-
-.button-icon {
-  @include transition(opacity .1s);
-  padding: 0 6px;
-  min-width: initial;
-  border-color: transparent;
-  background: none;
-
-  &.button.active,
-  &.button.activated {
-    border-color: transparent;
-    background: none;
-    box-shadow: none;
-    opacity: 0.3;
-  }
-
-  .icon:before,
-  &.icon:before {
-    font-size: $button-large-icon-size;
-  }
 }
 
 .button-clear {
-  @include button-clear($button-default-border);
   @include transition(opacity .1s);
   padding: 0 $button-clear-padding;
   max-height: $button-height;
@@ -286,14 +161,12 @@ button {
   background: none;
   box-shadow: none;
 
-  &.active,
   &.activated {
     opacity: 0.3;
   }
 }
 
 .button-outline {
-  @include button-outline($button-default-border);
   @include transition(opacity .1s);
   background: none;
   box-shadow: none;
@@ -322,22 +195,13 @@ button {
   border-radius: 0;
 }
 
-button.button-block,
-button.button-full,
-.button-full > button.button,
-input.button.button-block  {
-  width: 100%;
-}
+
+
+// Button Misc
+// --------------------------------------------------
 
 a.button {
   text-decoration: none;
-
-  .icon:before,
-  &.icon:before,
-  &.icon-left:before,
-  &.icon-right:before {
-    margin-top: 2px;
-  }
 }
 
 .button.disabled,
@@ -347,3 +211,10 @@ a.button {
   pointer-events: none;
 }
 
+button.button-block,
+button.button-full,
+.button-full > button.button,
+input.button.button-block  {
+  width: 100%;
+}
+
diff --git a/src/components/button/examples/basic/index.html b/src/components/button/examples/basic/index.html
deleted file mode 100644
index a947cc00cb..0000000000
--- a/src/components/button/examples/basic/index.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<button type="primary">Primary</button>
-<button type="secondary">Secondary</button>
-<button type="highlight">Highlight</button>
-<button type="exception">Exception</button>
-<button type="dark">Dark</button>
diff --git a/src/components/button/examples/button-default/index.html b/src/components/button/examples/button-default/index.html
new file mode 100644
index 0000000000..279a0cd20d
--- /dev/null
+++ b/src/components/button/examples/button-default/index.html
@@ -0,0 +1,46 @@
+<link rel="stylesheet" href="../../../../../dist/css/ionic.css">
+
+<style>
+  [ion-app] {
+    display: block;
+  }
+</style>
+
+<div ion-app>
+
+  <p>
+    <a class="button button-light" href="#">a.light</a>
+    <button class="button button-light">button.light</button>
+    <button class="button button-light hover">hover</button>
+    <button class="button button-light activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-stable" href="#">a.stable</a>
+    <button class="button button-stable">button.stable</button>
+    <button class="button button-stable hover">hover</button>
+    <button class="button button-stable activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-positive" href="#">a.positive</a>
+    <button class="button button-positive">button.positive</button>
+    <button class="button button-positive hover">hover</button>
+    <button class="button button-positive activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-assertive" href="#">a.assertive</a>
+    <button class="button button-assertive">button.assertive</button>
+    <button class="button button-assertive hover">hover</button>
+    <button class="button button-assertive activated">activated</button>
+  </p>
+
+  <p>
+    <a class="button button-dark" href="#">a.dark</a>
+    <button class="button button-dark">button.dark</button>
+    <button class="button button-dark hover">hover</button>
+    <button class="button button-dark activated">activated</button>
+  </p>
+
+</div>
