Configuring Colors

Slate has a set of colour variables ready to go that control all of its features. You can quickly change the look of a site by changing and adding to these variables.

Monochrome

The first set of colours are monochromatic. These are mainly used for text colours.

$bright: #eeeeee;
$gray: #9F9F9F;
$dark: #3c3c3c;
$jet: #000;
Bright
Gray
Dark
Jet

Primary Palette

The next set is the primary colours. These are mainly used to control things like button colours. Think of these as your sites primary branding colours. You can off course add more if you wish.

$primary: #96DEF0;
$secondary: #2980b9;
$tertiary: #8e44ad;
Primary
Secondary
Tertiary

Feedback Palette

The feedback colours are used for validation states on forms and for things like warning boxes. You can also use them to reinforce positive or negative action such as colouring a delete button red.

$positive: #2ECC71;
$negative: #971318;
$warning: #f39c12;
$disabled: #adadad;
Positive
Negative
Warning
Disabled

Gradients

Slate has a number of built in gradient mixins. These variables control the default colours used for those gradients, although you can of course customise the colours on the mixin it's self.

$gradient-start: $primary;
$gradient-middle: darken($primary, 20%);
$gradient-end: darken($primary, 40%);
Gradient

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.