ux(): color/grays palate refactoring

package.json

@@ -33,6 +33,7 @@
     "grunt-karma": "~0.12.1",
     "grunt-ng-annotate": "^1.0.1",
     "grunt-notify": "^0.4.3",
+    "grunt-sass": "^1.1.0",
     "grunt-string-replace": "~1.2.1",
     "grunt-systemjs-builder": "^0.2.5",
     "grunt-tslint": "^3.0.1",
@@ -51,9 +52,9 @@
     "phantomjs": "^1.9.19",
     "reflect-metadata": "0.1.2",
     "rxjs": "5.0.0-beta.0",
+    "sass-lint": "^1.5.0",
     "systemjs": "0.19.20",
-    "zone.js": "0.5.10",
-    "grunt-sass": "^1.1.0"
+    "zone.js": "0.5.10"
   },
   "engines": {
     "node": "0.4.x",

public/sass/_variables.dark.scss

@@ -6,12 +6,22 @@
 // -------------------------
 $black:                 #000;
 
-$gray:                  #bbb;
-$gray-dark:             #262626;
-$gray-darker:           #1f1f1f;
-$gray-light:            #ADAFAE;
-$gray-lighter:          #BBBFC2;
-$white:                 #fff;
+// -------------------------
+$black:            #000;
+$dark-1:           #141414; // (body)
+$dark-2:           #1f1d1d; // ($gray-darker)
+$dark-3:           #262626; // ($gray-dark)
+$dark-4:           #333333;
+$dark-5:           #444444;
+$gray-1:           #555555;
+$gray-2:           #6e7580;
+$gray-3:           #b3b3b3;
+$gray-4:           #cfd4d9;
+$gray-5:           #e8edf0;
+$gray-6:           #f7f9fa;
+$gray-7:           #fbfbfb;
+
+$white:            #fff;
 
 // Accent colors
 // -------------------------
@@ -38,10 +48,10 @@ $critical:              #ed2e18;
 
 // Scaffolding
 // -------------------------
-$body-bg:  				rgb(20,20,20);
-$page-bg:  				$gray-darker;
-$body-color:   		$gray-lighter;
-$text-color:   		$gray-lighter;
+$body-bg:  			   rgb(20,20,20);
+$page-bg:  			   $dark-2;
+$body-color:   		   $gray-4;
+$text-color:   	       $gray-4;
 
 // Links
 // -------------------------
@@ -52,11 +62,11 @@ $link-hover-color:        $white;
 // Typography
 // -------------------------
 $headings-color:          darken($white,11%);
-$abbr-border-color: 	    $gray-light !default;
-$text-muted: 			        darken($link-color,30%);
+$abbr-border-color: 	  $gray-3 !default;
+$text-muted: 			  darken($link-color,30%);
 
-$blockquote-small-color:  $gray-light !default;
-$blockquote-border-color: $gray-lighter !default;
+$blockquote-small-color:  $gray-3 !default;
+$blockquote-border-color: $gray-4 !default;
 
 $hr-border-color: rgba(0,0,0,.1) !default;
 
@@ -66,25 +76,25 @@ $component-active-bg:    $brand-primary !default;
 
 // Panel
 // -------------------------
-$panel-bg: 					    $gray-darker;
-$panel-border: 				  solid 1px $gray-dark;
+$panel-bg: 				 $dark-2;
+$panel-border: 			 solid 1px $dark-3;
 
-$divider-border-color: 		#555;
+$divider-border-color:  #555;
 
 // Graphite Target Editor
 $tight-form-border:     #050505;
-$tight-form-bg:     		$gray-dark;
+$tight-form-bg:     	$dark-3;
 
-$tight-form-func-bg: 		#333;
-$tight-form-func-highlight-bg: #444;
+$tight-form-func-bg: 		    #333;
+$tight-form-func-highlight-bg:  #444;
 
 $modal-background: $black;
 $code-tag-bg: #444;
 
 // Lists
-$grafanaListBackground:  	  $gray-dark;
-$grafanaListAccent:      	  lighten($gray-darker, 2%);
-$grafanaListBorderTop:      $gray-dark;
+$grafanaListBackground:  	$dark-3;
+$grafanaListAccent:      	lighten($dark-2, 2%);
+$grafanaListBorderTop:      $dark-3;
 $grafanaListBorderBottom:   $black;
 $grafanaListHighlight:      #333;
 $grafanaListMainLinkColor:  $text-color;
@@ -98,8 +108,8 @@ $scrollbarBorder: black;
 // -------------------------
 $table-bg:                    transparent; // overall background-color
 $table-bg-accent:             rgba(100, 100, 100, 0.3); // for striping
-$table-bg-hover:              $gray-dark; // for hover
-$table-border:                $gray-dark; // table and cell border
+$table-bg-hover:              $dark-3; // for hover
+$table-border:                $dark-3; // table and cell border
 
 // Buttons
 // -------------------------
@@ -119,30 +129,27 @@ $btnWarningBackgroundHighlight:     lighten($brand-warning, 8%);
 $btnDangerBackground:               lighten($red, 3%);
 $btnDangerBackgroundHighlight:      darken($red, 3%);
 
-$btnInverseBackground:              $gray-dark;
-$btnInverseBackgroundHighlight:     lighten($gray-dark, 1%);
+$btnInverseBackground:              $dark-3;
+$btnInverseBackgroundHighlight:     lighten($dark-3, 1%);
 $btnInverseText:                    $link-color;
 $btnInverseBorder:                  #333;
 
-$btnText:              				$gray;
+$btnText:              				$gray-3;
 
-$iconContainerBackground:			      $black;
-$iconContainerBackgroundHighlight:	lighten($black, 5%);
-$iconContainerBorder:				        1px solid transparent;
-$iconContainerShadow:				        0 0 14px 2px rgba(255,255,255, 0.05);
+$iconContainerBackground:		    $black;
 
 // Forms
 // -------------------------
-$input-bg:                       lighten($gray-dark,5%);
+$input-bg:                       lighten($dark-3,5%);
 $input-bg-disabled:              #555;
 
-$input-color:                    $gray-light;
-$input-border-color:             lighten($gray-dark,5%);
+$input-color:                    $gray-4;
+$input-border-color:             lighten($dark-2,5%);
 $input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
 $input-border-focus:             $input-border-color !default;
 $input-box-shadow-focus:         rgba(102,175,233,.6) !default;
 $input-color-placeholder:        #999 !default;
-$input-label-bg:				 $gray-dark;
+$input-label-bg:				 $dark-3;
 
 
 // Search
@@ -150,7 +157,7 @@ $searchShadow: 0 0 35px 0 $body-bg;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground:            $gray-dark;
+$dropdownBackground:            $dark-3;
 $dropdownBorder:                rgba(0,0,0,.2);
 $dropdownDividerTop:            transparent;
 $dropdownDividerBottom:         #444;
@@ -182,12 +189,12 @@ $horizontalComponentOffset:       180px;
 $wellBackground:                  #131517;
 
 $navbarHeight:                    52px;
-$navbarBackgroundHighlight:       $gray-dark;
-$navbarBackground:                $gray-dark;
+$navbarBackgroundHighlight:       $dark-3;
+$navbarBackground:                $dark-3;
 $navbarBorder:                    1px solid $body-bg;
 
-$navbarText:                      $gray-light;
-$navbarLinkColor:                 $gray-light;
+$navbarText:                      $gray-4;
+$navbarLinkColor:                 $gray-4;
 $navbarLinkColorHover:            $white;
 $navbarLinkColorActive:           $navbarLinkColorHover;
 $navbarLinkBackgroundHover:       transparent;
@@ -200,10 +207,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
 // Sidemenu
 // -------------------------
-$sideMenuTopShadow:          $navbarDropdownShadow;
-$sideMenuBackground:         $gray-dark;
-$sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
-$sideMenuShadow: 0 0 35px 0 $body-bg;
+$side-menu-bg:            $dark-3;
+$side-menu-item-hover-bg: $dark-4;
 
 // Pagination
 // -------------------------

public/sass/_variables.light.scss

@@ -10,15 +10,23 @@
 // Grays
 // -------------------------
 $black:                 #000;
-$gray-darker:           lighten(#000, 11.5%); // #222
-$gray-dark:             lighten(#000, 20%);   // #333
-$gray:                  lighten(#000, 33.5%); // #555
-$gray-light:            lighten(#000, 60%);   // #999
-$gray-light2:           lighten(#000, 70%);   // #999
-$gray-lighter:          lighten(#000, 96.5%); // #eee
-$gray-lightest:         lighten(#000, 98%); // #eee
-$white:                 #fff;
 
+// -------------------------
+$black:            #000;
+$dark-1:           #141414; // (body)
+$dark-2:           #1f1d1d; // ($gray-darker)
+$dark-3:           #262626; // ($gray-dark)
+$dark-4:           #333333;
+$dark-5:           #444444;
+$gray-1:           #555555;
+$gray-2:           #7B7B7B;
+$gray-3:           #b3b3b3;
+$gray-4:           #D8D9DA;
+$gray-5:           #ECECEC;
+$gray-6:           #f4f5f8;
+$gray-7:           #fbfbfb;
+
+$white:            #fff;
 
 // Accent colors
 // -------------------------
@@ -48,23 +56,23 @@ $critical:              #EC2128;
 
 $body-bg:  		  $white;
 $page-bg:  		  $white;
-$body-color:    $gray;
-$text-color:    $gray;
+$body-color:    $gray-1;
+$text-color:    $gray-1;
 
 // Links
 // -------------------------
-$link-color:             $gray;
+$link-color:             $gray-1;
 $link-color-disabled:    lighten($link-color,30%);
 $link-hover-color:       darken($link-color, 20%);
 
 // Typography
 // -------------------------
 $headings-color:         $text-color;
-$abbr-border-color: 	 $gray-light !default;
+$abbr-border-color: 	 $gray-2 !default;
 $text-muted: 			 darken($link-color,30%);
 
-$blockquote-small-color:  $gray-light !default;
-$blockquote-border-color: $gray-lighter !default;
+$blockquote-small-color:  $gray-2 !default;
+$blockquote-border-color: $gray-3 !default;
 
 $hr-border-color: rgba(0,0,0,.1) !default;
 
@@ -75,31 +83,27 @@ $component-active-bg:    $brand-primary !default;
 // Panel
 // -------------------------
 
-$panel-bg: 		    $gray-lightest;
-$panel-border: 	  solid 1px $gray-lighter;
-
-$divider-border-color: 		$gray-light;
+$panel-bg: 		  $gray-7;
+$panel-border:  solid 1px $gray-6;
 
-// Submenu
-$submenuBackground:     rgb(218, 217, 217);
-$submenuBorder:         $white;
+$divider-border-color:	$gray-2;
 
 // Graphite Target Editor
-$tight-form-border:     #ddd;
-$tight-form-bg:     		#efefef;
+$tight-form-border:   $gray-4;
+$tight-form-bg:    		$gray-6;
 
-$tight-form-func-bg: 			darken($tight-form-bg, 5%);
-$tight-form-func-highlight-bg: 	darken($tight-form-bg, 10%);
+$tight-form-func-bg:            $gray-5;
+$tight-form-func-highlight-bg:  $gray-6;
 
-$modal-background: 		$body-bg;
-$code-tag-bg: 	#ddd;
+$modal-background: $body-bg;
+$code-tag-bg:      #ddd;
 
 // Lists
-$grafanaListBackground:  	     darken($gray-lighter,5%);
-$grafanaListAccent:            darken($gray-lighter,8%);
+$grafanaListBackground:    	   darken($gray-3,5%);
+$grafanaListAccent:            darken($gray-3,8%);
 $grafanaListBorderTop:         #eee;
 $grafanaListBorderBottom:      #eee;
-$grafanaListHighlight:         darken($gray-lighter,10%);
+$grafanaListHighlight:         darken($gray-3,10%);
 $grafanaListHighlightContrast: #ddd;
 $grafanaListMainLinkColor:     $text-color;
 
@@ -114,14 +118,14 @@ $table-border:               #ddd; // table and cell border
 
 
 // Scrollbars
-$scrollbarBackground: $gray-lighter;
-$scrollbarBackground2: $gray-lighter;
-$scrollbarBorder: $gray-light;
+$scrollbarBackground: $gray-3;
+$scrollbarBackground2: $gray-3;
+$scrollbarBorder: $gray-2;
 
 // Buttons
 // -------------------------
-$btnBackground:                     $gray-lighter;
-$btnBackgroundHighlight:            darken($gray-lighter, 15%);
+$btnBackground:                     $gray-3;
+$btnBackgroundHighlight:            darken($gray-3, 15%);
 $btnBorder:                         #bbb;
 
 $btn-primary-bg:                    $brand-primary;
@@ -139,50 +143,45 @@ $btnWarningBackgroundHighlight:     darken($orange, 3%);
 $btnDangerBackground:               lighten($red, 3%);
 $btnDangerBackgroundHighlight:      darken($red, 3%);
 
-$btnInverseBackground:              $gray-lighter;
-$btnInverseBackgroundHighlight:     darken($gray-lighter, 5%);
-$btnInverseText:                    $black;
-$btnInverseBorder:                  $gray-light;
-
-$btnText:              				$gray-lighter;
+$btnInverseBackground:              $gray-5;
+$btnInverseBackgroundHighlight:     darken($gray-5, 5%);
+$btnInverseText:                    $dark-4;
 
-$iconContainerBackground:			      $white;
-$iconContainerBackgroundHighlight:	lighten($white, 5%);
-$iconContainerBorder:				        1px solid rgba(0,0,0, 0.05);
-$iconContainerShadow:				        0 0 14px 2px rgba(0,0,0, 0.05);
+$btnText: $gray-3;
 
+$iconContainerBackground: $white;
 
 // Forms
 // -------------------------
-$input-bg:                       $white;
-$input-bg-disabled:              $gray-lighter;
+$input-bg:                       $gray-7;
+$input-bg-disabled:              $gray-5;
 
-$input-color:                    #020202;
-$input-border-color:             $gray-lighter;
-$input-box-shadow:               inset 0 1px 1px rgba(0,0,0,.075) !default;
-$input-border-focus:             #66afe9 !default;
-$input-box-shadow-focus:         rgba(102,175,233,.6) !default;
-$input-color-placeholder:        #999 !default;
-$input-label-bg:	        		   #f8f8f8;
+$input-color:                    $dark-3;
+$input-border-color:             $gray-5;
+$input-box-shadow:               none;
+$input-border-focus:             $blue !default;
+$input-box-shadow-focus:         $blue !default;
+$input-color-placeholder:        $gray-4 !default;
+$input-label-bg:	        	     $gray-5;
 
 // Sidemenu
 // -------------------------
-$sideMenuBackground:            $panel-bg;
-$sideMenuBackgroundHighlight:   darken($sideMenuBackground, 4%);
+$side-menu-bg:            $body-bg;
+$side-menu-item-hover-bg: $gray-6;
 
 // search
-$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);
+$searchShadow: 0 5px 30px 0 lighten($gray-2, 30%);
 
 // Dropdowns
 // -------------------------
 $dropdownBackground:            $white;
 $dropdownBorder:                $tight-form-border;
-$dropdownDividerTop:            #e5e5e5;
+$dropdownDividerTop:            $gray-6;
 $dropdownDividerBottom:         $white;
 $dropdownDivider:               $dropdownDividerTop;
-$dropdownTitle:                 #333;
+$dropdownTitle:                 $dark-5;
 
-$dropdownLinkColor:             $gray-dark;
+$dropdownLinkColor:             $dark-3;
 $dropdownLinkColorHover:        $white;
 $dropdownLinkColorActive:       $white;
 
@@ -196,12 +195,12 @@ $dropdownLinkBackgroundHover:   $blue;
 
 // Input placeholder text color
 // -------------------------
-$placeholderText:         $gray-light;
+$placeholderText:         $gray-2;
 
 
 // Hr border color
 // -------------------------
-$hrBorder:                $gray-lighter;
+$hrBorder:                $gray-3;
 
 
 // Horizontal forms & lists
@@ -211,7 +210,7 @@ $horizontalComponentOffset:       180px;
 
 // Wells
 // -------------------------
-$wellBackground:                  $gray-lighter;
+$wellBackground:                  $gray-3;
 
 
 // Navbar
@@ -238,7 +237,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
 
 // Pagination
 // -------------------------
-$paginationBackground:                $gray-light;
+$paginationBackground:                $gray-2;
 $paginationBorder:                    transparent;
 $paginationActiveBackground:          $blue;
 
@@ -265,7 +264,7 @@ $infoBorder:              transparent;
 // Tooltips and popovers
 // -------------------------
 $tooltipColor:            $white;
-$tooltipBackground:       $gray-dark;
+$tooltipBackground:       $gray-4;
 $tooltipArrowWidth:       5px;
 $tooltipArrowColor:       $tooltipBackground;
 $tooltipLinkColor:        darken($white,11%);

public/sass/_variables.scss

@@ -127,7 +127,7 @@ $lead-font-size:   1.25rem !default;
 $lead-font-weight: 300 !default;
 
 $headings-margin-bottom: ($spacer / 2) !default;
-$headings-font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
+$headings-font-family:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $headings-font-weight:   400 !default;
 $headings-line-height:   1.1 !default;
 
@@ -145,9 +145,9 @@ $list-inline-padding: 5px !default;
 $line-height-lg:         (4 / 3) !default;
 $line-height-sm:         1.5 !default;
 
-$border-radius:          0.0rem !default;
+$border-radius:          0.2rem !default;
 $border-radius-lg:       0.3rem !default;
-$border-radius-sm:       0.2rem !default;
+$border-radius-sm:       0.1rem !default;
 
 $caret-width:            .3em !default;
 $caret-width-lg:         $caret-width !default;

public/sass/base/_forms.scss

@@ -14,14 +14,14 @@ legend {
   margin-bottom: $line-height-base;
   font-size: $font-size-base * 1.5;
   line-height: $line-height-base * 2;
-  color: $gray-dark;
+  color: $gray-3;
   border: 0;
   border-bottom: 1px solid #e5e5e5;
 
   // Small
   small {
     font-size: $line-height-base * .75;
-    color: $gray-light;
+    color: $gray-2;
   }
 }
 

public/sass/base/_type.scss

@@ -27,9 +27,9 @@ em      { font-style: italic; color: $headings-color; }
 cite    { font-style: normal; }
 
 // Utility classes
-.muted               { color: $gray-light; }
+.muted               { color: $gray-2; }
 a.muted:hover,
-a.muted:focus        { color: darken($gray-light, 10%); }
+a.muted:focus        { color: darken($gray-2, 10%); }
 
 .text-warning        { color: $state-warning-text; }
 a.text-warning:hover,
@@ -199,7 +199,7 @@ abbr[title],
 // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted $gray-light;
+  border-bottom: 1px dotted $gray-2;
 }
 abbr.initialism {
   font-size: 90%;
@@ -210,7 +210,7 @@ abbr.initialism {
 blockquote {
   padding: 0 0 0 15px;
   margin: 0 0 $line-height-base;
-  border-left: 5px solid $gray-lighter;
+  border-left: 5px solid $gray-3;
   p {
     margin-bottom: 0;
     font-size: $font-size-base * 1.25;
@@ -220,7 +220,7 @@ blockquote {
   small {
     display: block;
     line-height: $line-height-base;
-    color: $gray-light;
+    color: $gray-2;
     &:before {
       content: '\2014 \00A0';
     }
@@ -231,7 +231,7 @@ blockquote {
     float: right;
     padding-right: 15px;
     padding-left: 0;
-    border-right: 5px solid $gray-lighter;
+    border-right: 5px solid $gray-3;
     border-left: 0;
     p,
     small {

public/sass/components/_alerts.scss

@@ -55,7 +55,7 @@
   border-radius: 50%;
   border: none;
   font-size: 1.1rem;
-  color: $gray-darker;
+  color: $gray-2;
   .fa {
     position: relative;
     top: -2px;

public/sass/components/_dashboard.scss

@@ -245,7 +245,7 @@ div.flot-text {
 .panel-drop-zone {
   display: none;
   .panel-container {
-    border: 1px solid $gray-dark;
+    border: 1px solid $dark-3;
   }
 }
 

public/sass/components/_dropdown.scss

@@ -46,7 +46,6 @@
   display: none; // none by default, but block on "open" of the menu
   float: left;
   min-width: 140px;
-  padding: 5px 0;
   margin: 2px 0 0; // override default ul
   list-style: none;
   background-color: $dropdownBackground;
@@ -92,7 +91,7 @@
 .dropdown-submenu:focus > a {
   text-decoration: none;
   color: $dropdownLinkColorHover;
-  background-color: $grafanaListHighlight;
+  background-color: $dropdownLinkBackgroundHover;
 }
 
 // Active state
@@ -103,7 +102,7 @@
   color: $dropdownLinkColorActive;
   text-decoration: none;
   outline: 0;
-  background-color: $grafanaListHighlight;
+  background-color: $dropdownLinkBackgroundHover;
 }
 
 // Disabled state
@@ -112,7 +111,7 @@
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
 .dropdown-menu > .disabled > a:focus {
-  color: $gray-light;
+  color: $gray-2;
 }
 // Nuke hover/focus effects
 .dropdown-menu > .disabled > a:hover,

public/sass/components/_footer.scss

@@ -3,7 +3,7 @@
   bottom: 2px;
   left: 3px;
   font-size: 80%;
-  color: darken($gray, 25%);
-  a { color: darken($gray, 25%); }
+  color: darken($gray-1, 25%);
+  a { color: darken($gray-1, 25%); }
 }
 

public/sass/components/_gfbox.scss

@@ -28,7 +28,7 @@
 .gf-box-header-save-btn {
   padding: 7px 0;
   float: right;
-  color: $gray-light;
+  color: $gray-2;
   font-style: italic;
 }
 

public/sass/components/_sidemenu.scss

@@ -7,7 +7,7 @@
   top: 52px;
   left: 0;
   width: $side-menu-width;
-  background-color: $body-bg;
+  background-color: $side-menu-bg;
   z-index: 101;
   transform: translate3d(0, -100%, 0);
   visibility: hidden;
@@ -68,7 +68,7 @@
         display: block;
         top: 0px;
         left: $side-menu-width;
-        background-color: $body-bg;
+        background-color: $side-menu-bg;
       }
     }
   }
@@ -112,7 +112,7 @@
   display: block;
 
   &:hover {
-    background-color: $sideMenuBackgroundHighlight;
+    background-color: $side-menu-item-hover-bg;
   }
 
   .sidemenu-item-text {
@@ -166,7 +166,7 @@
   box-sizing: border-box;
   cursor: pointer;
   &:hover {
-    background-color: $sideMenuBackgroundHighlight;
+    background-color: $side-menu-item-hover-bg;
   }
   display: table;
   position: relative;

public/sass/components/_tags.scss

@@ -10,7 +10,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-  background-color: $gray-light;
+  background-color: $gray-1;
 }
 
 

public/sass/pages/_login.scss

@@ -105,7 +105,7 @@
   margin-top: 10px;
   padding: 10px;
   a {
-    color: $gray-light;
+    color: $gray-2;
   }
 }
 
@@ -117,11 +117,11 @@
   .login-divider-line {
     width: 100%;
     height: 10px;
-    border-bottom: 1px solid $gray;
+    border-bottom: 1px solid $gray-1;
 
     .login-divider-text {
-      background-color: $gray-darker;
-      color: $gray-light;
+      background-color: $dark-3;
+      color: $gray-2;
       padding: 0 10px;
     }
   }
@@ -168,7 +168,7 @@
 }
 
 @include media-breakpoint-up(md) {
-  .login-box-logo {
+  .login-box-logo {      
     img {
       width: 125px;
     }

public/sass/pages/_styleguide.scss

@@ -1,10 +1,9 @@
 .style-guide-color-card {
   list-style: none;
-  margin: 0 $spacer $spacer 0;
-  float: left;
-  padding: $spacer*2;
-  width: 20rem;
-  border-radius: 0.5rem;
+  margin: 0;  
+  padding: $spacer;
+  width: 100%;  
+  text-align: center;
   text-shadow: 0 0 8px #fff;
   color: $black;
   font-size: $font-size-sm;
@@ -12,7 +11,7 @@
 
 .color-card-body-bg { background-color: $body-bg; }
 .color-card-page-bg { background-color: $page-bg; }
-.color-card-gray { background-color: $gray; }
+.color-card-gray { background-color: $gray-1; }
 
 .style-guide-button-list {
   padding: $spacer;