Two meanings, one primitive: hue says which lane, saturation says how far.

Hue = lane, permanently. Blue is The Leader (executive product leadership), teal is The Expert (productized consulting), purple is The Builder (active venture building). A hue never decorates, never signals status, never means “accent”. The primary brand blue is the wordmark colour, and it is the same value as the mark’s mid-blue facet — the primary brand colour and the Leader lane’s core colour are one colour.

Saturation = maturity, orthogonally. Each lane has exactly four steps, named for what the maturity means: 01 signal — early, unproven; 02 pilot — in motion, not yet evidenced; 03 receipt — evidence exists; 04 proven — hardened, repeatable. One ladder renders receipt confidence, engagement stage, concept-lab lineage and funnel position. The logo natively supplies three facets per lobe and the lobes are not parallel (blue has no pale tint), so the ladders are normalised to four shared lightness targets; the ramps below are anchored on the measured facets, and the wordmark blue is exact.

The three lane ladders

Swatches are facet fills — what a tab’s saturation slot looks like at each step. Toggle the theme to see the same ladder re-mapped for dark; the table under each lane publishes the computed ratios.

Contrast, light theme — every step, computed (WCAG 2.1)

Grounds: paper (the light ground) and ink (the dark ground / light-theme text colour). Ratios computed, not estimated. “Body” = AA at body size (≥4.5:1). Hex values live in tokens.css — by rule, nowhere else.

Contrast, dark theme — the ladder inverted

The measurement is blunt: on the ink ground, the light theme’s deep “proven” facets collapse to 1.45–2.60:1 — the most mature step becomes the least visible, which is semantically backwards. So dark re-maps the ladder’s direction: step 04 becomes the lightest tint, step 01 the deepest fill. Hue never changes; a Leader tab is blue in both themes. These are the dark token values’ computed ratios against the dark ground:

Forbidden — these fail and must not ship

• Body text in any 01 step, and in light-theme --pa-teal-2 (2.46:1) or --pa-purple-1 (2.44:1) — all below AA on paper. Fills only.
• The exact logo teal mid (--pa-teal-logo-mid) for text — 3.66:1 on paper. Kept as a fill-only token for brand-fidelity surfaces; the Expert lane’s text teal is darkened to --pa-teal-3 (4.59:1). This asymmetry is deliberate: step 02 is not a text colour in every lane.
• White text on any 01/02 fill — 1.48:1 to 2.57:1. Filled selected states use the body-rated steps with --pa-on-facet, which is computed per theme.
• --pa-ink-faint for body copy — 4.40:1 on paper. Large display text and decorative metadata only.
• The light ladder’s direction on a dark ground. Deep facets there run 1.45–2.60:1. The dark token block exists precisely so no one re-maps by hand.
• A 1px box around a tab. The mark separates its facets with bare ground — 4–5% gaps, no strokes. Tabs are separated by ground and surface steps, never by borders. Rules and hairlines are reserved for structural dividers: section boundaries, table rows, list rows.

Neutrals

Paper ground, white tab planes, a warm recessed step, hairlines for structure only, and a two-step ink ramp. Light theme: ink 18.38:1 and muted ink 6.58:1 on paper. Dark theme: ink 16.20:1 and muted ink 8.37:1 on the ink ground. Elevation exists only in the light theme; dark separates by surface steps, never by shadow.

Scale, line-heights, measure

Rules that keep the voice: headlines in Montserrat 600, never faux-bolded serif; eyebrows always mono, uppercase, 0.12–0.14em tracking; numerals in receipts are display-face at h2 size or larger; serif italic is for the limit and the sub-line, the two places the copy admits something.

• Base unit 8px. The scale runs 4 · 8 · 16 · 24 · 32 · 48 · 64 · 96 · 128 and nothing lands off it. The 4px half-step exists for chip interiors only.
• Sections breathe 96px top and bottom on desktop, 64px at or below 768px — never less, and sections are separated by that whitespace or a 1px structural hairline, not crowded by both plus colour.
• Tabs separate by ground gaps: 16px minimum, 24px default — the mark’s own 4–5% gap rule, applied to the grid.
• Shell 1120px max content width, 24px page gutters. Prose measures 66ch, ledes 52ch, hero headlines 18ch.
• Card interiors 24px, hero surfaces 32px.
• Radii: tab planes 10px, facet chips 2px (near-square, machined), pills fully round. Nothing else is rounded.
• Elevation is a light-theme device only — one soft tab shadow, one hover lift. Dark theme separates by surface steps and never casts a shadow.

Anatomy

• The plane — a surface-coloured body, 10px radius, one soft shadow in the light theme. It never has a border; the ground gap around it does the separating.
• The facet — a solid block in a lane hue at a maturity step. This is the only place saturated colour lives on a tab. Position is a layout choice (top strip, left strip, dot); the colour pair it carries is the content’s metadata: which lane, how mature.
• The gap — tabs never touch. Ground shows between them, 16–24px, exactly as the mark’s facets are separated by bare background.

States

• Default — plane plus facet at its content’s true step.
• Hover — lifts 2px and deepens its shadow (light theme only). Nothing re-colours on hover: the facet states a fact about the content, and facts don’t hover.
• Focus-visible — a 2px ring in the tab’s own facet hue, offset 2px. This is the one sanctioned outline, and it exists for keyboard users, not decoration.
• Selected (filters, toggles) — the facet floods the plane; text flips to --pa-on-facet, which is computed per theme (white on the mid steps in light, ink on the tints in dark). Only body-rated steps may flood.
• Disabled — surface-2 plane, muted text, no shadow, no facet.

How the ladder maps to content

• Receipt confidence — low → 01, medium → 02, medium-high → 03, high → 04. The receipt below is medium-high, so its facet sits at step 03.
• Engagement stage — Signal → 01, Filter → 01, Pilot → 02, Receipts → 03, Harden → 04, Venture → 04. Six stages on four steps: the ladder stays at four, and adjacent stages may share a step.
• Concept-lab lineage — v1 → 01, v2 → 02, v3 → 03. Step 04 is reserved for a concept that ships.
• Funnel position — prospect → 01, qualified → 02, engaged → 03, client → 04.

The four applied variants, live

Buttons — the hero CTA pair

Primary commits in brand blue with white text (6.52:1, computed). Ghost stays quiet on the surface; its thin outline is a button affordance, not a tab border, and it thickens to brand blue on hover. Three-line headline, one emphasised line, primary plus ghost — the shape is fixed.

At-a-glance colophon

Persistent summary, placed beside the hero headline — kimi-k3’s card, glm-5.2’s words. Keys are mono and muted; values are serif; the sub-line is where the card admits nuance.

Lane rows

Number, facet, name, one-line duty, arrow — separated by structural hairlines. Hover nudges the row 8px right and asks nothing else of the colour system.

Filter control

A pill track of tabs. Selected floods with its facet hue and flips text to --pa-on-facet; unselected stays quiet. Try it — it is keyboard-operable.

Section header, receipt card, footer

Every section header on this page is the section-header component: a mono eyebrow (Sec. 04 · The tab primitive, number in the section’s facet hue), a Montserrat headline, a muted serif lede. The receipt card is proven in Sec. 04 with real numbers and a real limit. The footer is at the bottom of this page: wordmark, mono metadata, one hairline.

1. Motion answers interaction only. Hover lifts a tab 2px and deepens its shadow; a lane row nudges 8px; a filter floods on selection. 160–200ms, one ease (cubic-bezier(0.16, 1, 0.3, 1)), then stillness.
2. One cheap property at a time — transform or shadow, never layout, never colour cycling. Facets state facts; facts don’t animate.
3. Nothing ambient. No autoplay, no loops, no parallax, no pulse on the status dot. Under prefers-reduced-motion: reduce every transition and animation in the system is off.

• WCAG 2.1 AA. Every text/ground combination on this site comes from the published tables in Sec. 01 — body ≥ 4.5:1, large text ≥ 3:1, and the forbidden list is part of the system, not a hope.
• Focus is always visible — a 2px ring in the element’s facet hue, offset 2px, on every link, button and filter. Tab order follows the document; the filter is a native button group; the theme toggle is a button with aria-pressed. A skip link is the first element in the tab order.
• Contrast survives the theme switch because text colours are semantic tokens and the dark block re-maps the ladder — no component hard-codes a step.
• Reduced motion honoured globally, as stated in Sec. 06.

Light is canonical. Dark is complete. Three rules keep it that way:

1. Every colour is a token on bare :root, defined once in tokens.css. Components and pages consume var(--pa-*) and nothing else.
2. Dark redefines only the token block, twice: under @media (prefers-color-scheme: dark) guarded by :root:not([data-theme="light"]), and again under :root[data-theme="dark"]. A manual toggle therefore wins in both directions and is persisted to localStorage. Try the toggle in the masthead — this page re-themes entirely from the token block.
3. The build gate greps. Any hex literal or colour function found outside tokens.css fails the build. That single constraint is what keeps the toggle a non-event.

What changes in dark, by design: ground and ink swap, surface steps replace shadows, and the maturity ladder inverts its direction — step 04 runs to the light tint, because the deep facets measure 1.45–2.60:1 on the dark ground. What never changes: hue. A Leader tab is blue in both themes; only the saturation direction re-points.