Color Variables

Colors are a super important part of any site and we want to make sure your campaign is on brand. With that in mind, we have tried to make it easy with a few handy SCSS variables for y'all.

Based off the Brand and Secondary colours set in Design > Brand, we automagically create a palette of 16 shades (8 for each) that you can use.

Along with the original color, we generate 4 lighter shades and 3 darker shades: Light, Lighter, Lightest, SuperLight , Dark, Darker, and Darkest. These can be used for anything from background or text color, through to fancy gradients or box-shadows.

Variables

Primary

$primaryColor
$primaryLight
$primaryLighter
$primaryLightest
$primarySuperLight
$primaryDark
$primaryDarker
$primaryDarkest

Secondary

$secondaryColor
$secondaryLight
$secondaryLighter
$secondaryLightest
$secondarySuperLight
$secondaryDark
$secondaryDarker
$secondaryDarkest

📘

Colourful Language

Tip for the top: it can be helpful to come up with a quick guide for when to use certain color. Assigning colours to actions like Donate or Sign up, or even to loose emotions like Community or Success can help you figure out what your buttons should look like, or what colours across the sections of your site.

With a guide like this, you can ensure visual continuity for you and your users and help teach them what's expected of them.

🚧

Stay Visible

Double-triple-check the contrast ratio when your combining colours together, to make sure that everyone can see it 👀 We have a super great accessible-color helper that you can use to help keep you on the straight and narrow.

Examples

Use the primary color as a background color

.foo {
  background-color: $primaryColor;
}

Theme an element using a mixture of secondary shades

.bar {
  border: 2px solid $secondaryDark;
  color: $secondaryDarkest;
  background: $secondarySuperLight;
}