Guidelines
Color
A simple system for interfaces and illustrations.
Naming
Color names are unambiguous and direct. “Blue” means blue. We do this to avoid unneeded abstractions. Extended color names, like black-300 are variations that, like font-weight values, denote increasingly darker (500, 600) and increasingly lighter shades (300, 200).
Palette
- Our primary palette consists of “core” colors, as indicated by
(c), and help establish our brand. - We have extended this with shades that are reserved primarily for illustrations.
blue-100blue-200blue(c)blue-600indigo-100indigo-200indigo(c)indigo-600purple-100purple-200purple(c)purple-600green-100green-200green(c)green-600yellow-100yellow-200yellow(c)yellow-600red-100red-200red(c)red-600black-300(c)black(c)gray-200(c)gray-300(c)gray(c)white(c)Usage
Blue
Do
Highlights key actions in UI, buttons, links, icons, and branded moments
Don’t
Success graphics, body copy, headlines
Indigo
Do
Graphs and data visualizations, tags, pills, status labels, illustrations
Don’t
Text, icons
Purple
Do
Graphs and data visualizations, tags, pills, status labels, illustrations
Don’t
Text, icons
Green
Do
Success graphics, completion, and confirmation
Don’t
Text, background for white text, graphs and data visualizations, icons
Yellow
Do
Stars, review charts, alerts, illustrations
Don’t
Text, background for white text, graphs and data visualizations, icons
Red
Do
Icons, caution buttons, alerts, warning states
Don’t
Background for white text, icons
Black
Do
Headings, iconography, and small text that supports UI
Don’t
Buttons, illustrations
Black300
Do
Subheadings and body copy
Don’t
Logos, icons, backgrounds, borders
Gray
Do
Inactive icons, ghost text
Don’t
Logos, icons, backgrounds, borders
Gray300
Do
Borders
Don’t
Text, buttons
Gray200
Do
Backgrounds behind components, like cards
Don’t
Text, buttons, borders, icons
White
Do
Text, borders, icons
Don’t
On light backgrounds
Implementations
- All color variables shown here available for SCSS and JS usage in Thumbprint Tokens.
- The “core” colors, as indicated by
(c), are available as classes in Thumbprint Atomic for bothcolorandbackgroundproperties.