Corvus — Primitives · Structural Color

utilities

.wrap

Contract: content-width container: max-width:1500px, fluid inline padding.
When to use: every full-bleed section’s inner column.
Tokens: layout only (no color tokens).

specimen · compositional

the content column — max-width 1500, fluid inline padding

→ tokens

brand.css §.wrap·PRIMITIVE-INDEX.md §.wrap

.mono

Contract: Space Mono font utility.
When to use: inline metadata/system-voice runs where a structural primitive (.folio, .chip, .cap) is too much.
Tokens: font family only (no color tokens).

specimen · compositional

the system voice — Space Mono, letterspaced metadata

→ tokens

brand.css §.mono·PRIMITIVE-INDEX.md §.mono

.ring

Contract: the gradient-ring: a 1px --ramp hairline that follows border-radius via mask-composite ::before; host must be positioned + radius’d.
When to use: the rationed gradient edge on panels and the primary button. Composes (.panel.ring, .btn.ring); never a fill.
Tokens: --ramp.

specimen · compositional (on .panel)

RING

The gradient edge

a 1px ramp hairline that follows the radius — the rationed gradient moment.

→ the ramp is rationed · tokens

brand.css §.ring·PRIMITIVE-INDEX.md §.ring

chrome

.rail

Contract: fixed top interference hairline (1.5px, 5-stop linear) with a pointer-following highlight via --rx mask (set by brand.js).
When to use: once per page, first element in <body> (id="rail" for the pointer wiring).
Tokens: --c1 --c2 --c3 --c4 --c5 (the 5-stop hairline); --rx (pointer position, set by brand.js).

specimen · chrome-bounded

one per surface

.rail — the fixed top interference hairline (bounded to this frame)

→ the interference ramp

brand.css §.rail·PRIMITIVE-INDEX.md §.rail

.masthead (+ .bar)

Contract: sticky translucent header (blur + saturate backdrop, hairline bottom border); .bar is the flex row (66px).
When to use: once per page, page header hosting .brandmark + .folio.
Tokens: --ground (translucent backdrop) --hairline (bottom border).

specimen · chrome-bounded

one per surface

.masthead — sticky, translucent, hairline-bottom (bounded)

→ grounds

brand.css §.masthead·PRIMITIVE-INDEX.md §.masthead

.brandmark (+ .glyph)

Contract: masthead chrome: --font-display at 700 as live text, plus the canonical mark at 22px height, masked from mark/corvus-mark.svg with background:currentColor so it takes the wordmark’s own ink and inverts with the theme.
When to use: inside .masthead .bar, leading position. .glyph is an empty, aria-hidden span carrying no inline SVG, because the geometry has exactly one home.
Tokens: --font-display (family); the glyph takes currentColor, i.e. whatever ink .brandmark resolves to. No --c2.

specimen · chrome-bounded

one per surface

Corvus

→ the mark

brand.css §.brandmark·PRIMITIVE-INDEX.md §.brandmark

.folio (+ .tick)

Contract: mono uppercase metadata strip (letterspaced, --muted); .tick lifts one item to --ink. Items collapse ≤640px.
When to use: the masthead’s trailing metadata (edition/system labels) + the theme toggle host.
Tokens: --muted (strip) --ink (.tick).

specimen · chrome-bounded

one per surface

design systemStructural Colorvol. i

→ tokens

brand.css §.folio·PRIMITIVE-INDEX.md §.folio

.toggle (+ .dot)

Contract: the single canonical theme affordance: pill button, mono label, spinning 9px gradient dot (--sb angle animation). brand.js wires #toggle/#toggle-label + the ?theme= deep-link.
When to use: exactly one per surface. The only theme control; do not invent a second affordance.
Tokens: --surface --hairline --muted (rest); --ink --c3 (hover); .dot --c1 --c3 --c5 --sb (spinning gradient).

specimen · chrome-bounded (non-interactive copy)

one per surface

→ one theme affordance

brand.css §.toggle·PRIMITIVE-INDEX.md §.toggle

type

.eyebrow

Contract: Instrument Serif italic intro line (--ink-2) with the section bookmark (30×4px rounded --ramp bar) via ::before.
When to use: above a hero h1; the margin-voice opener.
Tokens: --ink-2 (text) --ramp (bookmark).

specimen · compositional

the margin-voice opener

→ tokens

brand.css §.eyebrow·PRIMITIVE-INDEX.md §.eyebrow

.label

Contract: the section-scoped sibling of .eyebrow (same serif italic + bookmark, tighter margin).
When to use: the kicker inside a section.block before an .h2.
Tokens: --ink-2 (text) --ramp (bookmark).

specimen · compositional

a section kicker

→ tokens

brand.css §.label·PRIMITIVE-INDEX.md §.label

h1 / .h1

Contract: display headline: Bricolage 600, tight tracking, clamp(2.7rem → 6rem), balanced wrap, max 16ch.
When to use: one per page (the hero statement).
Tokens: type scale (inherits --ink from body).

specimen · compositional (.h1, to keep one page h1)

Every shimmer is structure

→ type scale

brand.css §h1, .h1·PRIMITIVE-INDEX.md §h1 / .h1

.h2

Contract: section headline: Bricolage 600, clamp(1.9rem → 3.4rem), max 17ch.
When to use: one per section.block.
Tokens: type scale (inherits --ink from body).

specimen · compositional

Restraint is the material

→ type scale

brand.css §.h2·PRIMITIVE-INDEX.md §.h2

.page-subhead (+ .page-subhead--wide)

Contract: the sub-display heading register: display face 600 at --text-h3, tight tracking, snug leading, --ink, balanced wrap, capped at 30ch (--wide at 40ch), with a --space-5 bottom margin that is the register's spacing half rather than an afterthought.
When to use: a section heading of sentence length, and any heading that must be subordinate in size while staying whatever element the document needs semantically — composed onto an h1 it gives a page a real top-level heading with no display weight. Not .h2 (the section-headline register, one rung up, and a 17ch cap that a sentence overruns); not .panel h3 (the right tier scoped to the wrong place). The 30ch/40ch caps are display BALANCE caps, not reading measures — the empirical 45–75ch reading band does not govern them, which is why they are raw ch rather than folded into --measure-*.
Tokens: --font-display (family) --text-h3 (size) --track-tight --leading-snug --ink (colour) --space-5 (bottom margin).

specimen · compositional

A section heading of sentence length, subordinate in size

The same class on an h1 gives a page a top-level heading with no display weight.

→ the type ladder

brand.css §.page-subhead·PRIMITIVE-INDEX.md §.page-subhead

.shimmer

Contract: the animated text-clip: --ramp-loop background-clip text, 9s --sa rotation, italic.
When to use: ONE word per page (the rationed text-clip moment — BRAND.md gradient language).
Tokens: --ramp-loop --sa.

specimen · compositional

Every shimmer is structure

→ the ramp is rationed · gradient language

brand.css §.shimmer·PRIMITIVE-INDEX.md §.shimmer

.lede

Contract: intro paragraph: --text-lede (1.62rem) --muted, max --measure-lede (46ch); b/strong children read --ink at 500 from the foundation b,strong rule, not from a .lede selector.
When to use: directly under the hero h1; a compressed thesis, not a second hero (seventy words at 1.62rem in a 46ch column is ~fourteen lines of large muted type).
Tokens: --space-6 (top margin) --measure-lede (cap) --muted (text) --text-lede (size); --ink on b/strong from the foundation rule, not authored here.

specimen · compositional

A raven’s feather holds no pigment. The color is in how the thing is made.

→ tokens

brand.css §.lede·PRIMITIVE-INDEX.md §.lede

.page-prose (+ p, li children)

Contract: the running-prose register: a flex column (--space-4 gap) whose paragraphs and list rows read at --text-body / --leading-relaxed / --ink-2, each capped at --measure-prose. * + .page-prose supplies the top margin so a prose block composed after anything spaces itself, and scopes it to non-first position so prose that OPENS a container stays flush against the container's own padding.
When to use: any multi-paragraph body, and especially inside a .panel, where .panel p is --muted at body size with no leading token and no cap — right for a twenty-word feature card, wrong for a multi-paragraph argument. It was also the local answer to the inherited-body-size finding, back when body floored at clamp(15px,1.05vw,17px); T13 closed that at the foundation on 2026-08-20, so body now inherits --text-body itself and composing this primitive is about the register — column gap, cap, --ink-2, prose leading — rather than about rescuing the size. Not .lede (the compressed thesis under a hero, one size up and --muted).
Tokens: --measure-prose (cap, on the block and on each child) --space-4 (column gap + top margin) --font-text --text-body --leading-relaxed --ink-2.

specimen · compositional

The running-prose register reads at body size in the lifted secondary ink, capped at the prose measure.

A second paragraph shows the column gap, which is the register’s own spacing rather than the container’s.

→ measure tier

brand.css §.page-prose·PRIMITIVE-INDEX.md §.page-prose

.chip (+ i)

Contract: mono pill annotation (hairline border, radius 100) with the 6px --c5 status dot (i child).
When to use: build-note / status metadata moments ("built 2026 · html + css").
Tokens: --muted (text) --hairline (border) --c5 (dot).

specimen · compositional

built 2026 · html + css

→ tokens

brand.css §.chip·PRIMITIVE-INDEX.md §.chip

.cap

Contract: absolute bottom-right mono caption (uppercase, letterspaced, --muted); hidden ≤900px.
When to use: the hero’s technical footnote (the drawing-set caption voice).
Tokens: --muted.

specimen · compositional (bounded so the absolute caption resolves; hidden ≤900px by design)

node-field → raven
structure interfering with light

.cap pins bottom-right of its positioned frame

→ tokens

brand.css §.cap·PRIMITIVE-INDEX.md §.cap

.pull (+ b)

Contract: a short excerpt at display scale in the serif-italic accent voice: --font-accent + font-style:italic, capped at 26ch, --leading-snug, text-wrap:balance. b children take ink, never weight.
When to use: a closing or opening voice line the reader should stop on; at most once per section. Not a heading (a heading is .h2), not an intro paragraph (that is .lede), not a quotation apparatus — this is the surface speaking in its own voice.
Tokens: --font-accent (family) --ink (b); --leading-snug (leading).

specimen · compositional

Black, until you catch the light — and the catching is structural.

The accent face ships one master, so the emphasis above is an ink step, not a weight step. A serif italic smeared to fake a bold is the failure this replaced.

→ type scale

brand.css §.pull·PRIMITIVE-INDEX.md §.pull

layout

section.block (.block)

Contract: section frame: fluid block padding + hairline top border.
When to use: every content section below the hero.
Tokens: --hairline (top border).

specimen · compositional (self-referential; bounded)

section.block — fluid block padding + a hairline top border

→ section rhythm

brand.css §section.block·PRIMITIVE-INDEX.md §section.block

.grid

Contract: 3-column panel grid (fluid gap; 1-column ≤760px).
When to use: the principles/panels band; hosts .panel children.
Tokens: layout only (no color tokens).

specimen · compositional

01

One

three columns, fluid gap.

02

Two

collapses to one column ≤760px.

03

Three

hosts .panel children.

→ spacing

brand.css §.grid·PRIMITIVE-INDEX.md §.grid

.rail-note (+ .rd, p) — the note register

Contract: one dated, commit-style aside in the identity’s mono margin voice. .rd = its dated head with a 16×3px ramp tick. The note carries its own register — family + size + voice-color — so it is a register, not a grid child.
When to use: usable standalone, anywhere a margin-voice aside is wanted: inside a .panel, a card, a pr-figure. No .mono hand-patch needed, and none should be added. Inside .railed/.rail-col it behaves exactly as before.
Tokens: --text-mono (size) --muted (voice color, p) --ink-2 (.rd) --ramp (.rd tick).

specimen · compositional

01

Standalone, inside a panel

The register travels with the atom. Leading is inherited, deliberately — it answers to measure, which belongs to the layout.

2026·07·28

no .mono hand-patch — the note carries its own family

→ the structural signature

brand.css §.rail-note·PRIMITIVE-INDEX.md §.rail-note

.railed (+ .rail-col, .rail-main) — the margin-column layout

Contract: the annotation rail — the identity’s structural signature: the grid that hosts notes as a 210px right-aligned bordered column ≥1000px, stacking inline below. Layout only; it supplies leading and right-alignment to the notes it contains, never their voice.
When to use: any section where asides/decisions/dates should ride the margin like a drawing set’s notes column. Hosting notes is its job; a note that only needs the voice wants .rail-note alone.
Tokens: --muted (.rail-col) --hairline (≥1000px column border); layout otherwise.

specimen · compositional

2026·07·11

ramp → adjacent radials

note

nothing floats — inset + hairline

The rail runs down the margin like a drawing set’s notes column — timestamps and asides beside the content they annotate, in the engineer’s hand.

→ the structural signature

brand.css §.railed·PRIMITIVE-INDEX.md §.railed

.splitter (+ .splitter--h, state .is-dragging) — the resizable boundary

Contract: a drag-to-resize handle between two adjacent regions. One mechanism, two orientations: the default is a vertical handle resizing the inline axis; --h is a horizontal handle resizing the block axis. The paint is 5px and the grab target is 11px (a ::after bleed either side), because a 5px handle is otherwise a 5px target. Behaviour is splitter.js, which sets role="separator" + aria-orientation + tabindex + a moving aria-valuenow at init — the class alone is a focusable element with no resize behaviour.
When to use: a resizable boundary between two sibling regions in an application shell, or between two stacked sections in one pane. Compose the class and load the script; data-splitter inits, splitter:resize bubbles, el._splitter = { get(), set(px) }.
Tokens: --splitter-w (paint) --splitter-hit (grab bleed) --splitter-step (keyboard increment, read by the script) --ink-faint (resting ground) --rule-hover (hover + dragging) --c2 (focus ring) --stroke-bold/--stroke-hair (ring width + offset) --muted-2 (prefers-contrast: more) --dur-fast/--ease (the colour transition).

specimen · compositional

left region

Drag the handle, or focus it and press ←/→. splitter.js sets role, tabindex and a moving aria-valuenow at init — the class alone would render a focusable separator that does nothing.

brand.css §.splitter·PRIMITIVE-INDEX.md §.splitter

.collapsible (+ .collapsible-label, state [data-railed="true"]) — collapse to a rail, never to zero

Contract: a pane that narrows to a rail rather than closing. [data-railed="true"] clamps min- and max-width to --collapsible-rail-w — clamped, not set, because width: loses to the inline width a .splitter writes, so the rail would silently never engage while passing every check that reads the rule rather than the box. .collapsible-label inside a railed pane is visually hidden and stays in the accessibility tree (clip-path + a 1px box).
When to use: any pane whose contents must stay reachable when it is narrowed: Obsidian's left-pane behaviour. Compose it on the pane; whatever chrome lives inside re-orients on its own terms.
Tokens: --collapsible-rail-w (the clamped width) --dur-base/--ease (the width transition); layout otherwise, and no colour of its own.

specimen · compositional

Way-finding

Railed. The pane is clamped to --collapsible-rail-w — never to zero, because a pane that collapses to nothing has been closed, and everything inside it is gone with no affordance to bring it back. The label is still in the accessibility tree, so the control it names keeps announcing itself.

brand.css §.collapsible·PRIMITIVE-INDEX.md §.collapsible

presentation

.stat (+ .stat-value, .stat-label, .stat-note; set: .stat-row)

Contract: a quantity set as a quantity: .stat-value rides --font-display at --text-display with tabular numerals, .stat-label names what it measures in the mono label voice, .stat-note carries an optional qualifier at --text-small. .stat-row sets two or more side by side on one baseline and pins the tier for its values to --text-h2, so the shared baseline is structural rather than assumed.
When to use: a number that carries an argument. The test is whether the figure is doing persuasive work: 1 in 5 held against your own thesis is a .stat; a version number in a footer is .chip. Not a heading (.h2), not a comparison (.compare — that is alternatives across dimensions, this is one quantity).
Tokens: --font-display (value family) --font-mono (label family) --ink (value) --ink-2 (label) --muted (note) --text-display/--text-h2/--text-mono/--text-small (sizes) --track-display/--track-mono --leading-display/--leading-snug/--leading-body --space-2/--space-8/--space-10/--space-16 --measure-tight (note cap).

specimen · compositional

1 in 5

of the constraint was capacity

the other four-fifths: demand · funding · whether you qualify to bid at all

1,340

works in the collection

17

surfaces on one ramp

→ type scale

brand.css §.stat·PRIMITIVE-INDEX.md §.stat

.compare (+ .compare-head, .compare-axis, .compare-cell, .compare-note)

Contract: two or more alternatives set across the same named dimensions, so the difference is read positionally instead of narrated. A real <table>: .compare-head names each alternative in the display face, .compare-axis names each dimension, .compare-cell holds one alternative’s value for one dimension. table-layout:fixed + width:100% divides the alternative columns equally; rows are separated by a hairline, never a fill.
When to use: a choice between alternatives where the shape of the difference is the point. Not pr-diff — that is before/after against an approved snapshot and its poles are temporal; this is alternatives, and it has no poles. Not .grid (no shared dimensions), not .terms (one offer, not a choice).
Tokens: --font-display (.compare-head family) --ink (heads) --ink-2 (cells) --muted (axis, note) --hairline (row rules) --text-h3/--text-body/--text-small (sizes) --space-4 (cell padding) --measure-prose (.compare-note).

specimen · compositional

	Time & materials	Fixed price
you bill	hours	the deliverable
you work faster	fewer hours to invoice	same deliverable, fewer hours
the gain lands	with the buyer	with you

Neither column is styled as preferred. On a proof surface that is a gated prohibition; off one, a preferred column is legitimate — a pricing table should point at a plan.

→ the assertive register

brand.css §.compare·PRIMITIVE-INDEX.md §.compare

.steps

Contract: an ordered sequence of named moves where the sequence itself is the point: a connecting hairline spine, one .panel per step, order carried structurally rather than by a number written into prose. A layout, in the family of .grid and .railed — it hosts .panel children and supplies no voice of its own.
When to use: a set of moves that must be read in order: how a process runs, what happens first. Use .grid when the items are peers in any order — the delta is exactly order + connection, and a sequence read out of order is a different object from a set read in any order.
Tokens: --hairline (spine) --space-1/--space-3/--space-4/--space-5/--space-8/--space-10 (rhythm). No color, no type: the voice belongs to the .panel children.

specimen · compositional

01

Read it cold

Open the surface as the reader it was built for.

02

Name the mechanism

State the failure in one sentence.

03

Fix it upstream

Patch the source and re-emit; never the emission.

→ the assertive register

brand.css §.steps·PRIMITIVE-INDEX.md §.steps

.terms (+ .terms-row, .terms-key, .terms-val)

Contract: a set of term/value pairs stating what is being offered: scope, basis, timing, contingency, what it proves. A real <dl> — keys and values are definitionally paired and the element says so. Keys ride the mono label voice, values ride the reading face at --text-body, one pair per row, scannable without reading.
When to use: the moment a surface states an offer: what it costs, what you get, what happens first. Not .compare (that is a choice between alternatives; this is one offer), not .chip (a pill annotation), not .rail-note (a dated aside).
Tokens: --font-mono (key family) --muted (keys) --ink-2 (values) --hairline (row + edge rules) --text-mono/--text-body (sizes) --track-mono --leading-snug --space-1/--space-4/--space-8.

specimen · compositional

scope: WCAG / 508 conformance on one real delivery
basis: paid at rate, up front
contingency: none
bid cycle: none — a distinct service line

→ type scale

brand.css §.terms·PRIMITIVE-INDEX.md §.terms

.warrant

Contract: a mark naming what established the line beside it, at three standings: gate (a check that re-runs) · hand (checked once, by a person, at a recorded date) · asserted (stated, not checked). The standing rides data-standing, so the value set is enumerable and a gate can assert three distinct treatments. Rendered as weight before it is rendered as a word: an ink step plus a tick whose fill is structural, with the standing’s short mono word at --text-micro beside it. The base rule is the invalid state — a .warrant with no recognised standing renders a dashed --warn hole reading no standing declared.
When to use: one per step of a chain of statements the reader must calibrate without interacting: composed into .panel children inside a .steps chain, or beside any line whose basis a reader would otherwise have to take on faith. Not .chip (a pill annotation with a word in it and no ladder), not .stat (a quantity), not .rail-note (a dated aside). On a proof surface a claim’s examined-ness is pr-claim’s data-state and is a different axis — this says how the line was checked, not how thoroughly its opposition was canvassed.
Tokens: --font-mono (family) --text-micro (size) --track-mono --leading-snug --space-2 (tick gap) --space-1 (invalid-state padding) --warn (invalid state, edge + ink) --ink (gate) --ink-2 (hand) --muted (asserted). No --ramp: a per-step mark on a chain is chrome, and the thesis rations the ramp to where it is earned — converging on .steps’s own refusal of a --ramp spine rather than making a new call.

specimen · compositional (one per .panel in a .steps chain)

01

The type scale is modular

Minor third, 18px anchor, every step generated from the ratio.

gate

02

The mark holds at 24px

Head, beak, wing gap and legs all resolve.

hand

03

The light theme is co-equal

A designer who only exists in dark mode is a developer with opinions.

asserted

04

A line nobody stood behind

The standing was never declared — the base rule is the hole.

→ the assertive register

brand.css §.warrant·PRIMITIVE-INDEX.md §.warrant

panels

.transcript

Contract: a block rendering a machine speaking: multi-line output produced by a run, not a source listing. Mono family at --text-mono, snug leading, --track-normal (not --track-mono), one ink (--ink-2) and one weight for every line, an --inset plane inside a --hairline containment edge, white-space:pre so the machine's own line breaks survive, and a typographic OPT-OUT — ligatures off, contextual alternates off, tabular numerals, no hyphenation, no balanced wrapping. Bounded by --measure-prose and a 60vh scroll region with a stable scrollbar gutter.
When to use: once per surface, at or near the terminal step of a chain, where a reader must be able to inspect what a run actually emitted. Not .panel (a bounded content surface that supplies its own voice — putting a transcript inside one is the "reads as authored" failure the contract names); not .mono (an inline metadata run, family only, no register); not .specimen (display words with a hover reveal); not .s-specimen-frame (a frame around a live composition).
Tokens: --font-mono (family) --text-mono (size) --leading-snug --track-normal --ink-2 (the single ink) --inset (plane) --stroke-hair + --hairline (containment edge) --radius-sm --space-4 (padding) --measure-prose (cap). No --c1–--c5, and no --error / --warn / --success — both prohibitions are contract, not omission.

specimen · compositional

$ npm run verify
PASS  theme-parity
FAIL  prose-measure-coverage
      brand.css: reading size + prose leading, no measure cap
$ npm run verify
PASS  prose-measure-coverage

all checks pass

→ the ramp is rationed

brand.css §.transcript·PRIMITIVE-INDEX.md §.transcript

.panel (+ .n, h3, p)

Contract: inset surface card: --surface bg, hairline border, radius 15, inset top-light box-shadow (nothing floats — no drop shadow); hover lifts border toward --c3. .n = mono index label; usually composed with .ring.
When to use: principle/feature cards in .grid. The canonical bounded-content surface.
Tokens: --surface (bg) --hairline (border) --ink (inset top-light) --c3 (hover border) --muted (.n/p); via .ring: --ramp.

specimen · compositional (.panel.ring in a .grid)

01 / STRUCTURE

Color from how it’s made

Iridescence at the edge, the focus, the one word — never the flood.

02 / DEPTH

Nothing floats

Elevation from inset and hairline. The seam catches the light; the box does not glow.

→ nothing floats · grounds

brand.css §.panel·PRIMITIVE-INDEX.md §.panel

specimen

.specimen (+ span[data-w])

Contract: a flex-wrap group of standalone display words (Bricolage 600, clamp 1.5–2.6rem); each span carries a data-w twin that gradient-clips (--ramp) and reveals on hover as the base ink fades to transparent. Decorative hover only — no interactive contract.
When to use: a short run of self-descriptive attribute words (the "attribute-word" content type, ESTABLISHMENT § 1); a compositional specimen — supply the words, reuse the class. Not scaffold-only (unlike .hero/.flight); it is a repeatable content block.
Tokens: --ink (base word) --ramp (data-w hover reveal).

specimen · compositional (hover a word)

Structural. Precise. Warm. Unsentimental. No neon.

→ the ramp is rationed

brand.css §.specimen·PRIMITIVE-INDEX.md §.specimen

actions

.btn (+ .btn-ghost, .btn.ring, .btn-bold)

Contract: button family, Bricolage 600: base = quiet surface + hairline; .btn-ghost = transparent; .btn.ring = the gradient-ring primary (rationed gradient edge); .btn-bold = the ONE loud CTA — --ramp-radial fill, --ground text.
When to use: .btn-bold once per view (BRAND.md: one bold CTA); .btn.ring for the primary action; base/ghost for the rest.
Tokens: base --surface --hairline --ink; hover --c3; .btn.ring --ramp; .btn-bold --ramp-radial --ground.

specimen · compositional

→ the ramp is rationed · tokens

brand.css §.btn·PRIMITIVE-INDEX.md §.btn

.link

Contract: inline link, showcase register: 1.5px --ramp gradient underline that grows to 2.5px on hover; text stays --ink.
When to use: the rationed inline-link moment: a hero or landing surface’s featured reference, at most a few per view. Not the default anchor treatment — bare anchors ride the foundation link floor, and a page of ramp underlines spends the ramp on chrome.
Tokens: --ink (text) --ramp (underline).

specimen · compositional (hover the link)

Inline, read the full case study — the underline is the ramp, and it grows on hover.

→ gradient language

brand.css §.link·PRIMITIVE-INDEX.md §.link

.disclosure

Contract: the control that reaches a statement's supporting material, in one of two behaviours under one announcement convention: expand (the material renders in place) and depart (the material is an inspectable source elsewhere). One class, two hosts (summary | a), zero variants — every rendered property is identical on both by construction, and the behaviours are told apart by the verb, which is content. Mono at --text-mono, weight 400, sentence case or lower, --muted resting and --ink-2 on hover/focus, underlined at --stroke-hair, display:inline, no marker on either host.
When to use: every evidence control on a surface that has more than one, so the convention is stated once and reused identically. The page must be complete at zero interaction; the material reachable by one unambiguous interaction that exists on every device; hover is a pointer-only accelerant and never a level. Not .link (the rationed showcase register — a chain of five announcements is the "page of ramp underlines is chrome" case, and an evidence departure must be distinguishable from an ordinary prose link before it is used, which .link cannot be because it IS the ordinary featured link). Not .chip (a status pill; a rejected register for anything a reader acts on).
Tokens: --font-mono (family) --text-mono (size) --track-mono --leading-snug --muted (resting ink + underline) --ink-2 (hover/focus) --stroke-hair (underline thickness) --dur-slow + --ease (transition). No --ramp.

specimen · compositional (both hosts, one register)

expand the derivation

The material renders in place.

… or depart to the source — same register, different verb.

→ one convention, stated once

brand.css §.disclosure·PRIMITIVE-INDEX.md §.disclosure

Form controls (input, textarea) — the control floor

Contract: the resting register for text entry: --inset plane, --ink entry text, a --muted rule at --stroke-hair, --radius-sm, --font-text at --text-body with relaxed leading, --space-3/--space-4 padding, capped at --measure-prose. Hover moves the rule toward ink (--ink-2). The fault state rides [aria-invalid="true"] and carries three channels, two of them achromatic — the message element's presence, a doubled edge, and only then the --error hue. Autofill is filled back to the authored plane with a zero-offset inset ring.
When to use: automatic; there is no class to compose. A consumer that wants a different control treatment opts out by declaring, exactly as .btn opts out of the link floor. select and the widget input types (checkbox, radio, range, color, file, and the button-like types) are deliberately out of scope — a select's UA internals are not authorable at the level the rest of this floor is, so a half-styled select is worse than an honestly-UA one until someone does that pass. The focus floor does cover select; the difference is real, because focus is fully authorable there.
Tokens: --inset (plane) --ink (entry) --muted (rule + placeholder) --ink-2 (hover rule) --stroke-hair (rule width) --stroke-bold (fault width) --error (fault edge only) --radius-sm --font-text --text-body --leading-relaxed --space-3 --space-4 --measure-prose --dur-slow + --ease.

specimen · compositional (resting, then the fault state)

Resting
Rejected

The message rides --ink; --error carries the boundary only.

→ focus is never removed

brand.css §the control floor·PRIMITIVE-INDEX.md §Form controls

Focus ring (:focus-visible)

Contract: 2px --c2 outline, 2px offset, on every element the user agent judges warrants a focus indicator. Never removed.
When to use: automatic; do not override.
Tokens: --c2 (outline).

specimen · compositional (Tab to a control)

focusable link

→ focus is never removed

brand.css §:focus-visible·PRIMITIVE-INDEX.md §Focus ring

hero

.hero (+ .hero-inner, .hero-copy, .catch)

Contract: full-bleed hero scaffold: ::before = blurred drifting aurora field (color-mix radials, screen/multiply per theme); #field canvas slot (z1) for the generative raven; .catch = conic ramp revealed under a pointer-following mask (--mx/--my, .lit state, wired by brand.js); ::after = readability scrim; .hero-inner/.hero-copy = left-anchored copy column (max 34ch).
When to use: once, as the landing surface’s opening viewport. The one place the ramp is allowed to be atmospheric.
Tokens: --c1 --c2 --c4 (aurora field radials); --c1…--c5 (.catch conic); --ground (::after scrim); --mx/--my (pointer, set by brand.js).

specimen · scaffold-only

hand-authored expression — non-repeatable; reuse the classes, re-author the paths

structural color

The one atmospheric place

The generative raven and the ramp, let loose — the landing viewport, bounded here as a specimen.

→ the ramp is rationed · the live surface

brand.css §.hero·PRIMITIVE-INDEX.md §.hero

flight

.flight (+ .flight-copy, .pathline, .pathM, .node, .pulse, .comet, .chev, .drawn)

Contract: the two-paths-converge SVG motif: dash-drawn .pathlines (exact lengths measured by brand.js), .drawn triggers the draw + delayed merged-path (.pathM), .node/.pulse = the convergence point, .comet = travelling ramp dots, .chev = wing marks. Page markup supplies the SVG paths (pathA/pathB gradients live in the page’s <defs>).
When to use: the partnership/convergence narrative moment. Hand-crafted expression, not a repeatable content block; reuse the classes, re-author the paths.
Tokens: --ink (.node) --muted (.chev); .pathline strokes are page-authored gradients (the --c* ramp via the page’s <defs>); --len (dash length, measured by brand.js).

specimen · scaffold-only

hand-authored expression — non-repeatable; reuse the classes, re-author the paths

→ the live surface

brand.css §.flight·PRIMITIVE-INDEX.md §.flight

motion

.reveal (+ .in, .d1 .d2 .d3)

Contract: scroll-reveal: 18px rise + fade on .in (IntersectionObserver in brand.js); .d1–.d3 stagger delays.
When to use: section content entering the viewport. Reduced-motion freezes everything (brand.css final block) — never gate content behind the animation.
Tokens: --ease (transition curve).

specimen · compositional (scroll it into view)

d0

Rise + fade

enters on .in

d1

Staggered

.d1 delay

d2

Staggered

.d2 delay

→ motion is critically damped

brand.css §.reveal·PRIMITIVE-INDEX.md §.reveal

footer

footer (+ .foot)

Contract: hairline-top footer; .foot = space-between flex row.
When to use: once per page. It commonly hosts a .pull as its closing voice line, but does not own it — .pull is a ## Type primitive usable on any surface (promoted 2026-07-30).
Tokens: --hairline (top border).

specimen · compositional

→ overview

brand.css §footer·PRIMITIVE-INDEX.md §footer