8 files changed, 103 insertions, 0 deletions
diff --git a/demo/src/sass/settings/breakpoints.scss b/demo/src/sass/settings/breakpoints.scss
new file mode 100644
index 00000000..65940ad6
--- /dev/null
+++ b/demo/src/sass/settings/breakpoints.scss
@@ -0,0 +1,6 @@
+// ==========================================================================
+// Breakpoints
+// ==========================================================================
+
+$screen-sm: 480px;
+$screen-md: 768px;
diff --git a/demo/src/sass/settings/colors.scss b/demo/src/sass/settings/colors.scss
new file mode 100644
index 00000000..65d3f7b7
--- /dev/null
+++ b/demo/src/sass/settings/colors.scss
@@ -0,0 +1,32 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+// Greyscale
+$gray-dark: #343f4a;
+$gray: #55646b;
+$gray-light: #cbd0d3;
+$gray-lighter: #dbe3e8;
+$off-white: #f2f5f7;
+
+// Text
+$color-text: #fff;
+
+// Plyr
+$color-brand-primary: #1aafff;
+
+// Brands
+$color-twitter: #4baaf4;
+$color-youtube: #cc181e;
+$color-vimeo: #19b7ed;
+
+// Elements
+$color-link: #fff;
+$color-background: $color-brand-primary;
+
+// Buttons
+$color-button-background: #fff;
+$color-button-text: $gray;
+
+// Focus
+$tab-focus-default-color: #fff;
diff --git a/demo/src/sass/settings/cosmetic.scss b/demo/src/sass/settings/cosmetic.scss
new file mode 100644
index 00000000..d750efe2
--- /dev/null
+++ b/demo/src/sass/settings/cosmetic.scss
@@ -0,0 +1,12 @@
+// ==========================================================================
+// Misc cosmetic
+// ==========================================================================
+
+// Button count arrow size
+$arrow-size: 5px;
+
+// Radii
+$border-radius-base: 4px;
+
+// Background
+$page-background: linear-gradient(to left top, lighten($color-background, 10%), darken($color-background, 20%));
diff --git a/demo/src/sass/settings/icons.scss b/demo/src/sass/settings/icons.scss
new file mode 100644
index 00000000..ad16a645
--- /dev/null
+++ b/demo/src/sass/settings/icons.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+$icon-size: 16px;
diff --git a/demo/src/sass/settings/layout.scss b/demo/src/sass/settings/layout.scss
new file mode 100644
index 00000000..8d1fbd28
--- /dev/null
+++ b/demo/src/sass/settings/layout.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Layout
+// ==========================================================================
+
+$container-max-width: 1280px;
diff --git a/demo/src/sass/settings/plyr.scss b/demo/src/sass/settings/plyr.scss
new file mode 100644
index 00000000..3d30ce71
--- /dev/null
+++ b/demo/src/sass/settings/plyr.scss
@@ -0,0 +1,18 @@
+// ==========================================================================
+// Plyr Settings
+// ==========================================================================
+
+// Font
+$plyr-font-family: inherit;
+
+// Sizes
+$plyr-font-size-base: 13px;
+$plyr-font-size-small: 12px;
+$plyr-font-size-time: 11px;
+$plyr-font-size-badges: 9px;
+
+// Captions
+$plyr-font-size-captions-base: $plyr-font-size-base;
+$plyr-font-size-captions-small: $plyr-font-size-small;
+$plyr-font-size-captions-medium: 18px;
+$plyr-font-size-captions-large: 21px;
diff --git a/demo/src/sass/settings/spacing.scss b/demo/src/sass/settings/spacing.scss
new file mode 100644
index 00000000..a19b0a95
--- /dev/null
+++ b/demo/src/sass/settings/spacing.scss
@@ -0,0 +1,5 @@
+// ==========================================================================
+// Colors
+// ==========================================================================
+
+$spacing-base: 20px;
diff --git a/demo/src/sass/settings/type.scss b/demo/src/sass/settings/type.scss
new file mode 100644
index 00000000..e8f0b2c8
--- /dev/null
+++ b/demo/src/sass/settings/type.scss
@@ -0,0 +1,20 @@
+// ==========================================================================
+// Typography
+// ==========================================================================
+
+$font-sans-serif: 'Gordita', 'Avenir', 'Helvetica Neue', sans-serif;
+
+$font-size-base: 15;
+$font-size-small: 13;
+$font-size-large: 18;
+$font-size-h1: 64;
+
+$font-weight-light: 300;
+$font-weight-regular: 400;
+$font-weight-medium: 500;
+$font-weight-bold: 600;
+$font-weight-black: 900;
+
+$line-height-base: 1.75;
+
+$letter-spacing-headings: -0.025em;