Flat
The default. Content that sits in the page.
A letterpress design system. Cool rag paper, blue‑black ink, twelve gemstone accents, hairline rules. Print has relief: the button is a rubber stamp struck askew into the sheet, the badge is a seal affixed a hair proud of it — everything else stays flat.
Everything the system draws is layout‑free. The
.cl-* caller layer owns every margin, grid and
measure on this page — proving the one rule: a component never carries its
demo's spacing with it.
Layer 1 primitives are immutable; components only ever read the Layer 2 semantic aliases. Every value is computed OKLCH.
--accent-solid / --accent-on)These caller-facing tokens only resolve correctly because the
accent surface recomputes per element — each bar reads its own
data-accent, label knocked out in
--accent-on at AA. --radius-0
squares the bar; no component uses this fill (the primary is the coloured
strike) — it is here for callers, per the §2 contract.
For intrinsic padding & internal gap only — never margin.
2px ceils cards & inputs. The only exceptions are in-component: the stamp-button’s uneven hand-cut edge and the cancel-stamp seal’s softly rounded ~6px corners.
--text-2xs · 11The deliberate press of small apps--text-xs · 13The deliberate press of small apps--text-sm · 14The deliberate press of small apps--text-ms · 16The deliberate press of small apps--text-subhead · 20The deliberate press--text-base · 24The deliberate press of small apps--text-h4 · 29The deliberate press--text-lede · 32The deliberate press--text-h3 · 39Small apps--text-h2 · 53Small apps--text-display · 72Press--display-1PressEvery step is targetpx ⁄ 24
expressed in rem — whole pixels at the 24px reference root
(html { font-size: 150% }) and it scales with the
reader's browser font-size. The last row is the opt-in fluid
--display-1 (resize the window) — exactly like
.prose; components use only the fixed steps.
The accented serif all-caps
subtitle — a foundry-specimen device, not League Spartan. The
accent pairing (color: var(--accent)) is the
caller's, one per surface; .t-subhead itself
defaults to --ink-2.
Each is a sealed box in an isolation frame. The frame and its padding are caller chrome; the component brings only itself.
Bottom row: a toggle. aria-pressed="true"
is a stable on-state — full ink and a resting bloom, no snap and no
depressed scale (a stamp left inked, not a button held down) — distinct from
the transient :active strike. The last button is
aria-disabled: styled spent but still
keyboard-focusable so assistive tech announces it (tab to it).
Print's call-to-action is a rubber stamp brought down by hand — a keyline impression set slightly askew, its ink held back until contact. The neutral strike is blue-black ink (secondary), the coloured strike is gem ink (primary), the bare struck label has no frame (tertiary). Hover vivifies the ink and squares the lean a touch; press snaps in fast, bites down in scale and blooms a ring of bled ink, then eases weightily back off. Disabled is a spent impression, settled at the pressed lean.
Press Esc to dismiss, or / to jump to search. The key reads as printed into the sheet — mono on a recessed ground, hairline-ruled — never a 3-D cap floating above it.
Elevation encodes how much is behind the surface,
never interactivity. Deeper sheets sit further into shadow. Use
-stack-2 sparingly — never a whole grid of it.
| City | Index | Reading |
|---|---|---|
| Reykjavík | 14 | Good |
| Lisbon | 38 | Fair |
| Jakarta | 171 | Poor |
No longer a rubber impression — the
.stamp-button took the ink and the lean. The seal is a small
printed plate applied to the page: crisp, square-set, sitting a
hair proud (a hard ink edge under the lower-right + a short soft drop, the
lamp from upper-left). Softly rounded corners, square-set, no lean — it is
the only thing that lifts off the page on its own.
A running-head is for printed-page navigation cues — e.g. a section pager:
Same components, one attribute. Below: one button, six
accents — data-accent only re-points hue & chroma.
Named and specified in DESIGN.md, intentionally unbuilt
until a real use-case needs them — the same discipline as .prose.
Opt-in long-form rhythm + measure. Caller owns it meanwhile.
Victorian readout: ruled box, label, tabular value, unit.
App-shell chrome; built when a shell needs it.
Leader-dot folio link; ☞ manicule link.
Cartouche, ticket/perforation, vertical-type, serial, microtype.
Three surfaces built from core v1 only. Each picks a different accent to prove single-accent retinting. All layout is caller CSS.
The trouble with most software is that it tries to be more than three things. A press for the deliberately small assumes you ship on Tuesdays — and that a 1px rule outperforms a 4px shadow.
EB Garamond at eighteen, weight 400, old-style figures in the running
text. The rhythm you are reading is supplied by the
.cl-prose caller layer — Masthead itself
ships none of this spacing, by design.
"Typography is the craft of endowing human language with a durable visual form." Robert Bringhurst
Elevation here is literal: sheets of paper offset behind a surface, each deeper one further into shadow, no blur, no rotation. See the colophon for the method.
Twelve dispatches a year, on Sundays. Old-style figures included.
Masthead · a specimen book set in EB Garamond, League Spartan and IBM Plex Mono. Every flourish earns its place. ❧