05
Color
Five core colors, each with a job. Click any swatch to copy its value.
05.1
Core palette
05.2
Text on color
Chalk on the three brand colors is the signature look and the default. Smoky Black is a valid alternative, used less often, and the one to reach for with small text on screens.
Give great ideas character.
Chalk on Sky Blue · 2.67
Give great ideas character.
Chalk on Angry Flamingo · 3.73
Give great ideas character.
Chalk on Yellow Sea · 1.94
Give great ideas character.
Smoky Black on Sky Blue · 7.29
Give great ideas character.
Smoky Black on Angry Flamingo · 5.22
Give great ideas character.
Smoky Black on Yellow Sea · 10.05
Give great ideas character.
Smoky Black on Chalk · 19.48
Give great ideas character.
Chalk on Smoky Black · 19.48
Numbers are WCAG contrast ratios: 4.5 is the usual minimum for body text on screens, 3 for large text.
05.3
Color roles on the web
Proportions are a guide, not a formula.
Covers the most area. Page backgrounds and breathing room.
The next largest areas after Chalk. Big blocks, hero sections, primary buttons.
Small doses that pull the eye: highlights, key calls to action, details.
Backs up the other two in secondary elements, tags and illustrations.
Text on Chalk and the darkest UI details. Always replaces pure black.
Color on color
The brand colors can sit on each other, especially when a Cube sits on a colored background, like a Flamingo Cube on Sky Blue.
05.4
UI scales
Ten steps per color for website UI: buttons, hover and pressed states, subtle backgrounds and borders. The brand color sits at 500; in the neutral scale, Chalk is 50 and Smoky Black is 900. Brand pieces (posts, posters, covers) use the core palette.
Sky Blue
Angry Flamingo
Yellow Sea
Neutral · Chalk to Smoky Black
05.5
Cube-only colors
Two extra colors exist only for the Cream Cube, so it stays visible on Chalk backgrounds. Never use them for text, backgrounds or other graphics.