---
name: The Pudding
description: "This site is a premier example of how to blend editorial rigor with playful, accessible data visualization."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#262626"
  secondary: "#6D6D6D"
  neutral: "#6D6D6D"
  bg-soft: "#F2F2F2"
  line: "rgba(38,38,38,0.15)"

typography:
  display:
    fontFamily: slab-serif
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.8px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 2px
  md: 4px
  lg: 6px
  pill: 28px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A digital publication that makes awesome stories with data.

*A playful yet intellectually rigorous digital magazine for data-driven narratives.*

## Colors

Monochromatic base with vibrant, illustrative card backgrounds.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#262626`)** — uses `ink` token
- **Secondary text (`#6D6D6D`)** — uses `ink-soft` token
- **Muted (`#6D6D6D`)** — uses `muted` token
- **Borders (`rgba(38,38,38,0.15)`)** — uses `line` token

## Typography

- **Display:** slab-serif
- **Body:** grotesque-sans
- **Mono:** monospace

- Use tight negative tracking (-0.8px) for large slab-serif display text.
- Reserve monospace for technical data, dates, or issue numbers.
- Uppercase navigation labels for clarity.

## Layout

3-column grid of story cards, with a flexible top navigation.

*Rhythm:* Consistent 4px base with generous vertical padding (32px) in cards.

## Elevation & Depth

- rgba(0, 0, 0, 0.3) 0px 2px 1px 0px
- Borders: 1px solid #262626

## Shapes

- `sm`: 2px
- `md`: 4px
- `lg`: 6px
- `pill`: 28px

## Components

- **button:** Pill-shaped with 1px solid black border and bold text.
- **card:** Image-forward with vibrant solid-color backgrounds and slab-serif titles.
- **chip:** Small pill-shaped tags or issue numbers with 1px borders.
- **input:** Rounded corners with a subtle drop shadow, placeholder 'Find a story...'.
- **hero:** Full-width introductory area with large stylized logo and tagline.

## Do's and Don'ts

**Don't:**
- Don't use complex gradients — screenshot shows flat, vibrant solid-color backgrounds.
- Don't use sans-serif for headlines — screenshot shows heavy slab-serif for titles.
- Don't use thin, elegant fonts — screenshot shows bold, weighted type throughout.
- Don't use rounded corners on cards — screenshot shows sharp or very small radii.
- Don't hide data — screenshot shows explicit issue numbers and dates prominently.
- Don't use a single accent color — screenshot shows a diverse, multi-colored card palette.

---

## System Prompt (paste into AI agent)

```
The Pudding is a playful yet intellectual digital publication for data-driven stories. Its identity centers on bold, expressive typography and vibrant, illustrative content. Key colors include a monochrome base of #262626 ink on #FFFFFF background, with cards featuring varied solid backgrounds like #BB80EF, #41B8BE, and #F0D0D3. Typography categories are slab-serif (display), grotesque-sans (body), and monospace (data/labels). Critical donts: avoid complex gradients, do not use sans-serif for headlines, and never hide key metadata like dates or issue numbers. The layout is a clean 12-column grid with generous whitespace and interactive cards that invite exploration.
```