Design updates to example page.

_sass/desktop-example.scss

@@ -13,7 +13,7 @@ section {
   }
 
   div {
-    height: $body-line-height*5;
+    height: $body-line-height*4;
     line-height: $body-line-height;
     text-align: left;
     padding: 1em;
@@ -27,20 +27,56 @@ section {
   }
 
   &.first {
-    div#alpha, div#zeta {
+    div#alpha {
+      @include span-columns(1);
+    }
+
+    div#beta {
+      @include span-columns(11);
+    }
+
+    div#gamma {
+      @include span-columns(2);
+    }
+
+    div#delta {
+      @include span-columns(10);
+    }
+
+    div#epsilon {
+      @include span-columns(3);
+    }
+
+    div#zeta {
+      @include span-columns(9);
+    }
+
+    div#eta {
       @include span-columns(4);
     }
 
-    div#beta, div#epsilon {
+    div#theta {
       @include span-columns(8);
     }
 
-    div#gamma,  div#delta {
+    div#iota {
+      @include span-columns(5);
+    }
+
+    div#kappa {
+      @include span-columns(7);
+    }
+
+    div#lambda {
       @include span-columns(6);
     }
 
-    div#beta, div#delta {
-      @include omega();
+    div#mu {
+      @include span-columns(6);
+    }
+
+    div#beta, div#delta, div#zeta, div#theta, div#kappa, div#mu {
+      @include omega;
     }
   }
 
@@ -60,6 +96,7 @@ section {
 
         aside {
           @include span-columns(4 of 8);
+          border: none;
           height: 84%;
           padding: 1em;
         }
@@ -75,20 +112,21 @@ section {
 
   &.third {
     div#dummy {
+      border-bottom: 0;
       height: 5.5em;
       text-align: center;
-      border-bottom: 0;
-      background-color: #ddd;
     }
 
     div#alpha {
       @include span-columns(12);
       @include row(table);
+      margin-bottom: 0;
       padding: 0;
 
       aside {
         @include span-columns(4, table);
         @include pad();
+        border-right: 1px solid rgba(255,255,255, 0.5);
       }
 
       article {
@@ -117,13 +155,10 @@ section {
   }
 
   &.fifth {
-    & > code {
-      margin-bottom: -1.5em;
-    }
-
     div.box {
       font-size: 0.78em;
-      margin-top: 2em;
+      height: 8em;
+      // margin-top: 2em;
       @include span-columns(3);
       @include nth-omega(4n);
     }
@@ -132,6 +167,6 @@ section {
 
 div.code {
   @include outer-container();
+  padding:0.5em;
   text-align: center;
-  padding-bottom: 0;
 }

_sass/mobile-example.scss

@@ -1,13 +1,19 @@
 @import "bourbon/bourbon";
 @import "variables";
 $visual-grid: true;
-$visual-grid-color: #eee;
+$visual-grid-color: #e6f6ff;
 $visual-grid-opacity: 0.4;
+$ltblue: #D5EEFB;
+$midblue: #AADBF5;
+$dkblue: #41A8DF;
+$dkerblue: #298EC3;
+$textblue: #072f44;
 @import "neat/neat";
 @import "typography";
 @import "reset";
 
 body {
+  color: $textblue;
   line-height: $body-line-height;
   text-align: center;
 }
@@ -21,7 +27,7 @@ pre {
 }
 
 header {
-  background-color: #000;
+  background-color: $dkerblue;
   @include clearfix();
   padding: 0.5em 1em;
   text-align: center;
@@ -37,14 +43,14 @@ header {
 }
 
 section {
-  background-color: #eee;
+  background-color: $ltblue;
   text-align: center;
-  line-height: $body-line-height*2;
+  line-height: $body-line-height*1.5;
 
   div {
-    border-bottom: 1px solid #bbb;
-    background-color: #ddd;
+    background-color: $midblue;
     font-size: 0.8em;
+    margin-bottom: 2em;
   }
 
   &.first {
@@ -58,23 +64,29 @@ section {
   &.second {
     div#beta {
       aside, article {
-        background-color: #BBB;
+        background-color: $dkblue;
+      }
+
+      aside {
+        border-bottom: 1px solid $dkerblue;
       }
     }
   }
 
   &.third {
      div#dummy {
-      background-color: #ddd;
+      background-color: $midblue;
+      margin-bottom: 0;
     }
 
     div#alpha {
       aside {
-        background-color: #eee;
+        background-color: $dkblue;
+        border-bottom: 1px solid $dkerblue;
       }
 
       article {
-        background-color: #FFF;
+        background-color: $dkblue;
       }
     }
   }
@@ -116,10 +128,10 @@ section {
 }
 
 div.code {
-  background-color: #eee;
+  background-color: $ltblue;
   text-align: center;
-  padding-top: 1em;
-  padding-bottom: 1em;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
 }
 
 footer {
@@ -129,12 +141,12 @@ footer {
 
   a.back-button {
     text-decoration: none;
-    color: #555;
+    color: white;
     padding: 0.5em 1em;
-    background-color: #eee;
+    background-color: $dkerblue;
 
     &:hover {
-      background-color: #ddd;
+      background-color: $textblue;
     }
   }
 }