Colour · Lenz

Design system

Primary

--fg at N% over the current surface. Alpha, so it composites with whatever is beneath.

--primary-2

--primary-4

--primary-8

--primary-12

--primary-24

--primary-44

--primary-60

--primary-80

--primary-100

Primary, flattened

The same ladder pre-composited over --bg. For stacked layers, text over imagery, and export.

--primary-solid-2

--primary-solid-4

--primary-solid-8

--primary-solid-12

--primary-solid-24

--primary-solid-44

--primary-solid-60

--primary-solid-80

--primary-solid-100

Secondary

Text and fills for a dark region inside a light page.

Why

Ink for an inverted region while the theme root stays light — a dark hero, an image overlay. Shown on --primary-100 for that reason: on the page ground it is white on white, and inside .dark it is black on black.

--secondary-4

--secondary-12

--secondary-44

--secondary-60

--secondary-80

--secondary-100

Brand

Sky blue, used as an accent and never for body text.

Why

Aside's sky-500 anchored at 500, ramp derived in OKLab. The anchor is 2.71:1 on white — an accent, never text.

--brand-50

--brand-100

--brand-200

--brand-300

--brand-400

--brand-500

--brand-600

--brand-700

--brand-800

--brand-900

Brand roles

--brand-accent is decorative only. Interactive roles sit one to two steps down so they pass AA.

--brand

--brand-accent

--brand-content

--brand-on

Surfaces

The grounds every component sits on, and the lines between them.

--surface

--surface-raised

--surface-sunken

--border

--border-strong

--rule

Ink

Text colours, with their contrast on --surface. Disabled text is exempt from AA by design.

--text

--text-muted

--text-disabled

--brand-content

--danger-content

Danger

--danger marks icons and dots; solid destructive fills use --danger-fill.

--danger

--danger-fill

--danger-fill-hover

On a danger fill

--danger-on is text on --danger-fill, so it is shown on one.

Delete workspace--danger-on

Status

Dots and icons that mark state. Every status also carries a word.

--status-idle

--status-progress

--status-done

--status-warning

--status-danger

--status-danger-solid

Notes

Each tone is a tint, a border and a text colour, contrast-checked against its own tint.

Info note text

--note-info-*

Warning note text

--note-warning-*

Error note text

--note-error-*

Inversion

The same tokens, re-resolved: a light island inside a dark block inverts on its own.

Why

A .light island inside a .dark block inverts because the ladder is re-declared on each theme root, not defined once on :root.

dark

--primary-8

--primary-44

--primary-100

--surface

--text

light island inside it

--primary-8

--primary-44

--primary-100

--surface

--text