3 files changed, 30 insertions, 13 deletions
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
index 61363e67..308e6757 100644
--- a/demo/src/sass/settings/colors.scss
+++ b/demo/src/sass/settings/colors.scss
@@ -2,27 +2,41 @@
 // Colors
 // ==========================================================================
 
-// Greyscale
-$gray-dark: #343f4a;
-$gray: #55646b;
+// Grayscale
+$color-gray-9: hsl(210, 15%, 16%);
+$color-gray-8: lighten($color-gray-9, 9%);
+$color-gray-7: lighten($color-gray-8, 9%);
+$color-gray-6: lighten($color-gray-7, 9%);
+$color-gray-5: lighten($color-gray-6, 9%);
+$color-gray-4: lighten($color-gray-5, 9%);
+$color-gray-3: lighten($color-gray-4, 9%);
+$color-gray-2: lighten($color-gray-3, 9%);
+$color-gray-1: lighten($color-gray-2, 9%);
+$color-gray-0: lighten($color-gray-1, 9%);
 
-// Text
-$color-text: #fff;
+// Branding
+$color-brand-primary: hsl(198, 100%, 50%);
 
-// Plyr
-$color-brand-primary: #1aafff; // #7bc47f
+// Text
+$color-text: $color-gray-7;
+$color-headings: $color-brand-primary;
 
 // Brands
 $color-twitter: #4baaf4;
 
 // 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-text-hover: $gray-dark;
+$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-6;
 
 // 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;