diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
index befde24849f..fd19c7f5e57 100644
--- a/src/demo-app/button/button-demo.html
+++ b/src/demo-app/button/button-demo.html
@@ -1,60 +1,61 @@
-<section>
+<div class="demo-button">
+  <section>
     <button md-button>flat</button>
     <button md-raised-button>raised</button>
     <button md-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </button>
     <button md-mini-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </button>
-</section>
+  </section>
 
-<section>
+  <section>
     <a href="http://www.google.com" md-button color="primary">link</a>
     <a href="http://www.google.com" md-raised-button>link</a>
     <a href="http://www.google.com" md-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </a>
     <a href="http://www.google.com" md-mini-fab>
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </a>
-</section>
+  </section>
 
-<section>
+  <section>
     <button md-button color="primary">primary</button>
     <button md-button color="accent">accent</button>
     <button md-button color="warn">warn</button>
-</section>
+  </section>
 
-<section>
+  <section>
     <button md-raised-button color="primary">primary</button>
     <button md-raised-button color="accent">accent</button>
     <button md-raised-button color="warn">warn</button>
-</section>
+  </section>
 
-<section>
+  <section>
     <button md-fab color="primary">
-        <i class="material-icons md-24">home</i>
+      <i class="material-icons md-24">home</i>
     </button>
     <button md-fab color="accent">
-        <i class="material-icons md-24">favorite</i>
+      <i class="material-icons md-24">favorite</i>
     </button>
     <button md-fab color="warn">
-        <i class="material-icons md-24">feedback</i>
+      <i class="material-icons md-24">feedback</i>
     </button>
-</section>
+  </section>
 
-<section>
+  <section>
     <div>
-        <span>isDisabled: {{isDisabled}}</span>
-        <button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
+      <span>isDisabled: {{isDisabled}}</span>
+      <button md-raised-button (click)="isDisabled=!isDisabled">Disable buttons</button>
     </div>
     <button md-button [disabled]="isDisabled">off</button>
     <button md-button color="primary" [disabled]="isDisabled">off</button>
     <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
     <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
     <button md-mini-fab [disabled]="isDisabled">
-        <i class="material-icons md-24">check circle</i>
+      <i class="material-icons md-24">check circle</i>
     </button>
-</section>
-
+  </section>
+</div>
diff --git a/src/demo-app/button/button-demo.scss b/src/demo-app/button/button-demo.scss
index 8e87fbfdefe..7e2ab618088 100644
--- a/src/demo-app/button/button-demo.scss
+++ b/src/demo-app/button/button-demo.scss
@@ -1,19 +1,13 @@
 
-// Helps fonts on OSX looks more consistent with other systems
-// Isn't currently in button styles due to performance concerns
-* {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-button, a, {
-  margin: 8px;
-  text-transform: uppercase;
-}
-
-
-section {
-  background-color: #f7f7f7;
-  margin: 8px;
+.demo-button {
+  button, a {
+    margin: 8px;
+    text-transform: uppercase;
+  }
+
+  section {
+    background-color: #f7f7f7;
+    margin: 8px;
+  }
 }
 
diff --git a/src/demo-app/card/card-demo.html b/src/demo-app/card/card-demo.html
index 5005af74202..a577da8565b 100644
--- a/src/demo-app/card/card-demo.html
+++ b/src/demo-app/card/card-demo.html
@@ -1,4 +1,4 @@
-<div class="card-container">
+<div class="demo-card-container">
   <md-card>
     <md-card-title-group>
         <md-card-title>Card with title</md-card-title>
@@ -40,11 +40,11 @@
     </md-card-content>
   </md-card>
 
-  <md-card class="blue md-card-flat">
+  <md-card class="demo-card-blue md-card-flat">
     <md-card-title>Easily customizable</md-card-title>
     <md-card-actions>
       <button md-button>First</button>
       <button md-button>Second</button>
     </md-card-actions>
   </md-card>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/demo-app/card/card-demo.scss b/src/demo-app/card/card-demo.scss
index c3fe5a4f3ad..7e462aa9917 100644
--- a/src/demo-app/card/card-demo.scss
+++ b/src/demo-app/card/card-demo.scss
@@ -1,22 +1,22 @@
-md-card {
-  margin: 0 16px 16px 0;
-  width: 350px;
-}
-
-.card-container {
+.demo-card-container {
   display: flex;
   flex-flow: column nowrap;
+
+  md-card {
+    margin: 0 16px 16px 0;
+    width: 350px;
+  }
+
+  img {
+    background-color: gray;
+  }
 }
 
-.blue {
+.demo-card-blue {
   background-color: #B0BECC;
-}
 
-.blue md-card-actions {
-  display: flex;
-  flex-direction: column;
-}
-
-img {
-  background-color: gray;
+  md-card-actions {
+    display: flex;
+    flex-direction: column;
+  }
 }
diff --git a/src/demo-app/demo-app.html b/src/demo-app/demo-app.html
index dcf174e09ae..b160e6247fa 100644
--- a/src/demo-app/demo-app.html
+++ b/src/demo-app/demo-app.html
@@ -1,15 +1,17 @@
-<h1 class="title">Angular Material2 Demos</h1>
-<ul>
-  <li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
-  <li><a [routerLink]="['CardDemo']">Card demo</a></li>
-  <li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
-  <li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
-  <li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
-  <li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
-</ul>
-<button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
-  {{root.dir.toUpperCase()}}
-</button>
-<div #root="$implicit" dir="ltr">
-  <router-outlet></router-outlet>
+<div class="demo-root">
+  <h1>Angular Material2 Demos</h1>
+  <ul>
+    <li><a [routerLink]="['ButtonDemo']">Button demo</a></li>
+    <li><a [routerLink]="['CardDemo']">Card demo</a></li>
+    <li><a [routerLink]="['SidenavDemo']">Sidenav demo</a></li>
+    <li><a [routerLink]="['ProgressCircleDemo']">Progress Circle demo</a></li>
+    <li><a [routerLink]="['PortalDemo']">Portal demo</a></li>
+    <li><a [routerLink]="['CheckboxDemo']">Checkbox demo</a></li>
+  </ul>
+  <button md-raised-button (click)="root.dir = (root.dir == 'rtl' ? 'ltr' : 'rtl')">
+    {{root.dir.toUpperCase()}}
+  </button>
+  <div #root="$implicit" dir="ltr" class="demo-content">
+    <router-outlet></router-outlet>
+  </div>
 </div>
diff --git a/src/demo-app/demo-app.scss b/src/demo-app/demo-app.scss
index 03466bc4b90..f23099e1cde 100644
--- a/src/demo-app/demo-app.scss
+++ b/src/demo-app/demo-app.scss
@@ -1,3 +1,14 @@
+.demo-root {
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+  padding: 20px;
+
+  // Helps fonts on OSX looks more consistent with other systems
+  // Isn't currently in button styles due to performance concerns
+  * {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
 
 .demo-content {
   padding: 15px;
diff --git a/src/demo-app/progress-circle/progress-circle-demo.html b/src/demo-app/progress-circle/progress-circle-demo.html
index 333025b0ab3..7efd5fc1069 100644
--- a/src/demo-app/progress-circle/progress-circle-demo.html
+++ b/src/demo-app/progress-circle/progress-circle-demo.html
@@ -1,5 +1,5 @@
 <h1>Determinate</h1>
-<div class="demo-progress-circle-container">
+<div class="demo-progress-circle">
     <md-progress-circle mode="determinate"
                         [value]="progressValue"
                         class="md-primary"></md-progress-circle>
@@ -13,7 +13,7 @@
 
 
 <h1>Indeterminate</h1>
-<div class="demo-progress-circle-container">
+<div class="demo-progress-circle">
     <md-progress-circle mode="indeterminate"></md-progress-circle>
     <md-progress-circle mode="indeterminate"
                         class="md-accent"></md-progress-circle>
diff --git a/src/demo-app/progress-circle/progress-circle-demo.scss b/src/demo-app/progress-circle/progress-circle-demo.scss
index f93b650636e..1e6177d6350 100644
--- a/src/demo-app/progress-circle/progress-circle-demo.scss
+++ b/src/demo-app/progress-circle/progress-circle-demo.scss
@@ -1,4 +1,4 @@
-.demo-progress-circle-container {
+.demo-progress-circle {
   width: 100%;
 
   md-progress-circle,
@@ -6,4 +6,4 @@
     display: inline-block;
   }
 
-}
\ No newline at end of file
+}
diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/demo-app/sidenav/sidenav-demo.html
index c4e437544ce..3835438303d 100644
--- a/src/demo-app/sidenav/sidenav-demo.html
+++ b/src/demo-app/sidenav/sidenav-demo.html
@@ -1,4 +1,4 @@
-<md-sidenav-layout>
+<md-sidenav-layout class="demo-sidenav-layout">
   <md-sidenav #start (open)="myinput.focus()" mode="side">
     Start Side Drawer
     <br>
@@ -19,7 +19,7 @@
     <button md-button (click)="end.close()">Close</button>
   </md-sidenav>
 
-  <div class="content">
+  <div class="demo-sidenav-content">
     <h1>My Content</h1>
 
     <div>
diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/demo-app/sidenav/sidenav-demo.scss
index bf65da97248..47813d80273 100644
--- a/src/demo-app/sidenav/sidenav-demo.scss
+++ b/src/demo-app/sidenav/sidenav-demo.scss
@@ -1,8 +1,11 @@
-
-md-sidenav-layout {
+.demo-sidenav-layout {
   border: 3px solid black;
 
   md-sidenav {
     padding: 10px;
   }
 }
+
+.demo-sidenav-content {
+  padding: 15px;
+}