Foundations

Colors

Every colour token, with what it's for. Use them through Tailwind, e.g. bg-brand, text-ink-subtle or border-stroke-muted.

Text

Ink for text and icons on white and light fills.

ink

#101828

Text/Base, Icon/Neutral

ink-muted

#98a2b3

Placeholders and decorative mockups only: too faint (2.6:1) for text people need to read

ink-subtle

#667085

Secondary text: descriptions, captions, labels

ink-disabled

#d0d5dd

Text/Disabled — struck-through "old way" copy

Surfaces and strokes

The page is white; these tint sections, tiles and soft buttons, and draw borders and dividers.

fill-weak

#f2f4f7

Fill/Weak — icon tiles

fill-weaker

#f6f6f8

Fill/Weaker — soft buttons, grey page sections

stroke-muted

#eaecf0

Stroke/Muted — dividers, panel borders

stroke-base

#d0d5dd

Stroke/Base — card outlines over busy imagery

fill-strong

#344054

Fill/Strong

canvas

#f9fafb

Tinted sections and inset tiles (the page itself is white)

Brand

Yellow leads; navy is the secondary brand colour. Tints get lighter from -weak to -weaker.

brand

#f9eb2d

Fill/Brand strong

brand-weak

#fcf4a3

Sales panel and badge; hover on a selected menu row

brand-weaker

#fffbd6

Selected row in a single-select menu

brand-navy

#051f42

Logo, Operations icon tiles, form focus. Not for text: text is ink

brand-navy-weak

#e3e9f1

Operations panel and badge

Illustration

For the animated illustrations and product labels only, never for UI states.

ice-blue

#b8d1ff

trade-orange

#ffaf5f

lilac

#e4a5ff

electric-lime

#e6fe46

periwinkle

#b4b0f9

fresh-lime

#adff5f

Shades

Translucent black for text and icons on any brand or illustration colour: it reads as a darker version of what's beneath. Both pass WCAG AA on every colour above.

shade

rgb(0 0 0 / 0.7)

Body text

shade-muted

rgb(0 0 0 / 0.6)

Eyebrows, icons

Status

Success for wins, inclusions and uplift; error for validation and failures.

success

#579550

Uplift stats and "available" dots

success-weak

#ecf4e6

Backgrounds for wins and inclusions: badges, savings, success banners

success-strong

#3b6e35

Text and icons on success-weak — "Free", "Included", "Job won"

error

#f04438

Validation borders, icons and messages

error-weak

#fef3f2

Error banner background

error-strong

#912018

Error banner text

error-on-dark

#ffc9c4

Validation message over dark photos (hero)

Overlays

Washes over photos; use with opacity.

scrim

#020810

Image overlays — use with opacity, e.g. bg-scrim/50

haze

#d2d2d2

Soft wash over photos — use with opacity, e.g. bg-haze/20