Elements · rendered live
One root. Every surface.
The tokens below are the whole colour, type, gradient, shadow and geometry vocabulary. Three donor systems read them; nothing in a page names a colour. A palette swap edits src/styles/tokens.css and nothing else.
01 · Tokens
Planes, inks, accents.
Two palettes that share a temperature — light and dark are designed, not inverted. Every value is measured against the four contrast rules in PALETTE.md.
Planes
--ground
the page plane · bg-ground
--panel
the raised plane — cards, plates · bg-panel
--band
one step below ground · bg-band
--gate
the dark plane — one per page · bg-gate
Inks and accents
--ink
text, hairline source, the secondary control · text-ink
--run
running text · text-run
--accent
the brand: fills, marks · bg-accent
--accent-deep
the text-safe accent: kickers, links · text-accent-deep
--warm
the second accent: glow, stars, highlights · bg-warm
--hair
hairline (ink 12%) · border-hair
--hair-2
rule (ink 26%) · border-hair-2
Kept sets
Two earlier palettes survive under renamed tokens — --legacy-* (the previous cool-blue set) and --donor-* (walnut/stone). Nothing reads them by default; map one onto the live set to go back.
--legacy-*
--donor-*
Series
Six categorical colours at matched lightness for charts, numbered marks and chips. One and two are the accent and the warm; the rest are solved by hue.
series-1
series-2
series-3
series-4
series-5
series-6
Light
accent/ground 5.04 · accent/band 4.53 · accent-deep/ground 6.13 · ink/ground 16.15 · run/ground 7.84 · accent-ink/accent 5.41
Dark
accent/ground 4.78 · accent/band 4.52 · accent-deep/ground 7.02 · ink/ground 15.05 · run/ground 7.41 · accent-ink/accent 5.02
02 · Type
Three faces. The display face is a token.
Display roles read --display, which the finish points at --serif Playfair Display (satin) or --sans Inter at 600 (matte). --sans carries body copy in both; --mono JetBrains Mono carries labels, data and square controls. All three self-hosted with Cyrillic — see /finishes.
.type-hero — clamp(3rem, 6.2vw, 5.75rem) · 0.96 · −0.04em · 600
Set in one breath
.type-h1 — clamp(2.75rem, 8vw, 6.5rem) · 0.9 · −0.045em · 600
Made slowly
.type-h2 — clamp(2.125rem, 4.6vw, 3.75rem) · 0.96 · −0.035em · 600
Three timbers, no more
.type-h3 — clamp(1.375rem, 2.2vw, 1.875rem) · 1.1 · −0.022em · 500
Signed on the underside
.type-h4 — clamp(1.125rem, 1.5vw, 1.375rem) · 1.2 · −0.015em · 500
Care and repair
.type-lead — clamp(1.0625rem, 1.35vw, 1.375rem) · 1.5 · run
A lead paragraph sets the register for the section beneath it — one or two sentences, never a wall.
.type-body — 1.0625rem · --lh-body · −0.006em · run
Body copy: 17px with a hair of negative tracking, at --lh-body — 1.7 under satin, 1.6 under matte. The base body rule applies the same rhythm site-wide, so all three voices read at one cadence.
.label
Materials — European oak
.kicker
Section kicker
.mono · tabular
W 42 · D 45 · H 78 cm
The contract
.type-hero / -h1 / -h2 / -h3 / -h4any voiceOne h1-scale moment per page. h2 opens a movement; h3 is a plate title.
- Anatomy
- One element, no wrapper. <strong> inside paints --accent-deep.
- Variants
- The scale is the variant; .type-giant is the numeral moment, .type-fade / .type-gradient are treatments
- States
- —
- Tokens
- --display --w-display --track-hero/-h1/-display/-h3/-h4 --lh-hero/-h1/-h2 --ink
- Avoid
- Centring; two hero-scale moments; gradient text longer than one line.
- Accessibility
- The visual scale and the heading level are separate decisions — pick the level by document order.
- Finish
- satin: an editorial serif, near-neutral tracking, a little more line height — it wants short lines and a real break · matte: one sans at 600 and −0.045em, which takes long headlines better.
- Portability
- System-bound.
.type-lead / .type-body / .type-smallany voiceAll running copy, in every voice.
- Anatomy
- A paragraph. Pair with .measure so the line length is decided once.
- Variants
- —
- States
- —
- Tokens
- --sans --fs-lead/-body/-small --lh-body --track-body --run --measure
- Avoid
- A display face for body copy; a lead longer than two sentences.
- Accessibility
- Never below --fs-small for sustained reading.
- Finish
- Body stays on the sans in both finishes — the serif is display only.
- Portability
- System-bound.
.label / .kicker / .caption / .monoany voiceThe mono thread that stitches the three voices together — one kicker per movement, a caption pair under a figure.
- Anatomy
- .kicker draws its own rule via ::before (--bare removes it). .caption is a flex pair: name left, date or source right.
- Variants
- .kicker--bare
- States
- —
- Tokens
- --mono --fs-label --fs-micro --track-label --accent-deep --run
- Avoid
- Sentence case; a kicker that repeats the heading; mono for running text.
- Accessibility
- Uppercase mono at --fs-micro is near the floor — keep it to two or three words.
- Finish
- Unchanged: the mono caption voice is what keeps satin from going soft and matte from going cold.
- Portability
- System-bound.
03 · Controls
One button. Fill by variant, shape by voice.
Primary is the brand, lacquered: lighter at the top edge, true colour through the middle, deepening toward ink. Secondary is the ink slab. Square is the atelier voice; round is chrome and product.
round · chrome and product
chips
PillAccentWarm
badges
NeutralPrimaryAccentWarmOutline
switch · marked gap
gap
boxed input · chrome
Required
underlined field · atelier
The contract
.btnany voiceEvery control on the site. One primary per movement; voice="square" inside an A section.
- Anatomy
- One <a> or <button>. An inline SVG child is sized to 1rem automatically. The hover wipe is a ::before at z-index −1, so the element needs its own stacking context (it has isolation: isolate).
- Variants
- VOICE: bare = F (sans, sentence case, --r-1) · --square = A (mono, uppercase, --r-0) · --pill. FILL: --primary (accent, the page’s ask) · --secondary (ink) · --warm · --outline · --soft · --ghost · --link. TREATMENT: --gradient · --glass. SIZE: --sm --lg --block --icon.
- States
- :hover · :focus-visible (2px accent outline, 2px offset) · :disabled and [aria-disabled] at 0.45 · .is-loading
- Tokens
- --grad-lacquer-accent/-ink/-warm --accent-ink --warm-ink --r-0/-1/-pill --mono --shadow-inset-top --shadow-1 --shadow-glow
- Avoid
- Two equal-weight controls in a coda; a third control in a hero; a treatment variant more than once a page.
- Accessibility
- A control that only shows an icon needs an accessible name. Never remove the focus outline; --link still needs a focus ring.
- Finish
- satin: --r-1 is 0.5rem and the lacquer sits on a dusty accent, so the primary reads warm rather than loud · matte: tighter radius, a saturated accent, more contrast against the ground.
- Portability
- System-bound; the label is topic-bound.
- Trap
- .btn-group is a SEGMENTED control — it joins the radii of its children and does not wrap. A plain row of separate controls is a flex-wrap div, not a btn-group.
.link / .link--monoany voiceInline links in running copy; the quiet third action.
- Anatomy
- An inline <a>. The underline is drawn from the text colour.
- Variants
- --mono for the caption voice
- States
- :hover · :focus-visible
- Tokens
- --accent-deep --hair-2 --mono
- Avoid
- A link where the movement needs a control; colour as the only link signal.
- Accessibility
- Keep the underline. --accent-deep, not --accent, is the text-safe step.
- Finish
- Unchanged.
- Portability
- System-bound.
.chip / .badgeany voiceA chip for a filter or a tag; a badge for a state that actually exists, or a plan label.
- Anatomy
- A short inline element. .badge--dot prepends a dot from currentColor.
- Variants
- chip: --accent --warm --pill --on (selected) · badge: --primary --accent --warm --outline --ok --warn --bad --info --dot
- States
- chip --on is the selected state
- Tokens
- --wash --wash-warm --wash-ok/-warn/-bad/-info --accent-deep --r-pill --mono
- Avoid
- State colours as decoration; more than one badge per row; a chip that is really a control.
- Accessibility
- A selectable chip is a button or an input — --on is a visual state, not a semantic one (add aria-pressed).
- Finish
- satin: the washes carry more accent, so chips read as tinted rather than outlined.
- Portability
- System-bound.
.switch / .tabs / .mode-toggleF · ChromeTwo to four peer views; monthly/annual pricing.
- Anatomy
- .tabs > .tabs__tab (one aria-selected); .switch is a two-state control; .mode-toggle is the light/dark control.
- Variants
- .tabs--segment (filled segments) vs the default underline
- States
- selected · :hover · :focus-visible
- Tokens
- --accent --wash --hair --r-1 --r-pill --dur-2
- Avoid
- Tabs that hide content a reader needs at once; more than four.
- Accessibility
- role="tablist"/"tab" with aria-selected, or real radio inputs — the classes style, they do not announce.
- Finish
- Unchanged.
- Portability
- System-bound.
.field / .field-labelA · Atelier editorialForms inside an atelier section — the underline field, no box.
- Anatomy
- .field-label (mono, uppercase) above a bare input with a hairline underline.
- Variants
- —
- States
- :focus · :disabled
- Tokens
- --mono --hair --hair-2 --accent --r-0
- Avoid
- Mixing with .input in one form; placeholder text as the label.
- Accessibility
- The label is a real <label for>; placeholder is never the label.
- Finish
- Unchanged — the A voice keeps its square geometry in both finishes.
- Portability
- System-bound.
.inputF · ChromeChrome and product forms; the contact hero’s evidence column.
- Anatomy
- .input wrapper > .input__label + .input__field + optional .input__icon and .input__helper.
- Variants
- --icon-lead · --icon-trail
- States
- :focus-within ring · error via .input__helper colour · :disabled
- Tokens
- --panel --hair --hair-2 --accent --shadow-ring --r-1
- Avoid
- More required fields than the ask deserves — email alone converts.
- Accessibility
- Label bound with for/id; the helper is the error message and needs aria-describedby.
- Finish
- satin: softer radius and a warmer panel make a form read as a note rather than a record.
- Portability
- System-bound.
04 · Surfaces
Plates, frames, gradients, shadows.
One plate recipe — panel plane, hairline, one shadow step — with the radius set by voice. Shadows tint toward ink so they sit on a coloured ground; the glow is the accent blooming under a control.
.plate--square
Atelier · r-0
.plate
Chrome · r-2
.plate--round --lift
Product · r-3
.plate--sunk
Band plane
.plate--float
shadow-3
.plate--glow
accent bloom
.plate--sheen
top-edge highlight
.gate
tokens remap locally
.frame — browser chrome around any evidence. Hairline-grey dots, mono URL, r-3, shadow-2.
Gradients
--grad-lacquer-accent
--grad-lacquer-ink
--grad-lacquer-warm
--grad-glow
--grad-glow-warm
--grad-veil
--grad-rule
--grad-progress
Shadows
--shadow-hair
--shadow-1
--shadow-2
--shadow-3
--shadow-glow
Radius
--r-0
--r-1
--r-2
--r-3
--r-pill
The contract
.shellany voiceEvery section that holds copy, so all three voices align on one measure.
- Anatomy
- One per section, directly inside the plane element; sections never nest two.
- Variants
- —
- States
- —
- Tokens
- --shell --gutter
- Avoid
- A second shell inside a shell; a per-section max-width.
- Accessibility
- —
- Finish
- Identical in both — the shell is structure, not surface.
- Portability
- System-bound.
.plane-ground / --band / --panel / --tint / --meshany voiceA plane step is the cheapest seam between two movements of the same voice.
- Anatomy
- Wraps a whole section; the shell goes inside it.
- Variants
- ground = the page · band = one step down · panel = raised · tint = accent-tinted · mesh = a treatment
- States
- —
- Tokens
- --ground --band --panel --tint --grad-mesh
- Avoid
- Two adjacent sections on the same plane with no rule between them; mesh more than once a page.
- Accessibility
- —
- Finish
- satin: tint reads as a soft wash and carries a whole movement · matte: tint is nearly a hairline step, so prefer band.
- Portability
- System-bound.
.gate / .plane-gateany voiceExactly once per page, about two thirds through: the fortissimo.
- Anatomy
- Section wrapper. Remaps ink/run/panel/hair locally, so children need no dark styling. Add dark beside it when chrome blocks inside key off a .dark ancestor.
- Variants
- .plane-gate--lit adds the gradient — a treatment, once per page
- States
- —
- Tokens
- --gate --gate-ink --gate-run --gate-hair --grad-gate
- Avoid
- Twice; next to a dark testimonial; as the first or last thing on a page.
- Accessibility
- Controls inside inherit gate ink — check any hand-set colour against --gate.
- Finish
- satin: a deep cocoa, closer to the page, so the step is a change of temperature · matte: near-black, so the step is a change of value.
- Portability
- System-bound.
.movementA · Atelier editorialEditorial pages, between movements.
- Anatomy
- Vertical rhythm on an editorial section; chrome sections pad themselves.
- Variants
- --tight drops to the chrome gap
- States
- —
- Tokens
- --movement --section
- Avoid
- Inside a component; stacked with a chrome section that already pads.
- Accessibility
- —
- Finish
- Same gaps; satin reads airier because the type is lighter.
- Portability
- System-bound.
.lit-footany voiceThe house style for every OVERTURE and for the two forms: accent light rising from the bottom edge so the block dissolves into the next movement instead of stopping at a hard edge. The mirror of .plane-gate--lit, which lights the gate from its top.
- Anatomy
- A class on a section. Draws an ::after over the whole box, so the host needs position: relative — every plane and section class here already sets it, and the recipe sets it too. Children are lifted above the light automatically.
- Variants
- --warm (the warm accent instead of the brand) · --strong (a second stop, for light rising over a figure rather than over a plane)
- States
- —
- Tokens
- --grad-lit-foot --grad-lit-foot-warm --accent --warm
- Avoid
- A section that already ends on a rule or a plane step — the boundary is then stated twice; more than one warm foot on a page.
- Accessibility
- Decorative and pointer-events: none. It tints the plane behind text, so a section carrying one still has to clear its contrast rules — it is 15% accent at the very edge, where copy rarely sits.
- Finish
- satin: reads as diffused warmth and belongs everywhere · matte: reads as a deliberate glow, so spend it on the overture and the form only.
- Portability
- System-bound.
.plateany voiceAny raised surface. One elevation modifier and at most one treatment.
- Anatomy
- .plate + .plate__body (or __body--lg). Position is relative already, so ::before treatments and absolute children work.
- Variants
- VOICE: bare = F (--r-2) · --square = A (--r-0) · --round = R (--r-3). ELEVATION: --flat --sunk --lift --float --glow --inset. TREATMENT: --sheen --glass --stroke --tint --tint-warm --mesh --spot. BEHAVIOUR: --hover.
- States
- --hover styles :hover and :focus-within
- Tokens
- --panel --band --r-0/-2/-3 --shadow-hair/-1/-2/-3 --shadow-inset --glass --grad-stroke --grad-mesh
- Avoid
- Two treatments at once; a rounded plate inside a square section; --glass over flat ground, where it has nothing to refract.
- Accessibility
- --hover on a plate that is not itself a link or button is decoration — put the control inside.
- Finish
- satin: --r-2 is 1.125rem and the shadow is wide and low, so plates read as soft cards · matte: 0.75rem with short hard light, so they read as panels. --square is unaffected by either.
- Portability
- System-bound.
.cardF · ChromeChrome sections with an image or icon at the top and a fixed body below.
- Anatomy
- .card (flex column, overflow hidden) > optional figure > .card__body > optional .card__icon.
- Variants
- --sunk (band plane) · --flat (hairline only)
- States
- None by default — a card that is a link needs its own hover.
- Tokens
- --panel --band --r-2 --shadow-hair --shadow-1 --wash --accent-deep
- Avoid
- In an A section (use .plate--square); as a wrapper for a frame.
- Accessibility
- Whole-card links need a real <a> around the title, not a click handler on the card.
- Finish
- satin: the softer radius and the warm panel make a grid of cards read as a gallery · matte: as a spec sheet.
- Portability
- System-bound.
05 · Rules, rails, data
Edges carry a hint of the accent.
Hairlines derive from ink; the product register uses dashed accent-tinted rails. Facts, spec tables and stat rails all share the mono label and the display numeral.
.rule · .rule--strong · .rule--fade · .rail-t
.facts · .fact
- Founded
- 2018
- Body rhythm
- 17px
- 1.6 leading, −0.006em
| Token | Value | Source |
|---|---|---|
| hair | 12% | ink |
| ↳ derived by color-mix, never authored | ||
| hair-2 | 26% | ink |
| wash | 7% | accent |
| Authored values | 0 | |
.accordion · .toc
What is a seam?
The boundary between two movements: a rule, a plane step, or a recurring motif that makes the modulation read as intentional.
Why one gate per page?
It is the fortissimo. Twice is noise.
The contract
.rule / .rail-t / -b / -y / -l / .dividerany voiceThe seam when no plane step is available — a rule above a coda, rails bounding a ledger.
- Anatomy
- .rule is an element; .rail-* are edges on an existing one; .divider carries a centred label.
- Variants
- .rule--strong (hair-2) · .rule--fade (gradient) · .divider--strong
- States
- —
- Tokens
- --hair --hair-2 --grad-rule
- Avoid
- A rule and a plane step at the same boundary; rules inside a plate that already has a hairline.
- Accessibility
- Decorative — never the only signal that two things differ.
- Finish
- satin: hairlines read warmer and slightly softer against the warm ground · matte: crisper, so they carry more of the structure.
- Portability
- System-bound.
.facts / .factA · Atelier editorialExactly four facts, values of six characters or fewer, one note each.
- Anatomy
- .facts grid > .fact > .fact__value (+ --mono) + .fact__note.
- Variants
- .facts--4 · .facts--rail
- States
- —
- Tokens
- --mono --hair --ink --accent-deep
- Avoid
- Sentences as values; more than four cells; a number the client has not confirmed — use .probel.
- Accessibility
- The note carries the unit and the derivation; the value alone is not self-describing.
- Finish
- Unchanged — tabular mono is the evidence register in both.
- Portability
- Values are topic-bound.
.stat / .stat-railR · ProductThree to five numbers with a derivation note each.
- Anatomy
- .stat > .stat__value + .stat__delta (--up --down --flat) + optional .stat__spark. .stat-rail > .stat-rail__grid > .stat-rail__cell, bounded by a dashed accent rail.
- Variants
- delta direction
- States
- —
- Tokens
- --mono --ok --bad --run --hair-accent
- Avoid
- Values longer than six characters; notes longer than 24; a delta with no period attached.
- Accessibility
- Direction must not be colour alone — the arrow glyph carries it.
- Finish
- Unchanged.
- Portability
- Topic-bound.
.table / .meter / .barany voiceComparison data; a proportion that has a real denominator.
- Anatomy
- .table-wrap (scrolls) > .table. .meter > .meter__fill; .meter__row labels it.
- Variants
- table --striped · meter --thin --accent --warm --ok · bar --soft --warm
- States
- —
- Tokens
- --hair --band --accent --ok --warm --grad-progress
- Avoid
- A meter without a stated maximum; a table narrower than its content without the wrap.
- Accessibility
- A meter needs role="meter" with aria-valuenow/min/max, or a visible number beside it.
- Finish
- Unchanged.
- Portability
- Topic-bound.
.mock-*R · ProductRestaging a real screen from tokens, so the mock repaints with the palette.
- Anatomy
- Atoms for a token-built product mock: .mock-tile .mock-line .mock-num .mock-label .mock-pill .mock-dot .mock-avatar .mock-delta.
- Variants
- .mock-delta--warm
- States
- —
- Tokens
- --band --hair --accent --warm --mono
- Avoid
- Inventing a screen the product does not have; an off-palette capture without .duotone.
- Accessibility
- Decorative as a whole — give the frame an aria-label naming what it shows.
- Finish
- satin: a mock built from atoms inherits the softer radii, so it stays in register with the page.
- Portability
- The shape is topic-bound.
.frameR · ProductAround a product mock, a screen capture, or a spec table with plate={false}.
- Anatomy
- .frame > .frame__bar (with .frame__dots > three .frame__dot, and .frame__url) > .frame__body.
- Variants
- —
- States
- —
- Tokens
- --panel --band --hair --r-3 --shadow-2 --mono
- Avoid
- A rounded plate inside it; two frames in one movement; fewer than six columns.
- Accessibility
- The URL is decorative text — the real link, if any, goes in the body.
- Finish
- satin: the softer frame radius reads less like a browser and more like a device — keep the mono URL so the evidence register survives.
- Portability
- The URL is topic-bound; name the real route.
.specR · ProductA rate card or an invoice restaged from tokens — the product showing its working.
- Anatomy
- A table. .working rows are the intermediate steps; the last row is the total, on a rule.
- Variants
- .working row class
- States
- —
- Tokens
- --mono --hair --hair-2 --band --ink
- Avoid
- Prose in cells; more than five columns or ten rows; a pasted screenshot instead.
- Accessibility
- Real <th> with scope; tabular numerals are a font feature, not alignment.
- Finish
- Unchanged. A spec table is the one place satin stays exact.
- Portability
- Every number is topic-bound and must be true.
06 · Motion
Reveal once. Then hold still.
data-reveal fades up on entry (mask and line variants), hero-in runs on CSS above the fold, parallax is scroll-timeline only. Reduced motion sees the final state. Chrome sections keep their own .col fade-ups; never both on one element.
data-reveal
Fade up, 850ms, ease-out-expo, stagger with --reveal-delay.
data-reveal="mask"
Clip on the child unmasks upward — for figures.
data-reveal="line"
A hairline draws itself left to right — the rule at every movement head.
07 · Depth
Glass, mesh, stroke, orb.
The richer surfaces: a translucent glass plate, a gradient-stroked border drawn through a mask, an aurora mesh built from three token radials, and blurred accent orbs behind content. All derived; none needs a dark override.
.plate--glass
Translucent panel over the mesh, blur-2.
.plate--stroke
Gradient border, accent → hair → warm.
.plate--spot
One overhead light on the panel.
.plate--tint
Accent-tinted ground.
.plate--tint-warm
Warm-tinted ground.
.plate--mesh
Quiet mesh on a panel.
.plate--inset
Sunk with an inner shadow.
.plane-gate--lit
42
.type-giant .type-fade — the numeral dissolves into the plane
.type-gradient · .type-eyebrow
Eyebrow line
Accent to warm.
Gradient text for one word or one line — never a paragraph.
The contract
.orb / .noiseany voiceOne blurred accent behind a gate coda or a hero figure; noise over a flat plane that looks too clean.
- Anatomy
- Absolutely positioned inside a position: relative ancestor; both are pointer-events: none.
- Variants
- .orb--warm · .orb--series
- States
- —
- Tokens
- --accent --warm --series-3 --r-pill
- Avoid
- More than one orb in view; noise under body copy at more than 5%.
- Accessibility
- Decorative — must not sit above text in the stacking order.
- Finish
- satin: an orb belongs, because the whole finish is diffused light · matte: an orb is a treatment, so spend it once.
- Portability
- System-bound.
[data-reveal] / .hero-in / .parallaxA · Atelier editorialMovement openers, and staggered --reveal-delay inside a grid. .hero-in above the fold only; .parallax on a figure that has room to move.
- Anatomy
- AtelierMotion once per page sets data-motion="on" on <html> before first paint, then an IntersectionObserver adds .is-in to each [data-reveal] once. .hero-in needs no observer — it is a CSS animation, so above-the-fold content never waits on JavaScript.
- Variants
- bare data-reveal (rise + fade) · ="fade" (no movement) · ="mask" (the clip is on a CHILD wrapper, never the observed element) · ="line" (a hairline draws itself left to right)
- States
- .is-in once revealed; the observer unobserves after firing
- Tokens
- --ease-out-expo --reveal-delay (set inline per element)
- Avoid
- Both systems on one element; data-reveal on anything hidden at load — it never intersects, so it stays at opacity 0; a reveal on body copy, which makes reading wait for scrolling.
- Accessibility
- The whole layer is inside prefers-reduced-motion: no-preference, and data-motion is only set when the visitor has not asked for less. Without the flag every target renders in its final state — so a no-JS visitor sees the page, not a blank one.
- Finish
- Unchanged; the durations and easings are shared.
- Portability
- System-bound.
- Trap
- data-reveal="mask" clips its CHILD. Putting the clip on the observed element gives it zero height, it never intersects, and the content never appears.
.skeleton / .kbd / .code / [data-tip]any voiceA skeleton only where something really loads; a tooltip for a definition, never for essential text.
- Anatomy
- .skeleton (--text --circle) is a loading placeholder; .code--inline is inline; [data-tip] draws a tooltip from the attribute.
- Variants
- skeleton --text --circle · code --inline
- States
- skeleton animates; tooltip on :hover and :focus-visible
- Tokens
- --band --hair --mono --fs-code --ink
- Avoid
- A tooltip as the only place an instruction appears; a skeleton on static content.
- Accessibility
- [data-tip] is visual only — the same text must be reachable without hover.
- Finish
- Unchanged.
- Portability
- System-bound.
08 · States
Ok, warn, bad, info.
Four semantic colours solved to ≥4.5:1 on ground and band, each with a wash. They appear in callouts, tags, deltas and meters — never as decoration.
Saved
Everything on this page is persisted.
Check the seam
Two identical planes touch here; add a rule.
Two gate bands
The fortissimo twice is noise. Remove one.
Note
The accent callout is for editorial asides, not errors.
ActiveTrialOverdueQueuedDraft
Default72%
Ok100%
Thin · warm38%
09 · Tiles, tabs, tables
The product furniture, enriched.
KPI stats with deltas and sparklines, feature tiles with a numeral, tabs in two shapes, a stepper, a sans data table, a timeline.
Revenue48.2k▲ 22.1%
Churn1.8%▼ 0.4%
Seats1,284— 0.0%
NPS64▲ 6
01
Feature tile
Numeral top-right, icon in a wash tile, one sentence.
02
Square tile
Same recipe in the atelier voice.
03
Gate tile
Tokens remap; the same markup on the dark plane.
.tabs · .tabs--segment.stepper
Score
written
Realise
in progress
Verify
scroll it
.table
| Instrument | Voice | Seams |
|---|---|---|
| HeroBleed | A | 1 |
| FeatureCards | F | 2 |
| SpecTable | R | 2 |
.timeline
- 2026-09-19
Token layer
One root for three donors.
- 2026-09-19
Component layer
Recipes written once.
- next
A real site
Composed by score.
.code · .kbd · [data-tip] · .skeleton · .divider
// palette swap: one file :root { --accent: #3757f8; --warm: #dd6301; }
Press ⌘ K, or hover --accent.
or
The contract
.mast / .footany voiceStandalone landings: wordmark, edition label, three to five anchors, the mode toggle, one control.
- Anatomy
- .mast > .mast__row > .mast__brand + .mast__nav + .mast__actions. .foot > .foot__brand + .foot__grid + .foot__legal-row > .foot__legal.
- Variants
- —
- States
- nav :hover · sticky mast on scroll
- Tokens
- --glass --glass-hair --hair --mono --z-mast
- Avoid
- Dropdowns; two controls in the mast; a social row in the foot.
- Accessibility
- <header>/<footer> landmarks; the nav needs a label when there are two.
- Finish
- Unchanged.
- Portability
- Links are topic-bound.
.accordion / .toc / .progressF · ChromeFour to eight questions; a reading index on a long page.
- Anatomy
- .accordion is <details>/<summary> — .accordion__summary + .accordion__icon + .accordion__text. .toc__list > .toc__link (--d3 indents).
- Variants
- .toc__link--d3
- States
- [open] · :hover · current section
- Tokens
- --hair --accent --run --dur-2
- Avoid
- All items open at once; questions that are really claims.
- Accessibility
- Keep <details>/<summary> — it is keyboard-operable for free.
- Finish
- Unchanged.
- Portability
- Topic-bound content.
.stepper / .timelineF · ChromeAn ordered process with three to five steps; dated entries.
- Anatomy
- .stepper__step > .stepper__title + .stepper__note. .timeline__item > .timeline__date + .timeline__title + .timeline__body.
- Variants
- —
- States
- current step
- Tokens
- --accent --hair --mono --band
- Avoid
- Steps without a verb; an undated timeline.
- Accessibility
- An ordered list is the right element; the current step needs aria-current.
- Finish
- Unchanged.
- Portability
- Topic-bound.
.spineA · Atelier editorialThree to five procedural steps, each a title and one sentence.
- Anatomy
- .spine > .spine__step > .spine__n (mono numeral) + copy, on a vertical hairline.
- Variants
- —
- States
- —
- Tokens
- --hair --mono --ink --run
- Avoid
- More than five; steps without a verb; a heavy figure beside it.
- Accessibility
- An ordered list.
- Finish
- satin: the serif titles turn a procedure into an itinerary — keep bodies under 140 characters.
- Portability
- Topic-bound.
.quoteA · Atelier editorialOne quote under 30 words from a named person, about two thirds through.
- Anatomy
- .quote > .quote__text + .quote__cite (one line).
- Variants
- —
- States
- —
- Tokens
- --display --ink --mono --accent
- Avoid
- Two quotes on a page; stars; a quote that restates the h2.
- Accessibility
- <blockquote> with <cite>.
- Finish
- satin: the serif at display scale is the strongest single argument for this finish — a quote is where it pays.
- Portability
- Topic-bound; the person must be real.
.index-plate / .score / .tile / .calloutA · Atelier editorialAn index of sections; three or six equal claims; a callout where a real caveat exists.
- Anatomy
- .index-plate is a three-column row (numeral, title, meta). .tile > .tile__icon or .tile__n + .tile__title + .tile__body. .callout > an optional inline svg (the first grid column is the icon slot) > a body wrapper holding .callout__title + one paragraph. With no svg the recipe collapses to a single column.
- Variants
- tile --square --gate · callout --ok --warn --bad --accent
- States
- —
- Tokens
- --mono --hair --wash-* --ok --warn --bad --accent-deep
- Avoid
- A callout as emphasis; four tiles where the grid wants three or six.
- Accessibility
- A callout carrying a warning needs role="note" or a visible label — colour is not the message.
- Finish
- satin: callout washes are stronger, so one per movement is plenty.
- Portability
- Topic-bound content.
.probelA · Atelier editorialA fact the site does not have yet: the marked gap that names what is missing.
- Anatomy
- A dashed hairline cell > mono register + .probel__tick (one accent tick).
- Variants
- --block for a full-width gap
- States
- —
- Tokens
- --hair-accent --hair-accent-soft --mono --accent
- Avoid
- An empty cell; an invented number; more than two per page.
- Accessibility
- The register text is the content — it must say what is absent.
- Finish
- Unchanged. The probel is the system’s honesty device in both registers.
- Portability
- System-bound; the register line is topic-bound.
.logo-wallA · Atelier editorialEight to ten marks calibrated by optical mass, not bounding box.
- Anatomy
- .logo-wall__grid > .logo-wall__cell > an SVG mark in currentColor.
- Variants
- —
- States
- grayscale at rest, colour on hover
- Tokens
- --run --panel --hair
- Avoid
- Fewer than six; plates under the marks; colour at rest.
- Accessibility
- Each mark needs an accessible name — the company, not "logo".
- Finish
- satin: a light plate under a mark in dark mode still applies; the warm ground flatters grayscale marks.
- Portability
- Marks are topic-bound.
10 · Scale
Spacing, motion, layers.
A 4px spacing scale for the inside of components; --section and --movement for the rhythm between them. Four durations, four easings, a stagger.
s-1
s-2
s-3
s-4
s-5
s-6
s-7
s-8
s-9
--dur-1
180ms
--dur-2
320ms
--dur-3
620ms
--dur-4
1100ms
--ease-out-expo
--ease-out-quart
--ease-spring
--ease-in-out