Black ink, warm paper, rare signal.
The tokens here are the single source of truth. Tailwind reads from web/lib/design-tokens.ts; so does this page. If a color, size, or duration is not here, it is not in the system.
Five values, no decoration.
Color separates, proves, or focuses. It does not flatter. Each token maps to a Tailwind utility — bg-ink, bg-paper, bg-surface, text-muted, text-accent — so the docs and the running site move in lockstep.
Primary text, key panels, decisive actions, hard rules.
Default page and panel fill. The warm background of the app.
Source excerpts, inputs, compact specimens, lifted surfaces.
Secondary labels, explanatory copy, metadata.
Rare positive state, verified status, focus ring only.
The editorial rhythm.
Tailwind ships a full spacing scale; these are the beats we reach for. Stick to them so margins stop drifting.
Hairline gaps, border insets.
Tight stacks, icon-to-text.
Inline pill clusters, dense rows.
Panel padding, default gaps.
Section heads to body.
Module gutter.
Major section break inside a page.
Between reference sections.
Page header to body well.
The system is square.
Only three radii exist. Anything more rounded reads as generic SaaS chrome and should be pushed back.
The system is square. Use 0 unless there is a reason.
Focus ring radius only.
Round chips on chevron buttons; sparing use.
Almost never. Two cases only.
The system avoids shadow as decoration. Use diffuse only under floating surfaces; use sheet for modal sheets.
Soft lift under floating drawers (WorkDrawer). Never on cards.
0 20px 40px -15px rgba(24, 24, 27, 0.06)
Mobile nav popover, modal sheets.
0 24px 80px rgba(0,0,0,0.22)
One ease curve, four durations.
Every transition uses the same ease — cubic-bezier(0.32, 0.72, 0, 1). Duration changes with the size of the movement.
Color/opacity hover.
Card lift, specimen hover.
Drawer, modal entry.
Section reveal on scroll.
See the type page.
Type tokens are large enough to deserve their own page.