Brand colors

The three identity colors. They brand moments — never generic component fills.

--brand-white

Light brand identity.

--brand-black

Dark brand identity.

--brand-dark-grey

Soft dark brand identity.

Page backgrounds

The three structural page colors. A product chooses one — the page canvas is never painted by components.

--background-white

Light page background.

--background-dark

Dark grey page background.

--background-black

Black page background.

Component background steps

Four separation steps for component fills — from resting to strongest.

--component-background-1

Resting component background.

--component-background-2

Secondary background.

--component-background-3

Stronger separation.

--component-background-4

Strongest component background.

Semantic surfaces

The theme-aware surface roles components actually consume. Dark theme remaps their values; the names never change.

--page-background

The canvas behind every frame.

--section-background

Section surface — the page's top band.

--component-background

The elevated component fill.

--nested-background

Content nested inside another component.

--recessed-background

Wells and inputs below the surface.

Functional colors

The raw functional pairs. The light steps carry filled pills with dark ink; the base steps carry text, borders and subtle tints.

--red-base

Functional red, base.

--red-light

Lighter red — danger pill fill.

--green-base

Functional green, base.

--green-light

Lighter green — success pill fill.

--amber-base

Functional amber — warning pill fill.

--blue-base

Functional blue, base.

--blue-light

Lighter blue — info pill fill.

Meaning colors

Semantic names carry status and feedback. Use them only when the meaning is present — never as decoration. The Badge consumes the same pair live.

Overdue

--danger

Base for fills and status text; the subtle mix tints backgrounds; --danger-border edges the same components.

Risk or destructive outcome.

Completed

--success

Base for fills and status text; the subtle mix tints backgrounds; --success-border edges the same components.

Positive outcome.

Awaiting signature

--warning

Base for fills and status text; the subtle mix tints backgrounds; --warning-border edges the same components.

Needs attention.

In review

--info

Base for fills and status text; the subtle mix tints backgrounds; --info-border edges the same components.