Thumbprint logo

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-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)

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 both color and background properties.