diff --git a/package.json b/package.json
index c2d89090d..94f9dee19 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@angular/router": "4.2.5",
     "@blackbaud/skyux": ">=2.0.0-rc.0 <2.0.0",
     "@blackbaud/skyux-builder": "1.0.0-rc.15",
-    "@blackbaud/skyux-design-tokens": "0.0.7",
+    "@blackbaud/skyux-design-tokens": "0.0.8",
     "@blackbaud/stache": "2.0.0-rc.2",
     "@types/core-js": "0.9.41",
     "@types/jasmine": "2.5.47",
diff --git a/skyux-spa-visual-tests/screenshots-baseline/file-Drop-Nolink-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/file-Drop-Nolink-chrome-1000x800-dpr-1.png
deleted file mode 100644
index 3d0b7cf07..000000000
Binary files a/skyux-spa-visual-tests/screenshots-baseline/file-Drop-Nolink-chrome-1000x800-dpr-1.png and /dev/null differ
diff --git a/skyux-spa-visual-tests/screenshots-baseline/file-Drop-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/file-Drop-chrome-1000x800-dpr-1.png
deleted file mode 100644
index c6a590c00..000000000
Binary files a/skyux-spa-visual-tests/screenshots-baseline/file-Drop-chrome-1000x800-dpr-1.png and /dev/null differ
diff --git a/skyux-spa-visual-tests/screenshots-baseline/filter-Summary-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/filter-Summary-chrome-1000x800-dpr-1.png
deleted file mode 100644
index a44ccdb46..000000000
Binary files a/skyux-spa-visual-tests/screenshots-baseline/filter-Summary-chrome-1000x800-dpr-1.png and /dev/null differ
diff --git a/src/app/components/wizard/wizard-demo-form.component.html b/src/app/components/wizard/wizard-demo-form.component.html
index 03194a427..7514e518e 100644
--- a/src/app/components/wizard/wizard-demo-form.component.html
+++ b/src/app/components/wizard/wizard-demo-form.component.html
@@ -10,7 +10,7 @@
       >
         <label>
           Enter text to continue:
-          <input type="text" [(ngModel)]="requiredValue1" />
+          <input class="sky-form-control" type="text" [(ngModel)]="requiredValue1" />
         </label>
       </sky-tab>
       <sky-tab
@@ -36,7 +36,7 @@
     <sky-tabset-nav-button buttonType="next" [tabset]="wizardDemo"></sky-tabset-nav-button>
     <button
       type="button"
-      class="sky-btn sky-btn-primary"
+      class="sky-btn sky-btn-default"
       (click)="instance.close()"
     >
       Save and close
diff --git a/src/app/design/color/index.html b/src/app/design/color/index.html
index a85fb55a0..9a16251b0 100644
--- a/src/app/design/color/index.html
+++ b/src/app/design/color/index.html
@@ -91,6 +91,26 @@ <h2 class="sky-section-heading">Text</h2>
       </div>
     </div>
   </div>
+  
+  <div class="definition-table definition-table-wide">
+    <div class="definition-item">
+      <div class="swatch" style="background-color: #cdcfd2;"></div>
+    </div>
+    <div class="definition-props">
+      <div class="definition-usage">
+        <div class="sky-field-label">Usage</div>
+        <div>Borderless icon buttons such as the expand/collapse chevron</div>
+      </div>
+      <div class="definition-code">
+        <div class="sky-field-label">Code</div>
+        <code>$sky-text-color-icon-borderless</code>
+      </div>
+      <div class="definition-styling">
+        <div class="sky-field-label">Styling</div>
+        <div>#cdcfd2</div>
+      </div>
+    </div>
+  </div>
 
   <h2 class="sky-section-heading">Backgrounds</h2>
 
@@ -194,6 +214,26 @@ <h2 class="sky-section-heading">Backgrounds</h2>
     </div>
   </div>
   
+  <div class="definition-table definition-table-wide">
+    <div class="definition-item">
+      <div class="swatch" style="background-color: #c1e8fb"></div>
+    </div>
+    <div class="definition-props">
+      <div class="definition-usage">
+        <div class="sky-field-label">Usage</div>
+        <div>Background for less important elements conveying an "information" status, such as applied filter bubbles</div>
+      </div>
+      <div class="definition-code">
+        <div class="sky-field-label">Code</div>
+        <code>$sky-background-color-info-light</code>
+      </div>
+      <div class="definition-styling">
+        <div class="sky-field-label">Styling</div>
+        <div>#c1e8fb</div>
+      </div>
+    </div>
+  </div>
+  
   <div class="definition-table definition-table-wide">
     <div class="definition-item">
       <div class="swatch" style="background-color: #b7da9b"></div>
diff --git a/src/app/design/icons/index.html b/src/app/design/icons/index.html
index 4a75230aa..812da32bd 100644
--- a/src/app/design/icons/index.html
+++ b/src/app/design/icons/index.html
@@ -743,40 +743,7 @@
 
       </div>
     </div>
-
-    <div class="
-      definition-table
-      definition-table-narrow
-      ">
-      <div class="definition-item">
-
-          <i class="fa fa-spinner"></i>
-
-      </div>
-      <div class="definition-props">
-        <div class="definition-usage">
-          <div class="sky-field-label">Usage</div>
-
-            <ul class="list-unstyled">
-
-                <li>Loading</li>
-
-                <li>Wait</li>
-
-            </ul>
-
-        </div>
-        <div class="definition-code">
-          <div class="sky-field-label">Code</div>
-
-
-            <code>&lt;i class=&quot;fa fa-spinner&quot;&gt;&lt;/i&gt;</code>
-
-        </div>
-
-      </div>
-    </div>
-
+    
     <div class="
       definition-table
       definition-table-narrow
@@ -794,7 +761,7 @@
 
                 <li>Primary</li>
 
-                <li>Raiting</li>
+                <li>Rating</li>
 
             </ul>
 
diff --git a/src/app/design/typography/index.html b/src/app/design/typography/index.html
index 869e0fe9e..74b4fd783 100644
--- a/src/app/design/typography/index.html
+++ b/src/app/design/typography/index.html
@@ -172,6 +172,27 @@ <h2 class="sky-section-heading" id="section-heading">Section heading</h2>
     </div>
   </div>
 
+  <div class="definition-table definition-table-wide">
+    <div class="definition-item">
+      <div class="sky-control-label">Form control label</div>
+    </div>
+    <div class="definition-props">
+      <div class="definition-usage">
+        <div class="sky-field-label">Usage</div>
+        <div>This class formats labels for form input fields.</div>
+      </div>
+      <div class="definition-code">
+        <div class="sky-field-label">Code</div>
+        <code>&lt;label class=&quot;sky-control-label&quot;&gt;Form control label&lt;/label&gt;</code>
+      </div>
+      <div class="definition-styling">
+        <div class="sky-field-label">Styling</div>
+        <div>Blackbaud Sans 15px #282b31</div>
+        <div>margin-bottom: 5px</div>
+      </div>
+    </div>
+  </div>
+
   <div class="definition-table definition-table-wide">
     <div class="definition-item">
       <div class="sky-text-success">Success</div>
diff --git a/src/modules/action-button/action-button.component.scss b/src/modules/action-button/action-button.component.scss
index 25e70823a..1d27c1c15 100644
--- a/src/modules/action-button/action-button.component.scss
+++ b/src/modules/action-button/action-button.component.scss
@@ -1,7 +1,7 @@
 @import '../../scss/mixins';
 
 .sky-action-button {
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   max-width: 236px;
   border-radius: 3px;
   cursor: pointer;
diff --git a/src/modules/chevron/chevron.component.scss b/src/modules/chevron/chevron.component.scss
index 99debab6f..22ef27f5d 100644
--- a/src/modules/chevron/chevron.component.scss
+++ b/src/modules/chevron/chevron.component.scss
@@ -9,10 +9,15 @@
     overflow: hidden;
     padding: 0;
     width: $sky-context-menu-size;
+    cursor: pointer;
+  
+  &:hover .sky-chevron-part {
+    border-color: darken($sky-text-color-icon-borderless, 20%);
+  }
 }
 
 .sky-chevron-part {
-    border-color: #d1dade;
+    border-color: $sky-text-color-icon-borderless;
     border-style: solid;
     border-width: 3px 0 0 0;
     display: inline-block;
diff --git a/src/modules/colorpicker/colorpicker.component.scss b/src/modules/colorpicker/colorpicker.component.scss
index 86b520a0b..2b777ae6c 100644
--- a/src/modules/colorpicker/colorpicker.component.scss
+++ b/src/modules/colorpicker/colorpicker.component.scss
@@ -25,7 +25,6 @@
 }
 
 .sky-colorpicker-reset-button::before {
-  color: $sky-text-color-deemphasized;
   content: '\f00d';
   font-family: FontAwesome;
   font-size: $sky-font-size-base;
@@ -41,6 +40,10 @@
   position: relative;
   left: -25px;
   cursor: pointer;
+  color: $sky-text-color-deemphasized;
+  &:hover {
+    color: darken($sky-text-color-deemphasized, 20%);
+  }
 }
 
 .sky-colorpicker-footer {
@@ -82,6 +85,7 @@
     text-align: center;
     font-size: 14px;
     height: 26px;
+    color: $sky-text-color-default;
     &:invalid {
       box-shadow: none;
     }
@@ -121,7 +125,6 @@
     .sky-preset-color:hover {
       cursor: pointer;
       border: $sky-color-white solid 2px;
-      outline: 1px solid $sky-border-color-neutral-light;
       margin: 4px;
       width: 34px;
       height: 34px;
diff --git a/src/modules/datepicker/datepicker.component.scss b/src/modules/datepicker/datepicker.component.scss
index 5d42a5ae3..99544b8f7 100644
--- a/src/modules/datepicker/datepicker.component.scss
+++ b/src/modules/datepicker/datepicker.component.scss
@@ -1,9 +1,11 @@
+@import "../../scss/mixins";
+
 .sky-input-group-datepicker-btn /deep/ .sky-dropdown-button.sky-btn {
   border-radius: 0;
-}
-
-.sky-input-group /deep/ .sky-form-control:not(.ng-invalid) {
-  border-right: none;
+  border-left: none;
+  &:hover{
+    @include sky-border(dark, left);
+  }
 }
 
 .sky-input-group-datepicker-btn /deep/ .sky-dropdown-menu {
diff --git a/src/modules/dropdown/dropdown.component.scss b/src/modules/dropdown/dropdown.component.scss
index bb69c1dc6..22efc146f 100644
--- a/src/modules/dropdown/dropdown.component.scss
+++ b/src/modules/dropdown/dropdown.component.scss
@@ -9,9 +9,9 @@
 .sky-dropdown-button-type-context-menu {
   border-radius: 50%;
   padding-bottom: 3px;
-  padding-left: 6px;
-  padding-right: 6px;
-  padding-top: 2px;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 3px;
 }
 
 .sky-dropdown-caret {
diff --git a/src/modules/fileattachments/file-drop.component.scss b/src/modules/fileattachments/file-drop.component.scss
index 715912a27..0d7c4b43d 100644
--- a/src/modules/fileattachments/file-drop.component.scss
+++ b/src/modules/fileattachments/file-drop.component.scss
@@ -22,15 +22,15 @@
 }
 
 .sky-file-drop-contents {
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   background-color: $sky-background-color-neutral-light;
   padding: $sky-padding;
+  height: 100%;
 }
 
 .sky-file-drop-contents {
   color: $sky-text-color-default;
   cursor: pointer;
-  height: 120px;
   width: 100%;
   text-align: center;
 
@@ -93,7 +93,7 @@
 }
 
 .sky-file-drop-text-header {
-  font-size: 17px;
+  @include sky-headline;
   margin: 0;
 }
 
@@ -104,9 +104,6 @@
 }
 
 .sky-file-drop-text, .sky-file-drop-text-header {
-  font-style: italic;
-  color: $sky-text-color-deemphasized;
-  font-weight: 600;
   line-height: 1.1;
   display: block;
 }
diff --git a/src/modules/filter/filter-summary-item.component.scss b/src/modules/filter/filter-summary-item.component.scss
index a5e190f7a..213172477 100644
--- a/src/modules/filter/filter-summary-item.component.scss
+++ b/src/modules/filter/filter-summary-item.component.scss
@@ -2,7 +2,7 @@
 
 .sky-filter-summary-item {
   display: inline-block;
-  background-color: $sky-background-color-info;
+  background-color: $sky-background-color-info-light;
   border: 1px solid $sky-highlight-color-info;
   border-radius: 4px;
   padding: 3px;
diff --git a/src/modules/modal/modal.component.scss b/src/modules/modal/modal.component.scss
index d50bcd6cd..2c0cab6dd 100644
--- a/src/modules/modal/modal.component.scss
+++ b/src/modules/modal/modal.component.scss
@@ -57,12 +57,7 @@
 .sky-modal-header-buttons {
   .sky-btn {
     border: none;
-    color: $sky-text-color-deemphasized;
-
-    &:hover {
-      color: $sky-text-color-default;
-      transition: color $sky-transition-time-short;
-    }
+    @include sky-icon-button-borderless;
   }
 }
 
diff --git a/src/modules/search/search.component.scss b/src/modules/search/search.component.scss
index 6281b4a2f..4a20d759f 100644
--- a/src/modules/search/search.component.scss
+++ b/src/modules/search/search.component.scss
@@ -101,8 +101,7 @@
 
 .sky-input-group.sky-search-input-container.sky-search-input-focused {
 
-    border: 1px solid $sky-focus-border-color;
-    box-shadow: 0 0 8px $sky-focus-shadow-color;
+    @include sky-field-status(active);
     border-radius: 6px;
 
     .sky-input-group-btn {
diff --git a/src/modules/tiles/tile/tile.component.scss b/src/modules/tiles/tile/tile.component.scss
index 3a41427a4..1f4e34df6 100644
--- a/src/modules/tiles/tile/tile.component.scss
+++ b/src/modules/tiles/tile/tile.component.scss
@@ -57,7 +57,7 @@
 }
 
 .sky-tile-settings {
-    color: #D1DADE;
+    @include sky-icon-button-borderless;
     height: $sky-context-menu-size;
     margin: 12px ($sky-tile-header-tool-padding - 6) 12px 0;
     padding: 0;
@@ -67,7 +67,7 @@
 }
 
 .sky-tile-grab-handle {
-    color: #E7EAEC;
+    @include sky-icon-button-borderless;
     cursor: move;
     cursor: -webkit-grab;
     cursor: -moz-grab;
diff --git a/src/modules/timepicker/timepicker.component.scss b/src/modules/timepicker/timepicker.component.scss
index e9fc7d414..d301aac19 100644
--- a/src/modules/timepicker/timepicker.component.scss
+++ b/src/modules/timepicker/timepicker.component.scss
@@ -5,10 +5,6 @@
   border-radius: 0;
 }
 
-.sky-input-group /deep/ .sky-form-control {
-  border-right: none;
-}
-
 .sky-input-group-timepicker-btn /deep/ .sky-dropdown-menu {
   box-shadow: none;
   background-color: transparent;
@@ -30,6 +26,8 @@
   padding-bottom: $sky-padding-half;
   width: 100%;
   height: 100%;
+  
+  
 }
 .sky-timepicker-container :last-child ol{
   display: flex;
@@ -51,7 +49,7 @@
   list-style-type: none;
   margin: 0;
   padding: 0;
-}
+}                                                      
 .sky-timepicker-column ol li {
   text-align: center;
   cursor: pointer;
@@ -59,8 +57,13 @@
 }
 .sky-timepicker-column ol li button {
   cursor: pointer;
-  outline: none;
+  &:focus {outline: thin dotted;
+  //webkit
+  outline: -webkit-focus-ring-color auto 5px;
+  outline-offset: -2px;
+  }
 }
+
 .sky-timepicker-column ol li button:hover {
   background-color: $sky-color-gray-05;
 }
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
index 40823d3bc..f3fd1e3a0 100644
--- a/src/scss/_buttons.scss
+++ b/src/scss/_buttons.scss
@@ -3,7 +3,7 @@
 
 .sky-btn {
   background-color: transparent;
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   border-radius: 3px;
   color: $sky-text-color-default;
   cursor: pointer;
@@ -28,7 +28,7 @@
 }
 
 .sky-btn-default {
-  @include sky-button-variant($sky-text-color-default, $sky-color-white, $sky-border-color-neutral-light, $sky-background-color-neutral-light);
+  @include sky-button-variant($sky-text-color-default, $sky-color-white, $sky-border-color-neutral-medium, $sky-background-color-neutral-light);
 }
 
 .sky-btn-primary {
@@ -93,7 +93,7 @@
 }
 
 .sky-tab-header-count {
-    @include sky-emphasized();
+    font-weight: 400;
     color: $sky-text-color-action-primary;
     margin-left: $sky-margin-half;
 }
diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss
index e27775e97..27c335d90 100644
--- a/src/scss/_fonts.scss
+++ b/src/scss/_fonts.scss
@@ -68,12 +68,12 @@ src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-light.wof
 //   src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-thin-italic.woff) format('woff');
 // }
 
-@font-face {
-  font-family: 'Blackbaud Sans Condensed';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-condensed.woff) format('woff');
-}
+// @font-face {
+//   font-family: 'Blackbaud Sans Condensed';
+//   font-style: normal;
+//   font-weight: 400;
+//   src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-condensed.woff) format('woff');
+// }
 
 @font-face {
   font-family: 'Blackbaud Sans Condensed';
@@ -83,9 +83,9 @@ src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-light.wof
 }
 
 
-// @font-face {
-//   font-family: 'Blackbaud Sans Condensed';
-//   font-style: normal;
-//   font-weight: 500;
-//   src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-condensed-semi-bold.woff) format('woff');
-// }
+@font-face {
+ font-family: 'Blackbaud Sans Condensed';
+ font-style: normal;
+ font-weight: 500;
+ src: url(https://sky.blackbaudcdn.net/skyux-fonts/1.0.0/blackbaud-sans-condensed-semi-bold.woff) format('woff');
+}
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
index c3e22c82a..6954f3334 100644
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@@ -3,9 +3,14 @@
 .sky-form-control {
   width: 100%;
   padding: 6px 12px;
-  @include sky-border(light, top, bottom, left, right);
+  @include sky-border(dark, top, bottom, left, right);
   line-height: $sky-line-height-base;
   font-size: $sky-font-size-base;
+  color: $sky-text-color-default;
+  
+  &:focus {
+    @include sky-field-status(active);
+  }
 }
 
 .sky-form-group {
@@ -14,7 +19,7 @@
 
 input.ng-invalid.ng-touched,
 select.ng-invalid.submitted {
-  @include sky-field-invalid;
+  @include sky-field-status(invalid);
 }
 
 .sky-error-label {
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 3f3bdcbad..7700736e2 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -35,7 +35,7 @@
 @mixin sky-headline {
   font-family: $sky-font-family-condensed;
   color: $sky-text-color-default;
-  font-weight: 400;
+  font-weight: 500;
   font-size: 22px;
 }
 
@@ -61,10 +61,22 @@
   font-size: $sky-font-size-base;
 }
 
-@mixin sky-field-invalid {
-  box-shadow: 0 0 8px rgba(237, 85, 101, 0.6);
-  border: 1px solid #ed5565;
-  outline: none;
+@mixin sky-field-status($status) {
+  @if($status == "active") {
+    box-shadow: 0 0 8px rgba($sky-highlight-color-info, 0.6);
+    border: 1px solid $sky-highlight-color-info;
+    outline: none;
+  }
+  @if($status == "invalid") {
+    box-shadow: 0 0 8px rgba($sky-highlight-color-danger, 0.6);
+    border: 1px solid $sky-highlight-color-danger;
+    outline: none;
+  }
+  @if($status == "success") {
+    box-shadow: 0 0 8px rgba($sky-highlight-color-success, 0.6);
+    border: 1px solid $sky-highlight-color-success;
+    outline: none;
+  }
 }
 
 @mixin sky-btn-tab {
@@ -124,6 +136,16 @@
   );
 }
 
+@mixin sky-icon-button-borderless {
+    color: $sky-text-color-icon-borderless;
+    cursor: pointer;
+    
+    &:hover {
+        color: darken($sky-text-color-icon-borderless, 20%);
+        transition: color $sky-transition-time-short;
+    }
+}
+
 @mixin sky-button-variant($color, $background, $border, $hoverbackground:darken($background, 10%)) {
   color: $color;
   background-color: $background;
@@ -136,7 +158,7 @@
   &.sky-btn-active {
     color: $color;
     background-color: $hoverbackground;
-    border-color: darken($border, 12%);
+    border-color: darken($border, 10%);
   }
   &:active,
   &.sky-btn-active {
@@ -173,6 +195,7 @@
   /deep/ > button {
     background-color: transparent;
     border: none;
+    color: $sky-text-color-default;
     cursor: pointer;
     display: block;
     padding: 3px $sky-padding-double;
diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
index ec25ef67a..c2f8dec2e 100644
--- a/src/scss/_theme.scss
+++ b/src/scss/_theme.scss
@@ -136,19 +136,22 @@ mark.sky-highlight-mark {
 
 /* Placeholder Text */
 ::-webkit-input-placeholder {
-    @include sky-deemphasized();
+    @include sky-deemphasized;
+    opacity: 1;
 }
 
 ::-moz-placeholder { /* Firefox 19+ */
-    @include sky-deemphasized();
-    opacity: 1; // See https://github.com/twbs/bootstrap/pull/11526
+    @include sky-deemphasized;
+    opacity: 1;
 }
 
 input:-moz-placeholder { /* Firefox 18- */
-    @include sky-deemphasized();
+    @include sky-deemphasized;
+    opacity: 1;
 }
 
 :-ms-input-placeholder { /* IE */
-    @include sky-deemphasized();
+    @include sky-deemphasized;
+    opacity: 1;
 }
 /* End Placeholder Text */
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 639727189..e0b4a2a04 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,6 +1,6 @@
 @import '~@blackbaud/skyux-design-tokens/scss/variables.scss';
 
-$sky-font-family: "Blackbaud Sans", Helvetica, Arial, sans-serif !default;
+$sky-font-family: "Blackbaud Sans", "Helvetica Neue", Arial, sans-serif !default;
 $sky-font-family-condensed: "Blackbaud Sans Condensed", "Helvetica Neue Condensed", "Arial Narrow" !default;
 
 $sky-padding: 10px !default;
@@ -51,11 +51,6 @@ $sky-screen-xs-max: $sky-screen-sm-min - 1;
 $sky-screen-sm-max: $sky-screen-md-min - 1;
 $sky-screen-md-max: $sky-screen-lg-min - 1;
 
-// begin focus
-$sky-focus-border-color: #1f90d8 !default;
-$sky-focus-shadow-color: rgba(28, 132, 198, 0.6) !default;
-// end focus
-
 // begin color palette
 $sky-palette-multi: (
   scale-color($sky-color-blue-50, $lightness: 8%),