Chesnut.ai — Pattern book
Ed. 2026 · v2
The visual language this site is set in, documented the way a print shop would keep it: palette, type, rules, texture, ornament, and components. Everything on this page is built from the system it describes — the page is its own specimen.
Replaces the 2026 “Unified Design System”
01 Origins
Seven images on a corkboard01A Palm Springs houseWarm light, indoor-outdoor ease, a scalloped canopy roof — luxury as lightness, not weight.
02Phaidon’s bookstoreObjects on generous white ground; a gallery is mostly space.
03Obys — GridsEnormous display type, ruled bars, spec tables, and a grid you can toggle on.
04A portfolio slide called RecognitionSage and espresso; awards set as a ruled table. Information as typography.
05Works in Progress magazineBoxed article cards, mono tags, hairline everything.
06Otl Aicher’s IsnyA whole town told in one weight of line. Restraint as identity.
07A minimal magazineSerif italic doing the emotional work; cream doing the rest.
02 Principles
01Light is the luxuryBone paper, generous space, and daylight tones. Nothing heavy, nothing dark by default.
02Ruled, not boxedStructure comes from hairlines and ink rules, almost never from filled boxes or shadows.
03Type does the talkingOne enormous serif voice, one quiet mono voice. Decoration is what the letters leave behind.
04Set like a bookNumbered sections, figure captions, spec tables, a colophon. The site is a printed object that happens to be interactive.
05Coastal California earthSage, clay, palm, redwood bark, Pacific tide. Accents come from the landscape, never from a brand-color wheel.
06Delight in the marginsOrnaments, jokes in the coordinates, a hidden key that reveals the grid. Whimsy lives at the edges, never in the way.
03 Palette
18 colors, all from the landscapePaper
Cream#FCFAF4
raised surface, cards
Sand#EFEADE
recessed surface, plates
Shade#E6E0D1
deepest paper
Ink
Ink#26221A
text, strong rules
Ink soft#4F4A3E
long-form prose
Ink mute#7C7466
labels, captions
Ink faint#A89E8B
tertiary, figure notes
Earth accents
Sage#7E8471
soft green accents
Sage deep#545B47
emphasis italics
Clay#A9502B
links, hovers, numbers
Clay soft#C4714A
secondary warmth
Gold#C09A45
sparing highlights
Coastal range — redwood bark & Pacific tide
Redwood#77402E
bark — ornament, admin
Redwood deep#522A1F
darkest warm
Tide#44605C
Pacific green-blue
Tide deep#2E4441
deep water
Each accent also ships as a ~10–15% tint (--at-*-tint) for row fills and pattern grounds. Clay is the only color allowed to ask for attention; everything else recedes.
04 Type
Two voices talking, two whisperingFraunces — display
Aa Gg Qq & 0123
Measured twice, cut once, finished properly.
Source Serif 4 — prose
Body text runs at seventeen pixels with generous leading, set on bone paper in soft ink — never pure black on pure white.
Inter Tight — grasp · JetBrains Mono — label
The grotesque carries table descriptions and UI copy.
The mono voice — 11px · uppercase · 0.16em
DisplayFraunces — Covers, titles, big figures. Weight 300–400, tight leading (0.98), oldstyle numerals.
ProseSource Serif 4 — Body text and long-form reading at 17px / 1.65.
GraspInter Tight — UI copy, descriptions in tables — the quiet grotesque.
LabelJetBrains Mono — 11px, uppercase, 0.16em tracking. Section numbers, captions, metadata.
05 Rules & grid
Structure without boxesRule weights
at-rule — 1px ink, opens a section
at-hairline — 1px line, divides rows
Max width80rem (1280px) via .at-container
Side paddingclamp(1.25rem, 2.5vw, 3.5rem) — grows on wide monitors
Columns12, gap 1.5rem — press g anywhere to reveal them
Rule weights1px ink (structural) · 1px line #DCD5C5 (hairline)
Radius0 — everything square, like a printed page
ShadowsNone on paper; one soft lift reserved for the formal résumé document
06 Texture
A whisper above the paperFig. 1 — at-weavebasket weave
Fig. 2 — at-tickingtide pinstripe
Fig. 3 — at-stepsredwood diagonal
Textures sit on plates and panels, never behind reading text, and never above ~4% contrast. If you can screenshot it and see the pattern first, it is too loud. The site-wide ground is the exception that proves the rule: a seamless interlaced lattice after a Mongolian book cover — you are looking at it behind this page — drawn a whisper darker than the paper, with gold electrons tracing its circuits. Text that sits on it rests on .at-milk: bone at 55% with a 2px blur and a feathered halo, so type stays crisp while the lattice recedes. This very table is set on it.
07 Ornament
One weight of line, drawn by handFig. 4 — Horizonsun over the ridgeline
Fig. 5 — Redwoodscoastal grove, with fog
Fig. 6 — Frondstands in for missing plates
Fig. 7 — Scallopthe canopy roofline
Fig. 8 — Basket bandafter Ohlone basketry
All ornaments are stroke-only SVG at roughly 1.25px, in sage, clay, and redwood. The geometric band borrows its stepped diamonds and darts from coastal California basketry; the scallop is the Palm Springs roof; the grove is the drive north on Highway 1. They mark edges and endings — a divider, a corner, a placeholder — never the middle of the page.
08 Components
The working partsButtons & labels
Primary actionSecondaryQuiet link ↗
Section label — 08 with clay number
Faint variant for figure notes
Index row — hover to see the arrow
Split panel — palm & cream
The dark panel carries one sentence, with one phrase in gold.
The cream side explains it in prose, then signs off with a mono label. Palm green is the only dark ground in the system.
One per page, at most
09 Motion
Entranceat-fade — 14px rise over 0.7s, staggered with --at-d; removed under prefers-reduced-motion
Hover, rowsGround warms to cream; title turns clay; an arrow slides in
Hover, platesImage scales 1.025 over 0.6s — a lean-in, not a zoom
Hover, buttonsInk fills; bone text. No transforms, no shadows
10 Voice
Figures“Fig. 1 — The analyst.” Images are figures with captions, not decorations.
NumberingSections are 01, 02, 03 in clay. Index rows carry oldstyle numerals.
Placeholders“Plates in preparation” — never “image not found.”
JokesKept small and dry, in the metadata, for the observant. See the masthead coordinates.
Atelier v2 — drawn & specified August 2026
Tokens live in globals.css under --at-*