Guidelines
A simple system for interfaces and illustrations.
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).
(c)
, and help establish our brand.blue-100
blue-200
blue
(c)
blue-600
indigo-100
indigo-200
indigo
(c)
indigo-600
purple-100
purple-200
purple
(c)
purple-600
green-100
green-200
green
(c)
green-600
yellow-100
yellow-200
yellow
(c)
yellow-600
red-100
red-200
red
(c)
red-600
black-300
(c)
black
(c)
gray-200
(c)
gray-300
(c)
gray
(c)
white
(c)
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
(c)
, are available as classes in Thumbprint Atomic for both color
and background
properties.