Foundations · Colour

Colour.

Disciplined raw material becomes meaning through semantic tokens. Dark-first, accessible, and precise enough that orange signals without becoming the field.

01

Source

--color-brand-600

#ea580c

02

Meaning

--text-accent

Signal

03

Use

Action · focus · label

Signal, not surface

04

Outcome

5.47:1

AA on the dark field

The field

Depth before colour.

:root is the dark field; .light is its opt-in inverse. Separate layers with semantic surfaces and borders before reaching for another hue.

Field construction

--background: Page background
--foreground: Primary text
--surface: Cards, raised panels
--surface-alt: Secondary surfaces / hover
--text-accent: Accent text (theme-stable)

The raw material

Ramps.

Four complete 50–950 scales. Reach for a raw step only when a semantic token will not do; the square markers identify the documented anchors.

--color-brand-*

Brand

Primary identity — orange. Actions, accents, focus.

50

#fff7f3

100

#ffe8de

200

#ffd1bd

300

#ffb396

400

#ff9163

500

#f97316Identity

600

#ea580cAccent

700

#c94a0a

800

#a63c09

900

#823008

950

#4b1b04

--color-cyan-*

Cyan

Secondary / signal. Used sparingly.

50

#f0fcff

100

#ccf0fe

200

#99e3fc

300

#5fd6f9

400

#2bc4f0Motion bloom

500

#10add9

600

#0891b2

700

#076e8a

800

#05556a

900

#043d4d

950

#021f28

--color-gray-*

Gray

Neutrals — text, surfaces, borders.

50

#f5f7fa

100

#e4e7eb

200

#cbd2d9

300

#9aa5b1

400

#7b8794

500

#616e7c

600

#52606d

700

#3e4c59

800

#323f4b

900

#1f2933

950

#12181f

--color-green-*

Green

Positive / brand green, used sparingly. Success states use the fixed --color-success, not this ramp.

50

#ecfdf5

100

#d1fae5

200

#a7f3d0

300

#6ee7b7

400

#34d399

500

#20b070Positive

600

#10a25e

700

#0e8b50

800

#0b7045

900

#085c3b

950

#022c22

Error

--color-error · #dc2626

Success

--color-success · #16a34a

Warning

--color-warning · #d97706

Status colours are fixed and theme-independent. Positive brand green remains a ramp; success states use --color-success.

The meaning layer

Token refinery.

Follow a value from its source, through a semantic role, into a rendered interface. Dark is canonical; light remains secondary proof.

ExtensionInteractive teaching instrument

Choose a role

01 Source

Direct field value#0A0D12

02 Meaning

--backgroundField

03 Use

Page background

04 Dark output

#0A0D12

Light proof#ffffff

Product engineering

Idea to production, fast.

Consultancy, leadership and engineering.

One accent

Accent restraint.

Orange marks actions, focus, labels and selection—never the field or body copy. One primary action is enough for a view.

ExtensionInteractive proof of the rule

Product engineering

Idea to production, fast.

One accountable team — consultancy, leadership and engineering.

Talk to a founder

orange as an accent — eyebrow, one button, nothing else

Signal lineage

--color-brand-600 → --text-accent

Actions · focus · labels · selection

--color-cyan-400 → --field-bloom

The PatternBackground motion signature only.

--field-dot: Resting dot
--field-glow: Mid-intensity glow
--field-bloom: Peak bloom (cyan)

The numbers

Contrast (AA).

Every colour decision has a measurable consequence. The accent clears AA on the dark field but reaches AA-large only on white.

ExtensionLive checker using the running theme tokens

We assemble one accountable team — consultancy, leadership and engineering — so scaling companies ship.

18.13: 1AA passAAA pass

ink

ground

--foreground on --background

Canonical pairings.

Ratios are computed from the documented token values. Text carries every verdict; colour only reinforces it.

--foreground on --background: Body & headings on the dark field18.13:1 · AAA
--muted-foreground on --background: Secondary text7.78:1 · AAA
--muted on --background: Muted UI5.31:1 · AA
--text-accent on --background: Accent on dark — clears AA5.47:1 · AA
--text-accent on --background (light): Accent on white — AA large only, never body3.56:1 · AA large

Guardrails

See the consequence.

Three failures, each resolved by returning to meaning, contrast and restraint.

01 / 03

Signal, not surface.

Incorrect

The accent becomes the environment and body contrast collapses.

Correct

Product engineering

Idea to production, fast.

Talk to a founder

The field stays neutral; orange marks one deliberate action.

02 / 03

Meaning, not a literal.

Incorrect

.panel {background: #1f2933;}

A raw value cannot follow the active theme or communicate intent.

Correct

.panel {background: var(--surface);}

The semantic alias keeps the component tied to its role.

03 / 03

Readable, not merely branded.

Incorrect

Accent body copy on white reaches AA-large only.

Correct

Product engineering

One accountable team, assembled to move from idea to production.

Foreground carries prose; accent remains a short label.

The operating model

Use semantic tokens first. Reach for ramps deliberately. Keep orange precise.