Newsprint set for the web: near-black Source Serif 4 on paper white, with cyan and magenta process accents used small and deliberately, like spot color. No boxes, no dividers between sections — hierarchy comes from the serif scale and negative space alone.
Design system export Claude Design 16 pages · 3 templates
The tokens everything else is built from — type, color, spacing and the print treatments.
Source Serif 4 over Source Serif 4 — a fixed scale; density moves spacing, not sizes.
Role colors and the three tonal ramps, all as CSS variables.
A 1.25× spacing scale, 2px radius, and three shadow levels tuned to the light ground.
Phosphor — inline SVG on currentColor, duotone throughout.
Process plates — photographs print as misregistered separations; interface imagery is screened like newsprint.
Plain HTML and CSS — no JavaScript, no build step. View source on any page and copy the markup.
Solid primary actions; tags tint from the ramps.
Surface-filled cards with a kicker, title, body and meta row.
Text inputs, a segmented control and radios — native elements, themed states.
A header bar over a left page opening.
Rows separated by a whisper of the text color; status cells reuse the tags.
A modal surface at the top elevation, shown inside a static frame.
Starting points a consuming project can copy whole.
A twenty-three-slide presentation starter: cover, contents, dividers, columns, quadrants, a data table, SVG charts, color-separation plates, bleed imagery, a quote and a close.
Pet-supply inventory manager: dashboard, stock in/out, product detail, locations, stock & movement reports.
A one-page landing in the system's own voice — serif hero, dateline-and-index head, feature columns, plate-separated photograph, sign-up close.
Where the system's look is recorded and where to retune it.