diff --git a/src/html/colors.html b/src/html/colors.html
index 90c7be6..72d07e1 100755
--- a/src/html/colors.html
+++ b/src/html/colors.html
@@ -2,20 +2,64 @@
 <section id="colors" class="section">
   <!-- section header -->
   <h1 class="h1 weight-strong">Colors</h1>
+  <h2 class="h2 weight-strong">Brand Colors</h2>
 
-  <div class="figure-colors-wrapper">
+  <div class="figure-wrapper figure-color-wrapper">
     <!-- figure -->
-    <figure class="figure clearfix">
-      <div class="figure-color color-black"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green text-white">
       <figcaption class="figcaption">
+        $green
+        <br>
+        #3ccb5a
+      </figcaption>
+    </figure>
+
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple">
+      <figcaption class="figcaption text-white">
+        $purple
+        <br>
+        #71438f
+      </figcaption>
+    </figure>
+
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange">
+      <figcaption class="figcaption text-white">
+        $orange
+        <br>
+        #f5a11b
+      </figcaption>
+    </figure>
+
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-red">
+      <figcaption class="figcaption text-white">
+        $red
+        <br>
+        #f25058
+      </figcaption>
+    </figure>
+
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-blue">
+      <figcaption class="figcaption text-white">
+        $blue
+        <br>
+        #0ca6f2
+      </figcaption>
+    </figure>
+  </div>
+
+  <h2 class="h2 weight-strong">Monochrome</h2>
+
+  <div class="figure-wrapper figure-color-wrapper">
+    <!-- figure -->
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-black">
+      <figcaption class="figcaption text-white">
         $black
         <br>
         #000
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-white"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-white">
       <figcaption class="figcaption">
         $white
         <br>
@@ -23,8 +67,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-lighterest"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray-lighterest">
       <figcaption class="figcaption">
         $gray-lighterest
         <br>
@@ -32,8 +75,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-lightest"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray-lightest">
       <figcaption class="figcaption">
         $gray-lightest
         <br>
@@ -41,8 +83,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-lighter"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray-lighter">
       <figcaption class="figcaption">
         $gray-lighter
         <br>
@@ -50,8 +91,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-light"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray-light">
       <figcaption class="figcaption">
         $gray-light
         <br>
@@ -59,35 +99,35 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray">
+      <figcaption class="figcaption text-white">
         $gray
         <br>
         #888
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-dark"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray-dark">
+      <figcaption class="figcaption text-white">
         $gray-dark
         <br>
         #555
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-darker"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray-darker">
+      <figcaption class="figcaption text-white">
         $gray-darker
         <br>
         #333
       </figcaption>
     </figure>
+  </div>
+
+  <h2 class="h2 weight-strong">Green</h2>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-lighter"></div>
+  <div class="figure-wrapper figure-color-wrapper">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green-lighter">
       <figcaption class="figcaption">
         $green-lighter
         <br>
@@ -95,17 +135,15 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-light"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green-light">
+      <figcaption class="figcaption text-white">
         $green-light
         <br>
         #2bd94f
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-green"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green text-white">
       <figcaption class="figcaption">
         $green
         <br>
@@ -113,35 +151,36 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-dark"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green-dark">
+      <figcaption class="figcaption text-white">
         $green-dark
         <br>
         #31b74d
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-darker"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green-darker">
+      <figcaption class="figcaption text-white">
         $green-darker
         <br>
         #2a9f43
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-darkest"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-green-darkest">
+      <figcaption class="figcaption text-white">
         $green-darkest
         <br>
         #09200e
       </figcaption>
     </figure>
+  </div>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-lightest"></div>
+  <h2 class="h2 weight-strong">Purple</h2>
+
+  <div class="figure-wrapper figure-color-wrapper">
+    <!-- figure -->
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-lightest">
       <figcaption class="figcaption">
         $purple-lightest
         <br>
@@ -149,62 +188,60 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-lighter"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-lighter">
+      <figcaption class="figcaption text-white">
         $purple-lighter
         <br>
         #b6a6bd
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-light"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-light">
+      <figcaption class="figcaption text-white">
         $purple-light
         <br>
         #834fab
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple">
+      <figcaption class="figcaption text-white">
         $purple
         <br>
-        #5b3777
+        #71438f
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-dark"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-dark">
+      <figcaption class="figcaption text-white">
         $purple-dark
         <br>
         #402754
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-darker"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-darker">
+      <figcaption class="figcaption text-white">
         $purple-darker
         <br>
         #261731
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-darkest"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-darkest">
+      <figcaption class="figcaption text-white">
         $purple-darkest
         <br>
         #1b0f24
       </figcaption>
     </figure>
+  </div>
+
+  <h2 class="h2 weight-strong">Orange</h2>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-lightest"></div>
+  <div class="figure-wrapper figure-color-wrapper">
+    <!-- figure -->
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-lightest">
       <figcaption class="figcaption">
         $orange-lightest
         <br>
@@ -212,8 +249,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-lighter"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-lighter">
       <figcaption class="figcaption">
         $orange-lighter
         <br>
@@ -221,8 +257,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-light"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-light">
       <figcaption class="figcaption">
         $orange-light
         <br>
@@ -230,44 +265,44 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-light">
       <figcaption class="figcaption">
         $orange
         <br>
-        #f2ae24
+        #f5a11b
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-dark"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-dark">
+      <figcaption class="figcaption text-white">
         $orange-dark
         <br>
         #db970d
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-darker"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-darker">
+      <figcaption class="figcaption text-white">
         $orange-darker
         <br>
         #cd8d0c
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-darkest"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-orange-darkest">
+      <figcaption class="figcaption text-white">
         $orange-darkest
         <br>
         #3d2b05
       </figcaption>
     </figure>
+  </div>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-red-lighter"></div>
+  <h2 class="h2 weight-strong">Red</h2>
+
+  <div class="figure-wrapper figure-color-wrapper">
+    <!-- figure -->
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-red-lighter">
       <figcaption class="figcaption">
         $red-lighter
         <br>
@@ -275,8 +310,7 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-red-light"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-red-light">
       <figcaption class="figcaption">
         $red-light
         <br>
@@ -284,26 +318,20 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-red"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-red">
+      <figcaption class="figcaption text-white">
         $red
         <br>
         #f25058
       </figcaption>
     </figure>
+  </div>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue-lighter"></div>
-      <figcaption class="figcaption">
-        $blue-lighter
-        <br>
-        #f5fcff
-      </figcaption>
-    </figure>
+  <h2 class="h2 weight-strong">Blue</h2>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue-light"></div>
+  <div class="figure-wrapper figure-color-wrapper">
+    <!-- figure -->
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-blue-light">
       <figcaption class="figcaption">
         $blue-light
         <br>
@@ -311,23 +339,20 @@ <h1 class="h1 weight-strong">Colors</h1>
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-blue">
+      <figcaption class="figcaption text-white">
         $blue
         <br>
         #0ca6f2
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue-dark"></div>
-      <figcaption class="figcaption">
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-blue-dark">
+      <figcaption class="figcaption text-white">
         $blue-dark
         <br>
         #1e7daf
       </figcaption>
     </figure>
-
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/src/styles/angular/globals/var.scss b/src/styles/angular/globals/var.scss
index eae8936..4408200 100755
--- a/src/styles/angular/globals/var.scss
+++ b/src/styles/angular/globals/var.scss
@@ -21,6 +21,7 @@ $gray-light: #bbb;
 $gray: #888;
 $gray-dark: #555;
 $gray-darker: #222;
+$gray-logo: #ccc;
 
 $green: #3ccb5a; // #1DD156
 $green-light: #2bd94f;
@@ -64,7 +65,7 @@ $red-darker: darken($red-dark,10%);
 $blue: #0ca6f2; // previously #2ab0f6;
 $blue-light: #8bd5f9; // previously #86cff6;
 $blue-lighter: #f5fcff; // previously #f1faff;
-$blue-dark: #0a9be2;
+$blue-dark: #1e7daf;
 
 // **********
 // log themes
diff --git a/src/styles/scss/colors.scss b/src/styles/scss/colors.scss
deleted file mode 100644
index ac30381..0000000
--- a/src/styles/scss/colors.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-// list 39 colors
-$color-array: black white gray-lighterest gray-lightest gray-lighter gray-light gray gray-dark gray-darker green green-light green-lighter green-dark green-darker green-darkest purple purple-logo purple-light purple-lighter purple-lightest purple-dark purple-darker purple-darkest orange orange-light orange-lighter orange-lightest orange-dark orange-darker orange-darkest red red-light red-lighter red-dark blue blue-light blue-lighter blue-dark;
-$color-array-values: $black $white $gray-lighterest $gray-lightest $gray-lighter $gray-light $gray $gray-dark $gray-darker $green $green-light $green-lighter $green-dark $green-darker $green-darkest $purple $purple-logo $purple-light $purple-lighter $purple-lightest $purple-dark $purple-darker $purple-darkest $orange $orange-light $orange-lighter $orange-lightest $orange-dark $orange-darker $orange-darkest $red $red-light $red-lighter $red-dark $blue $blue-light $blue-lighter $blue-dark;
-
-@mixin colors() {
-  // 39 colors in total
-  @for $i from 1 to 39 {
-    // background
-    .color-#{nth($color-array,$i)} {
-      background: nth($color-array-values,$i);
-    }
-  }
-}
-
-@include colors();
-
-.figure-colors-wrapper {
-
-  .figure {
-    background: none;
-    border: 0;
-    display: block;
-    margin: 0;
-    padding: 0;
-    text-align: left;
-  }
-
-  .figure-color,
-  .figcaption {
-    float: left;
-    margin: 0;
-  }
-
-  .figcaption {
-    margin-left: 9px;
-  }
-}
-
-.figure-color {
-  height: 90px;
-  width: 150px;
-}
diff --git a/src/styles/scss/figures.scss b/src/styles/scss/figures.scss
index 303845c..dfba6be 100644
--- a/src/styles/scss/figures.scss
+++ b/src/styles/scss/figures.scss
@@ -72,7 +72,6 @@
 }
 
 .figcaption {
-  color: $gray-dark;
   font-weight: bold;
   margin-top: 15px;
   margin-bottom: 10px;