A playful data-journalism newsstand rendered dark: a warm near-black #191919 canvas holding a grid of story cards whose thumbnails are FLAT blocks of vivid, rotating colour (the interactive charts live inside each essay, not on the index). It ships a published grey token ladder (--color-gray-50 #f7f7f7 through gray-1000 #191919) plus five named brand accents (purple #a239ca, green #3ae660, blue #4717f6, red #ff533d, yellow #e5e338), with saturated hues reserved for story blocks while greys carry all chrome. The identity is a deliberate THREE-voice type system — a chunky Gooper SemiCondensed slab serif for story titles at 32px weight 500 to 700 and -0.8px tracking, Atlas Grotesk grotesque for 14px body and 16px nav, and Atlas Typewriter mono in UPPERCASE for every label, number badge and button — so hierarchy comes from switching family as much as size. Controls are a pill-or-square split: outlined 1px #efefef sticker pills at 28px radius, 2px inverse buttons and 6px white inputs, and the signature interaction is a hover transform that rotates and scales stickers to 1.05 (or lifts them 4px) at 0.25s ease. Depth is refused beyond a faint rgba(0,0,0,.3) 0 2px 1px sticker drop, focus is a real 2px black ring at 2px offset, and personality lives in a hand-drawn script logo and custom line-drawn category icons. One anti-pattern: no reduced-motion block despite the hover transforms. Atlas Grotesk, Atlas Typewriter and Gooper are licensed, so the preview stands in with Inter, JetBrains Mono and Fraunces.
⚠ site only
Browse The Pudding in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: pudding.cool (live DOM, computed styles), 2026-08-02 (desktop 1512px). Coverage: home / story index. Same-origin stylesheets fully readable (sheetsBlocked 0). Svelte-built (hashed class names). Reality check: matches the hint — data-viz publishing, visual-essay journalism, chart-led editorial. Enriched: it is DARK (warm near-black #191919), not light; runs a published gray token ladder (50–1000) plus five named brand accents; sets a THREE-face system — Atlas Grotesk sans, a chunky Gooper SemiCondensed slab-serif for story titles, and Atlas Typewriter mono for all labels/metadata; story thumbnails are FLAT vivid colour blocks (not images); and the signature interaction is sticker-style outlined pills that TILT + scale on hover.
A playful data-journalism newsstand rendered dark: a warm near-black #191919 canvas holding a grid of story cards whose thumbnails are flat blocks of vivid, rotating colour, each titled in a chunky slab serif. The chrome mixes three deliberate voices — a neutral grotesque for reading, a bold semi-condensed slab for headlines, and a typewriter mono for every label, number and button — which gives it the feel of a hand-assembled zine rather than a CMS. Personality lives in the hand-drawn script logo, the custom line-drawn nav icons (a heart, a face, a lightning bolt), and outlined "sticker" pill badges that tilt and grow when hovered. Colour is structural: greys carry the chrome, and saturated hues are reserved for story blocks and the five brand accents. Feels: playful, editorial, hand-made, data-forward.
--color-gray-*)| Token | Hex | Role / usage |
|---|---|---|
| gray-50 | #f7f7f7 | Lightest surface / inverse text |
| gray-100 | #efefef | Primary text on dark (near-white) |
| gray-200 | #dfdfdf | Light hairline |
| gray-300 | #cacaca | Muted on light |
| gray-400 | #a8a8a8 | Muted text on dark |
| gray-500 | #878787 | Tertiary |
| gray-600 | #6d6d6d | Faint |
| gray-700 | #4e4e4e | Dividers |
| gray-800 | #373737 | Raised dark surface |
| gray-900 | #262626 | Card / panel on canvas |
| gray-1000 | #191919 | Page canvas |
| black / white | #000000 / #ffffff | Extremes, input fills |
| Token | Hex | Role / usage |
|---|---|---|
| purple | #a239ca | Category / accent |
| green (electric) | #3ae660 | Accent, links |
| blue | #4717f6 | Accent |
| red | #ff533d | Accent / alerts |
| yellow | #e5e338 | Accent / highlight |
#e68f33 orange · #63c34b green · #4c82b8 blue · #b51670 magenta · #bba0ef lavender · #41b8be teal · #33b9de cyan · #f0e4a8 pale yellow · #f0d0d3 pink — each story tile is a flat solid fill.
Rule: greys carry all chrome; saturated colour appears only on story blocks and brand-accent moments.
--sans / --serif / --mono tokens and a --12px…--128px size scale.| Role | Family | Size/Line | Weight | Tracking / case |
|---|---|---|---|---|
| Story title (h3 / largest) | Gooper SemiCondensed | 32 / 32 | 500–700 | -0.8px |
| Body | Atlas Grotesk | 14 / 18.55 | 400 | normal |
| Nav link | Atlas Grotesk | 16 / 22.4 | 400 | normal |
| Label / button / meta | Atlas Typewriter | 12.8 / 14.72 | 400 | normal, UPPERCASE |
Patterns: display is a chunky slab serif with tight -0.8px tracking; body/nav are a plain grotesque; every functional label is UPPERCASE typewriter mono. Hierarchy comes from family switching as much as size.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.