Elements, rendered live.
Every swatch and specimen below is produced by the same CSS that ships to production — when a token moves, this page moves with it.
This page is the visual index of the design system. The written catalog lives inDESIGN.md at the repo root — read it before authoring anything; this page shows you what those words look like on screen.
Two voices share one token base: Foxi chrome(SaaS product UI on warm ivory and espresso, rounded corners) andatelier editorial(gallery-calm display type on its own cooler canvas, square corners). Atelier specimens below sit inside their own canvas panels, exactly as they do in real sections.
One rule bends here and only here: palette specimens carry raw hex in their fills and labels, because a swatch has to name its value. Everywhere else — tokens only.
01 · Color
Color
Three sets: the walnut primary ramp, the warm stone neutral ramp, and the atelier token pairs. The two ramps live in tailwind.config.mjs; the atelier tokens in src/styles/atelier.css.
Primary — walnut
50
#faf5ee
100
#f2e8d7
200
#e4cfae
300
#d4b181
400
#c98f52
500
#8a5322
600
#744419
700
#603817
800
#4e2e15
900
#3f2512
950
#221306
500 is the main accent — 5.7:1 on white, safe for text and buttons. 600 carries hover states; 400 is the dark-mode accent (7:1 on espresso). 50–300 are cream tints for washes, 700–950 deep walnut for emphasis.
Neutral — warm stone
50
#f7f4ef
100
#efeae2
200
#e0d9cd
300
#c9c0b1
400
#a29a8b
500
#7d7468
600
#5f574c
700
#443e36
800
#2e2a24
900
#201c18
950
#171310
Ivory to espresso: 50 is the light body background, 100–200 section bands and borders, 500–700 body, muted and heading text, 900 the dark header bar, 950 the dark body. Same temperature family as the atelier greys, deliberately not identical — the planes stay distinguishable.
Atelier tokens
bg-canvas
#f4f4f2 · light
#141412 · dark
bg-surface
#eaeae7 · light
#1d1d1b · dark
bg-surface-strong
#dededa · light
#2b2b28 · dark
text-ink
#101010 · light
#ecece8 · dark
text-muted
#5a5a56 · light
#a4a49d · dark
text-accent
#8a5322 · light
#c98f52 · dark
border-line · border-line-strong
color-mix(in oklab, ink 13% / 26%, transparent) — derived from ink, never hardcoded; the hairlines above are live and follow the theme toggle.
02 · Typography
Typography
Archivo (variable, self-hosted) carries everything — body, headings, display; bothfont-sans andfont-headings resolve to it. IBM Plex Mono carries labels, spec data and atelier button text.
Base heading scale
Plain h1–h6 in global.css — fluid clamp sizes, weight 500, negative tracking, text-balance.
h1 — clamp(2.75rem, 8vw, 6.5rem) · lh 0.92 · ls -0.04em · 500
Walnut, oiled by hand
h2 — clamp(2rem, 4.6vw, 3.75rem) · lh 0.94 · ls -0.035em · 500
A catalogue of six pieces
h3 — clamp(1.5rem, 2.2vw, 1.875rem) · lh 1.06 · ls -0.025em · 500
Joinery before glue
h4 — clamp(1.25rem, 1.6vw, 1.5rem) · lh 1.25 · ls -0.02em · 500
Care and repair
Atelier display classes
Quiet objects for loud rooms
Made slowly
Three timbers, no more
Signed on the underside
A lead paragraph sets the register for the section beneath it — one or two sentences, never a wall.
Body copy in the atelier voice. The same rhythm — 17px at 1.65 leading with a hair of negative tracking — is applied to the whole site by the base body rule, so both voices read at the same cadence.
W 42 · D 45 · H 78 cm
03 · Controls
Controls
Two vocabularies, side by side. Foxi controls are rounded and sentence-case; atelier controls are square, mono and uppercase. Pick one per section — never both.
Foxi chrome
Button — style: primary · secondary · neutral · variation: outline
Badge — type: neutral · primary
main a — links inherit walnut automatically
Atelier editorial
.btn-atelier — primary · outline (accent wipes up on hover)
.chip — filter toggle, aria-pressed carries state
.link-atelier.link-mono — underline wipes in from the left
.field + .field-label — underlined, no boxes
04 · Structure
Structure & accents
The quiet furniture: hairlines, dashed walnut edges, spec bands, and the article accessories ported from RicoFast. The accent language is always the same — edges carry a hint of walnut, never recolored words alone.
Rules & dividers
.rule — atelier hairline from --line, adapts with mode
Dashed walnut divider — border-dashed border-primary-500/25
Fact band
.fact cells in a border-y dl — mono dt, oversized dd
- Founded
- 2018
- Voices
- 02
- Token sets
- 03
- Body rhythm
- 17px
TOC active state
Dashed walnut rail; active = walnut wash + solid marker + ink text
ContentsReading progress
Fixed top hairline, origin-left walnut sweep — shown here at 66%
The live bar is ReadingProgress.astro — its inline script needs data-astro-rerun plus a window-handle guard because of the ClientRouter.
05 · Voices
Voices & rules
Foxi chrome sits on ivory and espresso (neutral-50/950); atelier sections sit on their own slightly cooler canvas. That subtle step between planes is intentional — keep it.
One voice per section
Atelier sections may sit between Foxi sections, but vocabularies never mix inside one — no rounded cards on canvas, no atelier buttons in Foxi pricing.
Headings are never centered
Section headers, page headers and CTA bands are left-aligned — editorial rhythm. Only dialogs may center.
Tokens only
No raw hex, no text-white. Stick to neutral-*, primary-* and the atelier utilities and dark mode takes care of itself.
See the system living: /about is pure atelier,/story carries the ported article furniture, andthe design-system post tells the story in the blog voice.