4 files changed, 31 insertions, 18 deletions
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 65d3f7b7..ecd55ad1 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -2,31 +2,41 @@
 // Colors
 // ==========================================================================
 
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
-$gray-light: #cbd0d3;
-$gray-lighter: #dbe3e8;
-$off-white: #f2f5f7;
+// Grayscale
+$color-gray-900: hsl(210, 15%, 16%);
+$color-gray-800: lighten($color-gray-900, 9%);
+$color-gray-700: lighten($color-gray-800, 9%);
+$color-gray-600: lighten($color-gray-700, 9%);
+$color-gray-500: lighten($color-gray-600, 9%);
+$color-gray-400: lighten($color-gray-500, 9%);
+$color-gray-300: lighten($color-gray-400, 9%);
+$color-gray-200: lighten($color-gray-300, 9%);
+$color-gray-100: lighten($color-gray-200, 9%);
+$color-gray-50: lighten($color-gray-100, 9%);
 
-// Text
-$color-text: #fff;
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
 
-// Plyr
-$color-brand-primary: #1aafff;
+// Text
+$color-text: $color-gray-700;
+$color-headings: $color-brand-primary;
 
 // Brands
 $color-twitter: #4baaf4;
-$color-youtube: #cc181e;
-$color-vimeo: #19b7ed;
 
 // Elements
-$color-link: #fff;
-$color-background: $color-brand-primary;
+$color-link: $color-brand-primary;
+
+// Background
+$color-background-from: hsl(198, 100%, 94%);
+$color-background-to: hsl(198, 100%, 98%);
 
 // Buttons
-$color-button-background: #fff;
-$color-button-text: $gray;
+$color-button-background: $color-brand-primary;
+$color-button-text: #fff;
+$color-button-background-hover: hsl(198, 100%, 55%);
+$color-button-count-background: #fff;
+$color-button-count-text: $color-gray-600;
 
 // Focus
 $tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
index d750efe2..84ff819f 100644
--- a/demo/src/sass/settings/cosmetic.scss
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -9,4 +9,4 @@ $arrow-size: 5px;
 $border-radius-base: 4px;
 
 // Background
-$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
+$page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
index ae6be636..edd917c4 100644
--- a/demo/src/sass/settings/plyr.scss
+++ b/demo/src/sass/settings/plyr.scss
@@ -14,6 +14,9 @@ $plyr-font-size-badges: 9px;
 // Other
 $plyr-font-smoothing: true;
 
+// Colors
+$plyr-color-main: $color-brand-primary;
+
 // Captions
 $plyr-font-size-captions-base: $plyr-font-size-base;
 $plyr-font-size-captions-small: $plyr-font-size-small;
diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss
index a19b0a95..085838fd 100644
--- a/demo/src/sass/settings/spacing.scss
+++ b/demo/src/sass/settings/spacing.scss
@@ -2,4 +2,4 @@
 // Colors
 // ==========================================================================
 
-$spacing-base: 20px;
+$spacing-base: 16px;