diff --git a/dist/css/ionic.css b/dist/css/ionic.css
index 139675c54b..7e00038049 100644
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -4,7 +4,7 @@
  * --------------------------------------------------
  * Useful utilities and mixins for SCSS files.
  */
-/*
+/*!
   Ionicons, v1.3.3
   Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
   https://twitter.com/helloimben  https://twitter.com/ionicframework
@@ -2046,7 +2046,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid silver; }
+  border: 1px solid #c0c0c0; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -4193,7 +4193,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   background-color: white; }
 
 select[multiple],
@@ -4252,7 +4252,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color 0.1s ease-in-out; }
+    transition: background-color .1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -4267,7 +4267,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity 0.05s ease-in-out;
+  transition: opacity .05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -4533,7 +4533,7 @@ input[type="range"] {
   .button-icon:active, .button-icon.active {
     background: none;
     box-shadow: none;
-    text-shadow: 0px 0px 10px white; }
+    text-shadow: 0px 0px 10px #fff; }
 
 .button-primary {
   color: white;
@@ -5386,66 +5386,99 @@ a.button {
 .positive-bg {
   background-color: #4a87ee; }
 
+.positive-border {
+  border-color: #145dd7; }
+
 .calm {
   color: #43cee6; }
 
 .calm-bg {
   background-color: #43cee6; }
 
+.calm-border {
+  border-color: #1aaac3; }
+
 .assertive {
   color: #ef4e3a; }
 
 .assertive-bg {
   background-color: #ef4e3a; }
 
+.assertive-border {
+  border-color: #cc2511; }
+
 .balanced {
   color: #66cc33; }
 
 .balanced-bg {
   background-color: #66cc33; }
 
+.balanced-border {
+  border-color: #478f24; }
+
 .energized {
   color: #f0b840; }
 
 .energized-bg {
   background-color: #f0b840; }
 
+.energized-border {
+  border-color: #d39511; }
+
 .royle {
   color: #8a6de9; }
 
 .royle-bg {
   background-color: #8a6de9; }
 
+.royle-border {
+  border-color: #552bdf; }
+
 .pure {
   color: white; }
 
 .pure-bg {
   background-color: white; }
 
+.pure-border {
+  border-color: #dddddd; }
+
 .subdued-light {
   color: #eeeeee; }
 
 .subdued-light-bg {
   background-color: #eeeeee; }
 
+.subdued-light-border {
+  border-color: #dddddd; }
+
 .subdued {
   color: #cccccc; }
 
 .subdued-bg {
   background-color: #cccccc; }
 
+.subdued-border {
+  border-color: #bbbbbb; }
+
 .subdued-dark {
   color: #888888; }
 
 .subdued-dark-bg {
   background-color: #888888; }
 
+.subdued-dark-border {
+  border-color: #6f6f6f; }
+
 .dark {
   color: #444444; }
 
 .dark-bg {
   background-color: #444444; }
 
+.dark-border {
+  border-color: #444444; }
+
 /**
  * Brand Colors
  * --------------------------------------------------
@@ -5453,24 +5486,33 @@ a.button {
  * your app's theme! Throughout Ionic's CSS we use brand-primary, 
  * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
  */
-.brand-primary {
+.primary {
   color: #4a87ee; }
 
-.brand-primary-bg {
+.primary-bg {
   background-color: #4a87ee; }
 
-.brand-secondary {
+.primary-border {
+  border-color: #1b68ea; }
+
+.secondary {
   color: white; }
 
-.brand-secondary-bg {
+.secondary-bg {
   background-color: white; }
 
-.brand-tertiary {
+.secondary-border {
+  border-color: #d9d9d9; }
+
+.tertiary {
   color: whitesmoke; }
 
-.brand-tertiary-bg {
+.tertiary-bg {
   background-color: whitesmoke; }
 
+.tertiary-border {
+  border-color: #b5b5b5; }
+
 /**
  * Platform
  * --------------------------------------------------
diff --git a/dist/css/themes/ionic-ios7.css b/dist/css/themes/ionic-ios7.css
index 45da53bcfc..e119d59757 100644
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -123,7 +123,7 @@
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, 0.05s; }
+  transition-delay: 0s, .05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -138,4 +138,4 @@
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: 0.05s, 0s; }
+    transition-delay: .05s, 0s; }
diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss
index eb5e5d33e7..e388a226b8 100644
--- a/scss/_action-sheet.scss
+++ b/scss/_action-sheet.scss
@@ -21,7 +21,7 @@
     border-radius: none;
     background-color: transparent;
 
-    color: $brand-primary;
+    color: $primary;
     font-size: 18px;
 
     &.destructive {
diff --git a/scss/_badge.scss b/scss/_badge.scss
index e27c5054e3..c26e6dabb4 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -30,13 +30,13 @@
 }
 
 .badge-primary {
-  background-color: $brand-primary;
+  background-color: $primary;
 }
 .badge-secondary {
-  background-color: $brand-secondary;
+  background-color: $secondary;
 }
 .badge-tertiary {
-  background-color: $brand-tertiary;
+  background-color: $tertiary;
 }
 .badge-positive {
   background-color: $positive;
diff --git a/scss/_items.scss b/scss/_items.scss
index 80e6febdc7..b3afae8d46 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -70,13 +70,13 @@
       color: inherit;
     }
   }
-  @include item-style-active($brand-secondary, $subdued-dark, $subdued-dark);
+  @include item-style-active($secondary, $subdued-dark, $subdued-dark);
 }
 
 // Different themes for list items
-.item-primary { @include item-style-active($brand-primary, $subdued-dark, #fff); }
-.item-secondary { @include item-style-active($brand-secondary, $subdued-dark, $subdued-dark); }
-.item-tertiary { @include item-style-active($brand-tertiary, $subdued-dark, $subdued-dark); }
+.item-primary { @include item-style-active($primary, $subdued-dark, #fff); }
+.item-secondary { @include item-style-active($secondary, $subdued-dark, $subdued-dark); }
+.item-tertiary { @include item-style-active($tertiary, $subdued-dark, $subdued-dark); }
 .item-positive { @include item-style-active($positive, $subdued-dark, #fff); }
 .item-calm { @include item-style-active($calm, $subdued-dark, #fff); }
 .item-balanced { @include item-style-active($balanced, $subdued-dark, #fff); }
diff --git a/scss/_scaffolding.scss b/scss/_scaffolding.scss
index 7116c2950b..a44415b200 100644
--- a/scss/_scaffolding.scss
+++ b/scss/_scaffolding.scss
@@ -133,7 +133,7 @@ body, .ionic-body {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: $brand-primary;
+  background-color: $primary;
   position: absolute;
   left: 50%;
   margin-left: -5px;
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
index 937d0645d5..df1c4db5c0 100644
--- a/scss/_tabs.scss
+++ b/scss/_tabs.scss
@@ -142,13 +142,13 @@
   opacity: 1;
 
   &.tab-item-primary {
-    color: $brand-primary;
+    color: $primary;
   }
   &.tab-item-secondary {
-    color: $brand-secondary;
+    color: $secondary;
   }
   &.tab-item-tertiary {
-    color: $brand-tertiary;
+    color: $tertiary;
   }
   &.tab-item-positive {
     color: $positive;
diff --git a/scss/_util.scss b/scss/_util.scss
index cdc2c81236..c89db98713 100644
--- a/scss/_util.scss
+++ b/scss/_util.scss
@@ -87,6 +87,9 @@
 .positive-bg {
   background-color: $positive;
 }
+.positive-border {
+  border-color: $button-positive-border;
+}
 
 .calm {
   color: $calm;
@@ -94,6 +97,9 @@
 .calm-bg {
   background-color: $calm;
 }
+.calm-border {
+  border-color: $button-calm-border;
+}
 
 .assertive {
   color: $assertive;
@@ -101,6 +107,9 @@
 .assertive-bg {
   background-color: $assertive;
 }
+.assertive-border {
+  border-color: $button-assertive-border;
+}
 
 .balanced {
   color: $balanced;
@@ -108,6 +117,9 @@
 .balanced-bg {
   background-color: $balanced;
 }
+.balanced-border {
+  border-color: $button-balanced-border;
+}
 
 .energized {
   color: $energized;
@@ -115,6 +127,9 @@
 .energized-bg {
   background-color: $energized;
 }
+.energized-border {
+  border-color: $button-energized-border;
+}
 
 .royle {
   color: $royle;
@@ -122,6 +137,9 @@
 .royle-bg {
   background-color: $royle;
 }
+.royle-border {
+  border-color: $button-royle-border;
+}
 
 .pure {
   color: $pure;
@@ -129,6 +147,9 @@
 .pure-bg {
   background-color: $pure;
 }
+.pure-border {
+  border-color: $button-pure-border;
+}
 
 .subdued-light {
   color: $subdued-light;
@@ -136,6 +157,9 @@
 .subdued-light-bg {
   background-color: $subdued-light;
 }
+.subdued-light-border {
+  border-color: $button-subdued-light-border;
+}
 
 .subdued {
   color: $subdued;
@@ -143,6 +167,9 @@
 .subdued-bg {
   background-color: $subdued;
 }
+.subdued-border {
+  border-color: $button-subdued-border;
+}
 
 .subdued-dark {
   color: $subdued-dark;
@@ -150,6 +177,9 @@
 .subdued-dark-bg {
   background-color: $subdued-dark;
 }
+.subdued-dark-border {
+  border-color: $button-subdued-dark-border;
+}
 
 .dark {
   color: $dark;
@@ -157,6 +187,9 @@
 .dark-bg {
   background-color: $dark;
 }
+.dark-border {
+  border-color: $button-dark-border;
+}
 
 
 /**
@@ -167,23 +200,32 @@
  * brand-secondary and brand-tertiary (ter·tia·ry: of third rank, importance, or value).
  */
 
-.brand-primary {
-  color: $brand-primary;
+.primary {
+  color: $primary;
 }
-.brand-primary-bg {
-  background-color: $brand-primary;
+.primary-bg {
+  background-color: $primary;
+}
+.primary-border {
+  border-color: $button-primary-border;
 }
 
-.brand-secondary {
-  color: $brand-secondary;
+.secondary {
+  color: $secondary;
 }
-.brand-secondary-bg {
-  background-color: $brand-secondary;
+.secondary-bg {
+  background-color: $secondary;
+}
+.secondary-border {
+  border-color: $button-secondary-border;
 }
 
-.brand-tertiary {
-  color: $brand-tertiary;
+.tertiary {
+  color: $tertiary;
 }
-.brand-tertiary-bg {
-  background-color: $brand-tertiary;
+.tertiary-bg {
+  background-color: $tertiary;
+}
+.tertiary-border {
+  border-color: $button-tertiary-border;
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 4e6201e82e..920215c38f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2,9 +2,9 @@
 // Brand Colors
 // -------------------------------
 
-$brand-primary:         #4a87ee !default;
-$brand-secondary:       #fff    !default;
-$brand-tertiary:        #f5f5f5 !default;
+$primary:               #4a87ee !default;
+$secondary:             #fff    !default;
+$tertiary:              #f5f5f5 !default;
 
 
 // Utility Colors
@@ -47,7 +47,7 @@ $headings-line-height:           1.1 !default;
 $base-background-color:          #fff;
 $base-color:                     #000;
 
-$link-color:                     $brand-primary !default;
+$link-color:                     $primary !default;
 $link-hover-color:               darken($link-color, 15%) !default;
 
 $content-padding:                10px !default;
@@ -75,7 +75,7 @@ $border-radius-small:            3px !default;
 $caret-width-base:               4px !default;
 $caret-width-large:              5px !default;
 
-$component-active-bg:            $brand-primary !default;
+$component-active-bg:            $primary !default;
 
 
 // Forms
@@ -180,23 +180,23 @@ $button-default-border:               darken($subdued-light, 15%);
 $button-default-active-bg:            lighten($subdued-light, 5%);
 $button-default-active-border:        darken($subdued-light, 25%);
 
-$button-primary-bg:                   $brand-primary;
+$button-primary-bg:                   $primary;
 $button-primary-text:                 #fff;
-$button-primary-border:               darken($brand-primary, 10%);
-$button-primary-active-bg:            darken($brand-primary, 5%);
-$button-primary-active-border:        darken($brand-primary, 10%);
+$button-primary-border:               darken($primary, 10%);
+$button-primary-active-bg:            darken($primary, 5%);
+$button-primary-active-border:        darken($primary, 10%);
 
-$button-secondary-bg:                 $brand-secondary;
+$button-secondary-bg:                 $secondary;
 $button-secondary-text:               #444;
-$button-secondary-border:             darken($brand-secondary, 15%);
-$button-secondary-active-bg:          lighten($brand-secondary, 10%);
-$button-secondary-active-border:      darken($brand-secondary, 20%);
+$button-secondary-border:             darken($secondary, 15%);
+$button-secondary-active-bg:          lighten($secondary, 10%);
+$button-secondary-active-border:      darken($secondary, 20%);
 
-$button-tertiary-bg:                  $brand-tertiary;
+$button-tertiary-bg:                  $tertiary;
 $button-tertiary-text:                #444;
-$button-tertiary-border:              darken($brand-tertiary, 25%);
-$button-tertiary-active-bg:           lighten($brand-tertiary, 10%);
-$button-tertiary-active-border:       darken($brand-tertiary, 15%);
+$button-tertiary-border:              darken($tertiary, 25%);
+$button-tertiary-active-bg:           lighten($tertiary, 10%);
+$button-tertiary-active-border:       darken($tertiary, 15%);
 
 $button-positive-bg:                  $positive;
 $button-positive-text:                #fff;