Boilerplate provides a few different conventions for colors as well as a set of color scales. Most of these are defined in variables.scss, however the scales themselves are in colors.scss.
Boilerplate recommends naming colors with a numeric suffix for shade similar to font weights, ranging from 100 (lightest) to 900 (darkest.) Most designs call for shades, and names like $medium-green, $bright-dark-blue, and $not-very-pink lead to confusion.
The color scales provided by Boilerplate all follow the same (CIECAM02) contrast scale:
| Name | Contrast against White | Notes |
|---|---|---|
| $color-100 | 1.5 | |
| $color-200 | 2 | |
| $color-300 | 3 | |
| $color-400 | 4 | First shade safe for headlines |
| $color-500 | 5 | Safe for body text on white or black |
| $color-600 | 7 | Last shade safe for headlines on black |
| $color-700 | 9 | |
| $color-800 | 12 | |
| $color-900 | 17 |
Just based on the number, you can safely use 400 or higher for headlines and 500 or higher for body text. This is overkill for nearly any project, but it’s worth keeping some basic WCAG considerations such as contrast in mind while choosing colors.
All the colors were generated using Leonardo, a tool made by Adobe. While not required, it’s recommended that we continue the convention that 100–600 have sufficient contrast to use against black and 400–900 have sufficeint contrast to use against white. Using a tool like Leonardo is a great way to generate this scale if you need one, but it’s not automated so each shade can be picked individually as well.
A place to set up shorthands for colors, such as $primary and $secondary.
This is standard set of colors that each of specific meanings. Nearly every site will use all of these:
$confirm – Indicates a confirmation action such as confirm, save or complete. Generally not the same colors used for next or continue actions.$danger - Indicates a destructive action such as remove or unsubscribe. Shouldn’t be used for actions like close or cancel, as those aren’t destructive.$disabled – Used to show that a button or input is disabled.$error – Used for error messaging and failed validation. Semantically different than $danger but often very similar colors are used.$info – Used for normal messaging; meant to draw some attention but not as high priority as $error, $success, or $warning.$success – Used for success or confirmation messages.$warning – Used for warning messages, such as alerts or closures.$plain-text: $gray-900 !default;
$meta-text: $gray-500 !default;
$link: $primary !default;
$link\:hover: $blue-400 !default;
$border: $gray-200 !default;This is a set of common uses for colors – body text, meta text, links, link hovers, and borders.
Mostly deprecated, but quick access to some common social network brand colors.