diff --git a/src/html/colors.html b/src/html/colors.html
index 90c7be6..7dbb9a1 100755
--- a/src/html/colors.html
+++ b/src/html/colors.html
@@ -2,332 +2,54 @@
 <section id="colors" class="section">
   <!-- section header -->
   <h1 class="h1 weight-strong">Colors</h1>
+  <h2 class="h2 weight-strong">Logo 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>
-      <figcaption class="figcaption">
-        $black
-        <br>
-        #000
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-white"></div>
-      <figcaption class="figcaption">
-        $white
-        <br>
-        #fff
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-lighterest"></div>
-      <figcaption class="figcaption">
-        $gray-lighterest
-        <br>
-        #f7f7f7
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-lightest"></div>
-      <figcaption class="figcaption">
-        $gray-lightest
-        <br>
-        #f0f0f0
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-lighter"></div>
-      <figcaption class="figcaption">
-        $gray-lighter
-        <br>
-        #dbdbdb
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-light"></div>
-      <figcaption class="figcaption">
-        $gray-light
-        <br>
-        #bbb
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray"></div>
-      <figcaption class="figcaption">
-        $gray
-        <br>
-        #888
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-dark"></div>
-      <figcaption class="figcaption">
-        $gray-dark
-        <br>
-        #555
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-gray-darker"></div>
-      <figcaption class="figcaption">
-        $gray-darker
-        <br>
-        #333
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-lighter"></div>
-      <figcaption class="figcaption">
-        $green-lighter
-        <br>
-        #e8ffed
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-light"></div>
-      <figcaption class="figcaption">
-        $green-light
-        <br>
-        #2bd94f
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-green"></div>
-      <figcaption class="figcaption">
-        $green
-        <br>
-        #3ccb5a
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-dark"></div>
-      <figcaption class="figcaption">
-        $green-dark
-        <br>
-        #31b74d
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-darker"></div>
-      <figcaption class="figcaption">
-        $green-darker
-        <br>
-        #2a9f43
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-green-darkest"></div>
-      <figcaption class="figcaption">
-        $green-darkest
-        <br>
-        #09200e
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-lightest"></div>
-      <figcaption class="figcaption">
-        $purple-lightest
-        <br>
-        #eee1f7
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-lighter"></div>
-      <figcaption class="figcaption">
-        $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">
-        $purple
-        <br>
-        #5b3777
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-dark"></div>
-      <figcaption class="figcaption">
-        $purple-dark
-        <br>
-        #402754
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-darker"></div>
-      <figcaption class="figcaption">
-        $purple-darker
-        <br>
-        #261731
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-purple-darkest"></div>
-      <figcaption class="figcaption">
-        $purple-darkest
-        <br>
-        #1b0f24
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-lightest"></div>
-      <figcaption class="figcaption">
-        $orange-lightest
-        <br>
-        #fffbf5
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-lighter"></div>
-      <figcaption class="figcaption">
-        $orange-lighter
-        <br>
-        #f7c457
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-light"></div>
-      <figcaption class="figcaption">
-        $orange-light
-        <br>
-        #f9b548
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange"></div>
-      <figcaption class="figcaption">
-        $orange
-        <br>
-        #f2ae24
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-dark"></div>
-      <figcaption class="figcaption">
-        $orange-dark
         <br>
-        #db970d
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-darker"></div>
-      <figcaption class="figcaption">
-        $orange-darker
+        23.4, 53.8, 0, 33
         <br>
-        #cd8d0c
+        526 C
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-orange-darkest"></div>
-      <figcaption class="figcaption">
-        $orange-darkest
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-purple-dark">
+      <figcaption class="figcaption text-white">
+        $purple-dark
         <br>
-        #3d2b05
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-red-lighter"></div>
-      <figcaption class="figcaption">
-        $red-lighter
+        #ccadd2
         <br>
-        #fde6e9
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-red-light"></div>
-      <figcaption class="figcaption">
-        $red-light
+        2.9, 17.6, 0, 17.7
         <br>
-        #ef737f
+        7437 C
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-red"></div>
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-white">
       <figcaption class="figcaption">
-        $red
+        $white
         <br>
-        #f25058
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue-lighter"></div>
-      <figcaption class="figcaption">
-        $blue-lighter
+        #ffffff
         <br>
-        #f5fcff
+        0, 0, 0, 0
       </figcaption>
     </figure>
 
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue-light"></div>
-      <figcaption class="figcaption">
-        $blue-light
+    <figure class="grid-block figure vertical shrink align-center justify-right figure-color color-gray">
+      <figcaption class="figcaption text-white">
+        $gray-logo
         <br>
-        #8bd5f9
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue"></div>
-      <figcaption class="figcaption">
-        $blue
+        #cccccc
         <br>
-        #0ca6f2
-      </figcaption>
-    </figure>
-
-    <figure class="figure clearfix">
-      <div class="figure-color color-blue-dark"></div>
-      <figcaption class="figcaption">
-        $blue-dark
+        0, 0, 0, 20
         <br>
-        #1e7daf
+        420 C
       </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;