# The Pudding — Marketing / Home Design Spec > 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. ## 1. Visual Theme & Atmosphere 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. ## 2. Color Palette & Roles ### Grey ladder (published `--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 | ### Brand accents (published tokens) | Token | Hex | Role / usage | |---|---|---| | purple | `#a239ca` | Category / accent | | green (electric) | `#3ae660` | Accent, links | | blue | `#4717f6` | Accent | | red | `#ff533d` | Accent / alerts | | yellow | `#e5e338` | Accent / highlight | ### Story-block palette (rotating per article, examples) `#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. ## 3. Typography Rules - Three families: **Atlas Grotesk** (sans, body/nav/UI, 262×), **Gooper SemiCondensed** (slab-serif display, story titles, 228×), **Atlas Typewriter** (mono, labels/buttons/metadata, 132×). Published `--sans / --serif / --mono` tokens and a `--12px`…`--128px` size scale. - Specimens below use open stand-ins — **Inter** for Atlas Grotesk, **Fraunces** for Gooper, **JetBrains Mono** for Atlas Typewriter; the site ships the licensed Commercial Type / OH no faces. - Body 14px; all labels are UPPERCASE mono. | 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. ## 4. Component Stylings ### Buttons - **Inverse pill (Shop our swag)**: bg `#efefef`, text `#191919`, radius 2px, h 42px, Atlas Typewriter 12.8px UPPERCASE, padding 12px. - **Sticker pill badge / nav (About, Subscribe, More, #224)**: transparent fill, 1px `#efefef` outline on the dark canvas, radius up to 28px, mono UPPERCASE label. Signature hover: `transform: rotate(tilt) scale(1.05)` — the pill tilts and grows. - **Text link**: Atlas Grotesk 16px, no border, colour shift. ### Inputs - Search / email field: bg `#ffffff`, radius 6px, dark placeholder `#191919`, 16px, padding 8px, h 30–34px. Focus: `outline: #000000; outline-offset: 2px` (a real focus ring). Disabled: `opacity: 0.5`. ### Cards / story tiles - Flat solid colour block (per-story hue) with the slab-serif title beneath; outlined mono meta badges (`#224`, `JUL 2026`) at radius 28px, 1px `#efefef` border. Minimal shadow — a faint `rgba(0,0,0,.3) 0 2px 1px` sticker drop on a few elements. | Component | Rest | Hover | Focus | Active | Disabled | |---|---|---|---|---|---| | Sticker pill / nav | 1px outline, transparent | `rotate(tilt) scale(1.05)` | outline `#000` +2px offset | — | — | | "More" button | transparent | `translateY(-4px)` lift | outline `#000` +2px offset | — | — | | Input | white, 6px radius | — | outline `#000` +2px offset | — | `opacity:0.5` | ## 5. Layout Principles - Centered masthead: hand-drawn script logo top-center, tagline left, sticker nav pills right; below it a search field + a row of custom line-drawn category icons (Our Faves, Popular, Updating, Your Input, Video, Audio). - Story index is a multi-column grid of equal square colour tiles; each carries a mono number badge top-left and a date top-right, with the slab-serif title + grotesque dek below. - Generous dark gutters; alignment and colour blocks do the structural work, not borders. ## 6. Depth & Elevation - Radii: `28px` (pill badges/nav, 27×), `2px` (buttons), `6px` (inputs), `3px`. A pill-or-square split — no mid-range card radius. - Borders: 1px `#efefef` outlines (27×) on the dark canvas define the sticker pills; `#d6d6d6` / `rgba(48,48,48,.4)` incidental. - Elevation mostly refused: only a faint `rgba(0,0,0,.3) 0 2px 1px` / `rgba(0,0,0,.1) 0 2px 1px` sticker drop. No large shadows. ## 7. Motion | Property | Duration | Easing | Applies to | |---|---|---|---| | transform | 0.25s | ease | hover tilt / scale / lift (dominant, 91×) | | opacity | 0.1s | ease | fades | | left | 0.25s | ease | slider / carousel | House transition: `transform 0.25s ease` — every interactive sticker element tilts (`rotate` + `scale(1.05)`) or lifts (`translateY(-4px)`) on hover. No `@keyframes`, no animation library (the interactive charts live inside individual story pages, not the index). Easing is `ease-out`. **No `prefers-reduced-motion` block (reducedMotionBlocks 0) — recorded as a gap given the hover transforms.** ## 8. Backgrounds, Effects & WebGL - Flat solid surfaces: story tiles are CSS colour fills, not images (rasterLayers 1 — the OG image only). No canvas/WebGL, no grain, no video on the index. - One scrim gradient: `linear-gradient(rgba(25,25,25,0) 0%, rgba(25,25,25,.8) 30%, #191919 50%)` fading content into the canvas. - No backdrop-filter blur. ## 9. Do's and Don'ts ### Do - Keep the canvas warm near-black `#191919`; carry chrome on the grey ladder and near-white `#efefef` text. - Use three voices deliberately: Gooper slab serif for titles (-0.8px tracking), Atlas Grotesk for body, Atlas Typewriter UPPERCASE for every label, number and button. - Make story thumbnails flat solid colour blocks in a rotating hue set; reserve the five brand accents for accents only. - Build outlined "sticker" pill badges/nav (1px `#efefef`, radius up to 28px) that `rotate + scale(1.05)` on hover. - Keep a real focus ring (`outline #000`, offset 2px) and fade disabled to `opacity:0.5`. ### Don't - Don't use image thumbnails on the index — tiles are flat colour. - Don't add soft/large shadows; depth is a faint sticker drop only. - Don't collapse to one type family — the three-voice split is the identity. - Don't spread brand accents across chrome; greys carry chrome. - Don't ship hover transforms without a reduced-motion block (the live site omits one). ## 10. Responsive Behavior - Breakpoints from stylesheets: 400, 600, 720, 960px (+ a max-width:960 mobile block). A clean, simple ladder. - The story grid recolumns down to a single column; the mono meta badges and slab titles persist. - Three `prefers-color-scheme: dark` blocks present (darkSchemeBlocks 3) — the system adapts to theme; the index renders dark by default. No container queries. ## 11. Agent Prompt Guide Quick token reference: - Canvas `#191919` · Text `#efefef` · Muted `#a8a8a8` · Card `#262626` · Accents `#a239ca`/`#3ae660`/`#4717f6`/`#ff533d`/`#e5e338` - Fonts: Atlas Grotesk (Inter), Gooper slab (Fraunces), Atlas Typewriter (JetBrains Mono) · Body 14px · Radius 28px pill / 2px btn / 6px input · Control height ~42px - Focus: `outline #000000` + 2px offset · Hover: `transform: rotate(tilt) scale(1.05)` Use The Pudding design language: a playful dark visual-essay journal. Warm near-black `#191919` canvas with a published grey ladder (gray-50 #f7f7f7 → gray-1000 #191919) carrying all chrome and near-white `#efefef` text; five named brand accents (purple #a239ca, green #3ae660, blue #4717f6, red #ff533d, yellow #e5e338) and a rotating per-story block palette (orange #e68f33, teal #41b8be, magenta #b51670, lavender #bba0ef…) used only on flat solid story tiles. Set three voices deliberately: a chunky Gooper semi-condensed SLAB SERIF for story titles at 32px weight 500–700 and -0.8px tracking (stand-in Fraunces), Atlas Grotesk grotesque for 14px body and 16px nav (stand-in Inter), and Atlas Typewriter mono UPPERCASE for every label, number badge and button at 12.8px (stand-in JetBrains Mono). Controls are a pill-or-square split: outlined 1px `#efefef` "sticker" badges/nav at radius up to 28px, 2px buttons, 6px white inputs; the signature interaction is a hover `transform: rotate(tilt) scale(1.05)` (or `translateY(-4px)` lift) at 0.25s ease. Depth is refused beyond a faint `rgba(0,0,0,.3) 0 2px 1px` sticker drop; real focus ring is `outline #000` +2px offset; disabled is `opacity:0.5`. Hand-drawn script logo and custom line-drawn category icons. Feels: playful, editorial, hand-made, data-forward. Avoid: image thumbnails on the index (tiles are flat colour), soft/large shadows, collapsing to one type family, spreading accents across chrome, or omitting a reduced-motion block.