Finishes · one contract
Same bones.
Two surfaces.
A voice decides structure; a finish decides surface. Every pair below is one piece of markup rendered twice — the right-hand column only addsclass="finish-matte". Both finishes pass every contrast rule in PALETTE §2, in both modes.
Satin · default
Warm planes, an editorial serif, generous curvature, diffused light.
Matte · .finish-matte
Cool near-neutral planes, one sans, tight radii, short hard light.
01 · Display type
The face is a token.
Type roles read --display, which the finish points at the serif or the sans. Tracking and display leading are tokens for the same reason: a high-contrast serif will not take the sans's −0.045em. Body copy stays on Inter in both.
Satin
Overture
Instruments, not templates.
One claim, one lead, two controls — the same words in both registers.
Running copy is Inter at 17px in both finishes; only the leading moves. The caption voice below is mono in both, and it is what keeps satin from going soft and matte from going cold.
Specimendefault
Matte
Overture
Instruments, not templates.
One claim, one lead, two controls — the same words in both registers.
Running copy is Inter at 17px in both finishes; only the leading moves. The caption voice below is mono in both, and it is what keeps satin from going soft and matte from going cold.
Specimen.finish-matte
02 · Surfaces
Curvature and light.
Satin's radii are roughly half again matte's, and its shadows are wider with lower alpha — a diffused source rather than a hard one. --r-0 is zero in both, so the atelier voice keeps its square corners inside a satin page.
Satin
.plate · F
The chrome plate, one shadow step.
.plate--square · A
Square in both finishes.
.plate--round · R
The product plate, lifted.
.plate--sunk
One step below the ground.
Matte
.plate · F
The chrome plate, one shadow step.
.plate--square · A
Square in both finishes.
.plate--round · R
The product plate, lifted.
.plate--sunk
One step below the ground.
03 · Controls and states
One recipe, two registers.
Satin
A wash is a finish decision
Satin carries more accent in its washes, because the accent itself is quieter.
Matte
A wash is a finish decision
Satin carries more accent in its washes, because the accent itself is quieter.
04 · What actually differs
Ten tokens, both solved.
Read from src/data/tokens.json, generated from tokens.css — so this table cannot drift from the stylesheet. Every value in both finishes and both modes is in design/TOKENS.md, with each PALETTE §2 rule measured.
| token | satin | matte | job |
|---|---|---|---|
| --ground | #f9f5f2 | #f8fafc | the page plane |
| --panel | #fffdfb | #fcfefe | the raised plane |
| --gate | #251817 | #090e11 | the dark plane |
| --ink | #271517 | #26160f | text and hairline source |
| --accent | #a54e5c | #bb4603 | the brand |
| --warm | #ae7b53 | #0098a4 | the second accent |
| --r-2 | 1.125rem | 0 | the chrome plate radius |
| --w-display | 500 | 600 | display weight |
| --track-h1 | -0.018em | -0.045em | display tracking |
| --lh-body | 1.7 | 1.6 | body leading |
Choosing
One finish per site.
Satin when the material is people, craft, taste, care, a long read or photography. Matte when it is data, machinery, throughput or a dense comparison. Set it once insrc/config/config.ts; a single page may override it with the layout's finish prop.
A finish is not a plane: it never changes mid-page. This page is the one exception, and comparison is its subject. Judgement per instrument is ATLAS §8.