first load

styles/_variables.scss

@@ -0,0 +1,34 @@
+// Variables
+
+// Colors
+$hover-button-color: zass-darken($brand_color, 20%);
+$secondary-text-color: zass-lighten($text_color, 20%);
+
+$primary-shade: zass-darken($background_color, 3%); //#f8f8f8 for the default background_color
+$secondary-shade: zass-darken($background_color, 5%); //#f2f2f2 for the default background_color
+
+$font-size-bigger: 16px;
+$font-size-base: 15px;
+$font-size-navigation: 14px;
+$font-size-small: 13px;
+$font-size-smaller: 11px;
+
+$high-contrast-border-color: #87929D; // maintains a 3:1 contrast ratio with default background color (#FFF). Use for controls and inputs
+$low-contrast-border-color: #ddd; // less than 3:1 contrast ratio with default background color. Use for elements that do not require user interaction
+$menu-border-color: #d8dcde;
+
+$button-color: $brand_color;
+
+$input-font-size: 14px;
+$field-text-color: #666;
+$field-text-focus-color: #555;
+
+// Breakpoints variables
+$tablet-width: 768px;
+$desktop-width: 1024px;
+$max-width-container: 1160px;
+
+$font-weight-semibold: 600;
+
+// Transitions
+$input-transition: border .12s ease-in-out;