Colour

[v0.2]

A warm off-white paper — never pure white. Near-black ink — never pure black. Six semantic meanings each carried by colour and shape together: colour is never the sole carrier. The brand lives in structure and type, not colour variety.

Colour here is syntax. Each colour signals a specific thing. When it stops signalling something specific, remove it.

Surfaces

#f4f1e9

rgb(244, 241, 233)

paper-default

--xco-paper

Primary page background.

#fffffc

rgb(255, 255, 252)

paper-raised

--xco-paper-raised

Cards, popovers — slightly lighter.

#e9e5dc

rgb(233, 229, 220)

paper-quiet

--xco-paper-quiet

Quiet backgrounds, recessed areas.

#d7d2c8

rgb(215, 210, 200)

paper-structural

--xco-paper-structural

Borders, dividers, structural surfaces.

Ink

#20201e

14.45:1 on paper

ink

--color-xco-ink

Body text, structural lines. Near-black — never #000.

#514f4b

7.23:1 on paper

ink-secondary

--color-xco-ink-muted

Secondary text, labels. Use for hierarchy, not decoration.

#686661

5.08:1 on paper

ink-weak

--xco-ink-weak

Captions, annotations, placeholder text only.

Semantic Meanings

Six meanings, each with two channels: colour and shape. The shape is the primary identifier — colour reinforces but never substitutes. This ensures meaning is accessible regardless of colour vision.

●

#267b61

circle

continuity

--meaning-continuity

Ongoing processes, maintenance, reproduction — what keeps going.

■

#50649f

square

system

--meaning-system

Infrastructure, institutions, platforms — what structures action.

▲

#a0567e

triangle

risk

--meaning-risk

Threats, instabilities, failure modes — what could break.

◆

#8e6713

diamond

agency

--meaning-agency

Actor capacity, leverage points, decision power — who can act.

⬡

#41376d

hexagon

contested

--meaning-contested

Disputed claims, competing narratives, unresolved tensions.

✕

#60221e

cross

critical

--meaning-critical

Failures, urgent flags, decisions requiring immediate attention.

[rule] Always pair colour with its shape. A legend should list both the colour swatch and the shape symbol. Never ask the viewer to distinguish meanings by colour alone.

Diagram Palette

Five tones in two registers. Never mix registers within a single diagram. Pick cool (blueprint) or warm (field) — not both.

Cool — Blueprint

#000064

navy

--color-xco-navy

#005096

ocean

--color-xco-ocean

#0082aa

teal

--color-xco-teal

Warm — Field

#ffa064

sand

--color-xco-sand

#ff5a00

dusk

--color-xco-dusk

The 5% Rule — Dusk

Dusk is the one earned warm accent. It should never exceed ~5% of any surface. When it does, it stops signalling emphasis and starts signalling anxiety.

✓ ~5% — emphasis, not decoration

5% dusk — the active axis on the Frontier dimension

✗ 40% — no longer emphasis, now just noise

too much — dusk becomes wallpaper

Domain Colours

Four orientational tones — for tagging domains, not signalling meanings. A bio-coloured element is not in "risk" or "agency": it is bio. Never use domain colours as semantic signals.

#d56c53

bio

--domain-bio

Biological and ecological systems.

#1f9a91

inst

--domain-inst

Institutional and governance contexts.

#7375b7

tech

--domain-tech

Technology and infrastructure.

#cd6a95

culture

--domain-culture

Cultural and social systems.

Inverse Register

The inverse register swaps paper and ink: dark ground (#20201e) with warm ink (#f4f1e9). It exists as a reader preference (dark mode) and as an authored choice for high-contrast sections using data-register="inverse".

Semantic meanings and domain colours are fixed — they do not swap in either register. Only the surface tokens (paper, paper-raised, paper-quiet) and ink tokens invert.

paper: #20201e — ink: #f4f1e9

Same type system. Same semantic colours. Inverted ground.