diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss
index b2f144f7bf..5448da0315 100644
--- a/demos/component-docs/app.scss
+++ b/demos/component-docs/app.scss
@@ -1,3 +1,13 @@
+$colors: (
+  primary:    #387ef5,
+  secondary:  #32db64,
+  danger:     #f53d3d,
+  light:      #f4f4f4,
+  dark:       #222,
+  energized:  #ffc527,
+  royal:      #7e60ff,
+);
+
 body, body:hover, body a, body button, body media-switch {
   cursor: url('http://ionicframework.com/img/finger.png'), auto;
 }
@@ -331,4 +341,6 @@ body.md button[fab].fab-map {
   top: 220px;
 }
 
+@import "../../ionic/ionic";
+
 
diff --git a/demos/component-docs/inputs/checkbox.html b/demos/component-docs/inputs/checkbox.html
index cf701aa729..55adaa2c66 100644
--- a/demos/component-docs/inputs/checkbox.html
+++ b/demos/component-docs/inputs/checkbox.html
@@ -35,11 +35,11 @@
       Khal Drogo
     </ion-checkbox>
 
-    <ion-checkbox dark>
+    <ion-checkbox energized checked="true" dark>
       Cersei Lannister
     </ion-checkbox>
 
-    <ion-checkbox primary checked="true">
+    <ion-checkbox royal checked="true">
       Stannis Baratheon
     </ion-checkbox>
 
@@ -55,7 +55,7 @@
       Catelyn Stark
     </ion-checkbox>
 
-    <ion-checkbox primary>
+    <ion-checkbox royal>
       Bronn
     </ion-checkbox>