Color

13 tokens across brand, neutral, and semantic scales, plus line (border) tokens. Always use a token for its designated purpose — raw HEX values are not allowed. The single source of truth for all values is app/_v2/tokens.css.

Brand

Use primary (blue) only for links, emphasis, and interactive elements — never for heading color (headings use ink-deep). In dark mode, swap primary for sky on links and emphasis.

Primary

--c-primary

#006CB7

Brand primary. Links, emphasis, interaction

Primary Active

--c-primary-active

#338BC9

primary active/hover variant

Dark Blue

--c-dark-blue

#26257C

Brand secondary

Dark Blue Active

--c-dark-blue-active

#3D3CA0

dark-blue variant

Sky

--c-sky

#58C5FF

Dark-background callouts, footer brand name, dark-mode links

Sky Light

--c-sky-light

#CDEAFF

Badge/chip background, gradient end color

Neutral

Neutral colors that establish the visual hierarchy of text and backgrounds. In dark mode, --c-ink-deep (headings) flips to white and --c-canvas (background) inverts to a dark tone.

Ink Deep

--c-ink-deep

#0A1E33

Darkest text (headings) + dark section/footer background

Ink

--c-ink

#1A1B1F

Body ink (used sparingly)

Body

--c-body

#454745

Default body text

Grey

--c-grey

#7B7875

Secondary text, captions

Light Grey

--c-light-grey

#ECF0F3

Subtle surface background, input fill

Canvas

--c-canvas

#FFFFFF

Default page background

Semantic

Colors that communicate state. Positive is reserved exclusively for success; negative is reserved exclusively for error/caution.

Positive

--c-positive

#00A775

Success / positive

Warning

--c-warning

#FAA41A

Warning

Negative

--c-negative

#F16A26

Error / caution (notices, etc.)

Lines (Borders)

Two tiers — hairline (dividers) and outline (inputs, selected cards). Hover uses ink-deep; focus uses primary. On dark backgrounds, use the inverted tokens (--c-line-*-inverted).

Line Soft

--c-line-soft

rgba(10,30,51,.12)

Hairline divider

Line Default

--c-line-default

rgba(10,30,51,.20)

Input / card outline — default

Line Hover

--c-line-hover

var(--c-ink-deep)

Input / card outline — hover

Line Focus

--c-line-focus

var(--c-primary)

Input focus ring