---
version: alpha
name: Drop Dead Generous
description: A bold, playful generosity experiment — near-black ink on pure white, a single hot-red heart accent, oversized display headlines with tight tracking, scattered poetic copy and animated heart-emoji lists. Editorial warmth with zero corporate chrome.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f7f5f1"
  ink: "#111111"
  ink-pure: "#000000"

  # Hot red — the heart accent
  primary: "#ff2d2d"
  primary-deep: "#e01b1b"
  on-primary: "#ffffff"

  # Warm paper tint (editorial moments)
  paper: "#f3efe7"
  cream: "#faf7f1"

  # Neutral scale
  gray-700: "#3d3d3d"
  gray-600: "#555555"
  gray-500: "#777777"
  gray-400: "#9a9a9a"
  gray-200: "#e2ddd5"
  gray-100: "#ebe7df"

  # Interactive
  link: "#111111"
  link-hover: "#ff2d2d"
  focus-ring: "#ff2d2d"

  # On-color
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -2.5px
  display:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -1.8px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1.2px
  sub-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.2px
  body:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.4px
  caption:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"

  link-inline-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body}"

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.gray-200}"

  card-warm:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.gray-100}"

  card-photo:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.gray-200}"

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.ink}"

  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 20px 32px

  heart-accent:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
---

# Drop Dead Generous Design System

## Overview

Drop Dead Generous is a global experiment in generosity, and its website wears that mission as visual joy. The canvas is pure white (`{colors.background}`) with near-black ink (`{colors.ink}`), but the whole page is animated by a single, unapologetic hot red (`{colors.primary}`) that shows up as hearts, buttons, and hover states. It is the opposite of corporate philanthropy design — no muted blues, no stock-photo earnestness. The page feels handwritten and alive, like a love letter that learned to scroll.

The typographic personality is oversized and confident. Display headlines run enormous (up to 72px) with tight negative tracking, so phrases like "a global experiment in generosity" land as billboard statements rather than polite captions. Below the headlines, copy is set generously and breathes, sometimes scattered with deliberate spacing for poetic effect ("one good thing leads to another"). The voice is editorial and warm — closer to a zine than a foundation report.

The signature move is the heart. Bright red heart marks punctuate long animated lists of what grants became — bicycles, mentors, gardens, meals — turning a grants ledger into an emotional feed. This single accent color does all the work: it marks interactivity, it carries the brand, and it provides the only chroma on an otherwise achromatic page. Restraint everywhere else makes the red feel earned.

**Key Characteristics:**
- Pure white canvas with near-black `{colors.ink}` text — high contrast, gallery clean
- One hot-red accent (`{colors.primary}`) for hearts, CTAs, and hover states — the entire color story
- Oversized display headlines (up to 72px) with tight negative tracking (-2.5px)
- Warm paper tints (`{colors.paper}`, `{colors.cream}`) for editorial card moments
- Scattered, poetic body copy with intentional spacing
- Animated heart-emoji lists turning data into emotion
- Pill-shaped buttons and badges; otherwise minimal radius
- Inline links default to ink, flip to red on hover

## Colors

### Primary
- **Ink** (`{colors.ink}`): Primary text, headlines, links at rest. Near-black for a touch of softness.
- **Pure White** (`{colors.background}`): Page background and most surfaces.
- **Hot Red** (`{colors.primary}`): The heart. Used for accents, CTAs, hover states, and emotional emphasis.
- **Red Deep** (`{colors.primary-deep}`): Pressed/hover state for red buttons.

### Warm Surfaces
- **Paper** (`{colors.paper}`): Editorial card background, warmth without color.
- **Cream** (`{colors.cream}`): Subtle warm section tint.
- **Surface Soft** (`{colors.surface-soft}`): Photo card backdrop.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Strong secondary text.
- **Gray 600** (`{colors.gray-600}`): Secondary copy.
- **Gray 500** (`{colors.gray-500}`): Tertiary, muted captions.
- **Gray 400** (`{colors.gray-400}`): Placeholder, disabled.
- **Gray 200** (`{colors.gray-200}`): Card borders, dividers.
- **Gray 100** (`{colors.gray-100}`): Hairline dividers on warm surfaces.

### Interactive
- **Link** (`{colors.link}`): Inline links at rest — ink, often underlined.
- **Link Hover** (`{colors.link-hover}`): Links flip to red on hover.
- **Focus Ring** (`{colors.focus-ring}`): Red focus outline on interactive elements.

## Typography

### Font Family
- **Primary**: `Space Grotesk`, with fallbacks `Arial, sans-serif` — a geometric grotesque with quirky, friendly details that match the playful-editorial voice. One family carries display through caption.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — billboard mission statement |
| `display` | 52px large display moments |
| `section-heading` | Section titles |
| `sub-heading` | Card and sub-section headings |
| `body-large` | Lead paragraphs, introductions |
| `body` | Standard reading text |
| `body-small` | Secondary copy, metadata |
| `label` | Buttons, nav, eyebrow labels |
| `caption` | Tags, fine print |

### Principles
- **Big and confident**: Display headlines run oversized with tight negative tracking — the type is the imagery.
- **One family, full range**: Space Grotesk handles everything; weight (400/500/700) and size carry hierarchy.
- **Poetic spacing**: Some copy is deliberately scattered or spaced for emotional rhythm, not grid discipline.
- **Tracking scales with size**: -2.5px at 72px relaxes to 0 at body sizes.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) between major sections for editorial breathing room.

### Grid & Container
- Generous single-column hero with oversized headline
- Horizontal-scrolling photo carousels for grantee stories
- Long vertical animated lists for grant outcomes
- Section anchors (#hero, #grants, #talks, #dispatches) drive navigation

### Whitespace Philosophy
- **Breathing room**: Large vertical gaps between sections; white space frames the red.
- **Red as punctuation**: The page is achromatic until a heart or CTA appears.
- **Editorial rhythm**: Copy blocks alternate with imagery and animated lists, never a dense grid.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, plain text |
| `xs` | 2px | Tiny inline accents |
| `sm` | 4px | Inputs, small containers |
| `md` | 8px | Photo cards, tiles |
| `lg` | 16px | Editorial cards |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Hot red pill with white text. The heart-energy CTA.
- **`button-secondary`** — Ink pill with white text, for lower-emphasis actions.
- **`button-ghost`** — White pill with ink border and text.

### Links
- **`link-inline`** — Ink, usually underlined; flips to red (`{colors.link-hover}`) on hover.

### Cards
- **`card`** — White surface, hairline gray border, 16px radius.
- **`card-warm`** — Paper-tinted editorial card for warmth.
- **`card-photo`** — Soft surface frame for grantee photography.

### Badges
- **`badge`** — Hot red pill, white text, for tags and counts.

### Inputs
- **`input`** — White field, ink border. Focus flips border to red (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — White bar, ink labels, anchors to page sections.

### Distinctive Components
- **Heart accent** (`{components.heart-accent}`) — Red hearts punctuating animated outcome lists, turning a grants ledger into an emotional feed.
- **Animated outcome list** — Long vertical list of what grants became, each line heart-marked.
- **Grantee photo carousel** — Horizontal-scrolling colorful testimonial strip.

## Do's and Don'ts

### Do
- Keep the canvas white and the text near-black `{colors.ink}`
- Let hot red `{colors.primary}` be the only chroma — hearts, CTAs, hover
- Set headlines oversized with tight negative tracking
- Use pill shapes for buttons and badges
- Add warm paper tints for editorial cards
- Flip inline links to red on hover

### Don't
- Don't introduce a second accent color — red is the whole story
- Don't use muted corporate blues or earnest stock-photo tones
- Don't crowd the page; whitespace frames the red
- Don't set headlines small or with positive tracking
- Don't round body cards beyond `{rounded.lg}`

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, carousels swipe |
| Tablet | 600–1024px | Wider columns, larger type |
| Desktop | 1024–1400px | Full layout, oversized hero |
| Large | >1400px | Centered, generous margins |

### Collapsing Strategy
- Hero: 72px → scales down while keeping proportional negative tracking
- Navigation: anchor links → compact menu on mobile
- Photo carousel: horizontal swipe on all sizes
- Outcome list: maintains heart marks, wraps lines
- Section spacing: 140px → ~64px on mobile

### Touch Targets
- Pill buttons use comfortable 14px vertical padding
- Nav anchors spaced for tapping
- Carousel supports swipe gestures

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Hot Red `{colors.primary}`
- Background: Pure White `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Gray 600 `{colors.gray-600}`
- Accent / hearts: Hot Red `{colors.primary}`
- Link hover: `{colors.link-hover}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on white. Headline at 72px Space Grotesk weight 700, line-height 0.98, letter-spacing -2.5px, color `{colors.ink}`. Subtitle 20px weight 400, `{colors.gray-600}`. Hot-red pill CTA (`{colors.primary}`, white text, 9999px radius, 14px 28px padding)."
- "Build an animated outcome list: each line ink text 17px with a red heart (`{colors.primary}`) marker."
- "Design a warm editorial card: `{colors.paper}` background, 16px radius, ink heading 24px weight 500, body 17px `{colors.gray-600}`."
- "Make a badge: `{colors.primary}` background, white text, 9999px radius, 4px 12px padding, 12px Space Grotesk weight 500."

### Iteration Guide
1. Red is the only color — never add a second accent
2. Headlines big with tight negative tracking; body relaxes to neutral
3. Pills for buttons/badges; hairline borders for cards
4. Inline links default to ink, flip to red on hover
5. Whitespace and warm paper tints carry the editorial feel

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Drop Dead Generous. Brand names and trademarks belong to their respective owners.