---
version: alpha
name: "Poetry Foundation"
description: "Adobe Garamond Pro editorial serif paired with Canada Type Gibson sans, ink-black on white with a single cardinal red accent"

colors:
  background: "#ffffff"
  surface: "#f7f5f3"        # warm off-white search/form field, approximated from rgb(247,245,243)
  surface-elevated: "#e5e5e5"
  ink: "#000000"
  ink-muted: "#494949"
  on-background: "#000000"
  on-surface: "#494949"
  primary: "#d32c27"
  on-primary: "#ffffff"
  primary-container: "#d32c27"
  text-hover: "#d32c27"
  focus-ring: "#000000"
  border: "#e5e5e5"
  border-mid: "#d5d6d2"    # tab panel / image border, approximated from rgb(213,214,210)
  border-strong: "#aeaeae"  # checkbox/form field ring, approximated from rgb(174,174,174)
  shadow-soft: "#d3d3d3"
  ink-secondary: "#494949"

typography:
  display-hero:
    fontFamily: "adobe-garamond-pro, EB Garamond, Garamond, Baskerville, 'Times New Roman', serif"
    fontSize: 50px
    fontWeight: 700
    lineHeight: 1.23
    letterSpacing: 0px
  display:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.18
    letterSpacing: 0px
  heading-section:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 4.8px
  heading-sub:
    fontFamily: "adobe-garamond-pro, EB Garamond, Garamond, Baskerville, 'Times New Roman', serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.23
    letterSpacing: 0px
  heading-ui:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.23
    letterSpacing: 0px
  body-large:
    fontFamily: "adobe-garamond-pro, EB Garamond, Garamond, Baskerville, 'Times New Roman', serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "adobe-garamond-pro, EB Garamond, Garamond, Baskerville, 'Times New Roman', serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.23
    letterSpacing: 0px
  button-ui:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 17px
    fontWeight: 600
    lineHeight: 1.23
    letterSpacing: 0px
  label-upper:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 1.4px
  caption:
    fontFamily: "canada-type-gibson, 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.78px

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

rounded:
  none: 0px
  sm: 2px
  md: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 11px 23px
    border: 1px solid {colors.primary}
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 11px 23px
    border: 1px solid {colors.ink}
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 11px 23px
    border: 1px solid {colors.primary}
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 11px 23px
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 5px 11px
    border: 1px solid {colors.border}
  badge-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 5px 11px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px 0px
    border: 1px solid {colors.border}
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 6px 10px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 6px 10px
  nav-tab:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    border: 0px 0px 3px 0px solid {colors.border}
  nav-tab-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    border: 0px 0px 3px 0px solid {colors.primary}
---

# Poetry Foundation Design System

## Overview

The Poetry Foundation's website is one of the quietest well-designed editorial destinations on the web. The page lives on pure white (`{colors.background}`) with a conservative amount of ink: almost everything is black or warm gray, and the sole departure from that chromatic restraint is a cardinal red (`{colors.primary}`) that reads like a single underline drawn in ink. The white is not decorative — it is functional silence, the margin around a poem. Text breathes because the margins breathe. Sections are separated by generous vertical rhythm, and even the navigation feels considered rather than efficient.

The typographic contract is the site's defining character: two faces, zero compromises. Adobe Garamond Pro — a humanist old-style serif with deep roots in Renaissance book typography — carries everything editorial: headlines, body copy, article titles, subheadings. Canada Type Gibson, a clean humanist sans with a Gill Sans lineage, handles all interface chrome: section eyebrows, navigation links, button labels, captions, tags. The combination is precise and intentional. Where most literary or media sites choose a single serif and subordinate everything else to it, the Poetry Foundation maintains a genuine two-voice system: the serif speaks with the weight of the literary tradition, the sans handles the architecture around it. Neither face overwhelms the other because each stays in its lane.

What separates this system from a standard editorial site is the way restraint becomes expression. There are no gradients, no illustrations, no decorative ornament. The accent red appears on call-to-action buttons, active navigation tabs, and link hover states — and almost nowhere else. Border-radii are functionally absent from editorial containers; the small 4px rounding appears only on interactive UI elements. The shadow vocabulary is minimal: a soft two-layer drop shadow appears on floating components and form fields, but content cards live flat on the page. The result is a design that steps out of the way of the poetry it exists to present.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with a warm off-white form surface (`{colors.surface}`) for search and input fields
- Cardinal red accent (`{colors.primary}`) used exclusively for CTAs, active states, and link hovers — one chromatic punch per interaction
- Two-typeface editorial contract: Adobe Garamond Pro for all reading content, Canada Type Gibson for all interface chrome
- Gibson navigation and labels always set with positive letter-spacing at smaller sizes — `1.4px` at 14px, `0.78px` at 12px — a classic typographic spacing convention for small-cap-adjacent UI text
- Garamond headlines at weight 700 run large (50px display, 30px sub-head), leaning into the serif's authority without competing with body readability
- Border-radius is near-zero: `2px` on inputs and checkboxes, `4px` on buttons and dialog controls, `9999px` only on tag badges
- Hairline rules (`{colors.border}`, `{colors.border-mid}`) as the primary content separator — no decorative fills
- Active tab states marked by a `3px solid {colors.primary}` bottom border, not background fills
- Section eyebrows set in Gibson uppercase with tracked letter-spacing — `4.8px` at 48px, `1.4px` at 14px
- Tag/badge system uses outline-only pill shapes on white, never solid fills, reinforcing the system's restraint
- Motion is 250ms with `cubic-bezier(0.4, 0, 0.2, 1)` — the Material standard easing adopted throughout

## Colors

### Primary
- **Paper White** (`{colors.background}`): The page canvas. Every reading surface — articles, poem pages, landing content — lives here. Not warm, not tinted. The same white as a poetry journal's page.
- **Warm Off-White** (`{colors.surface}`): Search inputs, form fields, the inner field of the site's search bar. A barely-there warmth that signals "this is fillable," distinct from the pure page white without asserting a surface color.

### Brand Accent
- **Cardinal Red** (`{colors.primary}`): The system's single chromatic note. Applied to primary call-to-action buttons ("Sign Up," "Subscribe"), active tab underlines, link hover states, and the active navigation indicator. Used once per surface at most — it carries the full weight of the brand's interactivity because everything else stays neutral.

### Text
- **Ink Black** (`{colors.ink}`): All body text, major headlines, primary navigation, and default link color.
- **Medium Gray** (`{colors.ink-muted}`): Secondary text — bylines, tag labels, muted navigation items, sub-captions. Sits between ink and hairline without reading as disabled.

### Borders & Surfaces
- **Hairline Gray** (`{colors.border}`): Card top borders, content dividers, tag outlines. The system's structural rule — used throughout to separate feed items and signal boundaries without weight.
- **Slate Border** (`{colors.border-mid}`): Tab panel and image frame borders. Slightly warmer than the pure hairline, distinguishing interactive structure from content division.
- **Form Ring** (`{colors.border-strong}`): The inset ring shadow on search inputs — a tactile indicator of the input boundary without a hard border declaration.
- **Shadow Base** (`{colors.shadow-soft}`): Used in the soft multi-layer elevation for dropdowns and form inputs.

### Interaction States
- **Hover Text** (`{colors.text-hover}`): The red color applied to link hover states — every text link in the system turns cardinal on hover.
- **Focus Ring** (`{colors.focus-ring}`): A hard black outline on focused interactive elements — accessibility maintained with contrast rather than glow.

## Typography

### Font Family
- **Editorial / Body**: `adobe-garamond-pro`, with fallbacks: `EB Garamond, Garamond, Baskerville, Baskerville Old Face, Hoefler Text, Times New Roman, serif`
- **UI / Chrome**: `canada-type-gibson`, with fallbacks: `Gill Sans, Gill Sans MT, Calibri, sans-serif`
- **Loading source**: Self-hosted (verified — `selfHostedFonts: ["Gibson-Regular.woff2", "Gibson-SemiBold.woff2", "Gibson-Bold.woff2", "agaramondpro-bold-webfont.woff2", "agaramondpro-regular-webfont.woff2", "agaramondpro-italic-webfont.woff2"]`). No Google Fonts, no Adobe Fonts CDN.
- **For external implementation**: EB Garamond (Google Fonts) approximates Adobe Garamond Pro; Nunito or Raleway approximate Gibson's humanist sans warmth.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Primary editorial headlines — article titles, poem titles at feature scale, 50px Garamond weight 700 |
| `display` | Section lead headings, major module titles — 44px Gibson weight 600 |
| `heading-section` | Navigation section banners, uppercase department heads — 48px Gibson semibold with 4.8px tracking |
| `heading-sub` | Sub-article headings, secondary content heads — 30px Garamond weight 700 |
| `heading-ui` | Navigation-level module labels, sub-section headings — 28px Gibson semibold |
| `body-large` | Article leads, pull quotes, poem display at reading size — 22px Garamond regular |
| `body` | Standard reading column body — 20px Garamond regular, line-height 1.5 |
| `nav-link` | Navigation links, section switcher tabs — 17px Gibson semibold |
| `button-ui` | Button labels, CTA text — 17px Gibson semibold |
| `label-upper` | Eyebrow labels, section category tags, meta — 14px Gibson semibold uppercase, 1.4px tracking |
| `caption` | Image credits, micro UI labels — 12px Gibson medium uppercase, 0.78px tracking |

### Principles
- **Two-typeface discipline**: Garamond for every word a reader will read at length; Gibson for every label, button, and structural chrome element. The boundary never blurs.
- **Garamond carries the authority**: At weight 700 the old-style serif reads with the cultural weight of the literary tradition — Dante, Montaigne, the sixteenth-century printer. It is the typographic argument that poetry deserves this much care.
- **Gibson tracks wider at smaller sizes**: The sans is most legible when given air — label-upper at 14px carries 1.4px tracking, caption at 12px carries 0.78px. This is the classic solution for humanist sans at small sizes: loosen the spacing rather than switch the face.
- **No italic Garamond in the system's chrome**: Italic Garamond belongs to poem text — the line breaks and the title treatment — not to the site's navigation or labels.
- **Reading body stays at 20–22px**: The Foundation presents poetry on screen. Garamond at 20px is large enough for careful reading at arm's length; 22px body-large for leads acknowledges that opening paragraphs need a degree more presence.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The Poetry Foundation's spacing is generous by editorial standards. The 160px value observed at the far end of the scale indicates section-level breathing room — major content blocks are separated by significant vertical air, reflecting the same white-margin philosophy that governs poem layout on a printed page. Component-level gaps are measured in the 8–24px range; section-level rhythm starts at 40–64px.

### Grid & Container
- Max content width: approximately 1280px (the largest breakpoint observed)
- Content column: implied at ~720–960px for editorial reading content
- Homepage: mixed-column grid — a prominent featured poem area, tabbed content explorers, and stacked article cards
- Tab panels separated by right-edge `1px solid {colors.border-mid}` rules for clear column delineation
- Full-width hero areas alternate with contained column layouts for section variety

### Whitespace Philosophy
- **Margin as meaning**: Whitespace is not filler — it is the equivalent of the page margin in a poetry collection. Content modules have substantial vertical separation.
- **Top-border separation**: Article cards use `border-top: 1px solid {colors.border}` as the divider rather than gap or shadow — the hairline rule signals where one card ends and another begins without adding visual weight.
- **Forms are intentionally minimal**: Search inputs use the warm off-white surface (`{colors.surface}`) and an inset ring shadow rather than a visible outer border — the field is defined by its tonal difference from the page and the ring, not by a hard line.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, article content, editorial cards at rest |
| Hairline (Level 1) | `1px solid {colors.border}` | Card top borders, feed dividers, section separators |
| Form Ring (Level 2) | `inset 0 0 0 1px {colors.border-strong}` + `0 1px 2px rgba(0,0,0,0.05)` | Search input, text fields — inset ring signals the input boundary |
| Dropdown/Dialog (Level 3) | `3px 3px 7.6px 0.4px rgba(0,0,0,0.22)` | Dropdown menus, modal overlays, floating components |
| Focus Ring | `3px solid {colors.focus-ring}` (outline) | Keyboard-focused interactive elements |

**Shadow Philosophy**: The Poetry Foundation's elevation system is nearly flat. Content cards, article feeds, and navigation live without shadow. The two active shadow recipes belong to form inputs (the inset ring, which signals fillability) and floating UI elements (dropdown menus and dialogs, which use a soft three-pixel blur to lift above the page). This is not a flat-first dogma so much as an editorial disposition: the poetry should be the most present thing on the page, not the chrome around it.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Article cards, editorial containers, image frames |
| `sm` | 2px | Inputs, checkboxes — the minimum rounding that prevents strict sharpness |
| `md` | 4px | Buttons ("Sign Up"), dialog close controls, pagination controls |
| `pill` | 9999px | Tag / badge chips — the single use of full rounding in the system |

The system is functionally binary: editorial content is sharp, interactive elements have 2–4px rounding, and badges alone reach pill form. The 16px rounded value observed on a single rare button is an outlier — the primary rounding vocabulary is `2px`, `4px`, `9999px`.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.badge}`, etc.) rather than reconstructing individual values.

### Button Variants

- **`button-primary`** — Cardinal red fill (`{colors.primary}`) with white Gibson semibold 17px label. Padding `11px 23px` with 4px radius. The dominant CTA across the site — "Sign Up," "Subscribe," newsletter enrollment. Hover: background shifts to `{colors.ink}`.
- **`button-secondary`** — White fill with `{colors.primary}` border and red label text. Presents a quieter CTA alternative on panels where the primary red fill would dominate.
- **`button-secondary-hover`** — Red fill on hover, mirrors primary — the two states feel like one coherent toggle.

### Cards

Article and poem cards use `border-top: 1px solid {colors.border}` on a white background with `0px` radius. The card is not a container — it is a rule and the content beneath it. Padding is `24px 0` (vertical only, content is full-width within its column). No shadow, no background tint, no rounded corners.

### Inputs

The search field uses `{colors.surface}` (warm off-white) as its background, `0px` border-radius (flush field), and an inset box-shadow ring for boundary definition. Padding `6px 10px`. The form field reads as a warm trough set into the page rather than a raised rectangle on top of it.

### Badges / Tags

Outline-only pill badges (`{rounded.pill}`, `{colors.border}`, `{colors.ink-muted}` text) on a transparent background. No fill. A poem category tag ("Nature," "Loss," "War") reads as a label clipped from the editorial lexicon — it sits on the page, it does not assert itself from a colored surface.

### Navigation

The main navigation uses `{typography.nav-link}` (17px Gibson semibold) for section links in `{colors.ink}`, transitioning to `{colors.text-hover}` on hover. The tab explorer below the masthead uses `3px solid {colors.primary}` bottom borders for active state — the only place in the system where the accent red appears as a structural line rather than a fill. Section eyebrows are Gibson uppercase with tracked spacing.

## Do's and Don'ts

### Do
- Use Adobe Garamond Pro (or EB Garamond as substitute) for all editorial type — article titles, body text, poem headings, sub-headings
- Use Canada Type Gibson for all UI chrome — navigation, buttons, labels, tags, captions
- Set Gibson labels at small sizes with explicit positive letter-spacing: `1.4px` at 14px, `0.78px` at 12px
- Apply `{colors.primary}` cardinal red only to CTAs, active tab indicators, and link hover states — once per surface
- Default `border-radius` to `{rounded.none}` for editorial containers, cards, and article frames
- Use `{rounded.md}` (4px) for buttons and dialog controls; `{rounded.pill}` only for tag/badge chips
- Use `border-top: 1px solid {colors.border}` as the primary card separator — not shadow, not spacing gap alone
- Use the warm off-white `{colors.surface}` for all text input fields to signal fillability distinct from the page canvas
- Maintain generous vertical spacing — section breaks belong in the 40–64px range minimum
- Use `{colors.ink-muted}` for secondary metadata (bylines, dates, tag labels) rather than pure black

### Don't
- Don't use Garamond for navigation, button labels, or category eyebrows — Gibson owns all chrome
- Don't use Gibson for article body, poem text, or reading-level headlines — Garamond owns all reading content
- Don't introduce a third typeface — the two-voice contract is the entire system
- Don't add gradients or decorative fills — the palette is white, black, warm gray, and one red
- Don't use `{colors.primary}` as a background tint, section fill, or decorative stripe — it belongs only to interactive moments
- Don't soften the cardinal red toward a lighter or warmer pink — `{colors.primary}` at full saturation or not at all
- Don't set Gibson labels at small sizes without tracking — 14px or smaller needs `letter-spacing: 1.4px`
- Don't round editorial image frames or article cards — `{rounded.none}` is the editorial default
- Don't use drop shadows on content cards — the hairline top border is the system's separation device
- Don't use uppercase Garamond — the serif stays sentence case; uppercasing belongs to Gibson only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column, stacked navigation, body text maintained at 20px Garamond |
| Mobile | 480–667px | Single column, headline scales back, tag row wraps |
| Tablet | 668–1023px | Two-column content grid, navigation shifts |
| Desktop | 1024–1279px | Full grid, tab explorer expands, multi-column poem/article feeds |
| Large Desktop | ≥1280px | Container max-width engaged, widest section spacing |

### Touch Targets
- Primary buttons: 44px minimum tap height via `11px` top/bottom padding on 17px text
- Navigation links: generous vertical padding in mobile drawer for 44px zones
- Tag chips: tappable pill buttons with visible padding on both axes

### Collapsing Strategy
- **Navigation**: Horizontal nav collapses to hamburger icon below tablet breakpoint; mobile drawer expands to full section list
- **Tab Explorer**: The poem/article tabbed explorer collapses from multi-panel to single stacked column; tab strip scrolls horizontally
- **Feed Grid**: Multi-column article card feeds collapse to single column; `border-top` card separators persist at all widths
- **Headlines**: Garamond display scales from 50px at desktop toward lower sizes on mobile — line-height maintained at 1.23
- **Spacing**: Section vertical margins compress from 64–160px at desktop toward 40–64px on mobile

### Image Behavior
- Photography and poem imagery is responsive within its column container
- Images in article cards stay within the content column — no art-direction breakouts
- Image borders (`1px solid {colors.border-mid}`) persist across breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Body Text: `{colors.ink}`
- Secondary Text: `{colors.ink-muted}`
- Brand Accent / CTA: `{colors.primary}`
- Hover Text: `{colors.text-hover}`
- Border / Divider: `{colors.border}`
- Form Field Surface: `{colors.surface}`
- Focus Ring: `{colors.focus-ring}`

### Example Component Prompts

- "Create a Poetry Foundation–style article card on `{colors.background}`. `border-top: 1px solid {colors.border}`, `0px` radius, `24px 0` padding. Above the title: 14px Canada Type Gibson semibold uppercase letter-spacing 1.4px in `{colors.ink-muted}` (section label). Title: 30px Adobe Garamond Pro weight 700 line-height 1.23 in `{colors.ink}`. Body: 20px Adobe Garamond Pro weight 400 line-height 1.5 in `{colors.ink}`. No shadow, no background tint."
- "Design a primary CTA button: `{colors.primary}` background, `{colors.on-primary}` text, 17px Canada Type Gibson semibold, `{rounded.md}` (4px) radius, padding `11px 23px`, `1px solid {colors.primary}` border. Hover: background and border shift to `{colors.ink}`, text stays white. Transition: 250ms cubic-bezier(0.4, 0, 0.2, 1)."
- "Build a navigation tab strip: horizontal row of 17px Gibson semibold links in `{colors.ink}`, `0px` radius, no background fills. Active tab: `3px solid {colors.primary}` bottom border. Hover: text shifts to `{colors.text-hover}`. Inactive separator panels: `1px solid {colors.border-mid}` right border between columns."
- "Create a poem tag/badge chip: transparent background, `1px solid {colors.border}` outline, `{rounded.pill}` radius, `5px 11px` padding, 14px Canada Type Gibson weight 400 in `{colors.ink-muted}`, letter-spacing 0.21px. Hover: background shifts to `{colors.surface-elevated}`."
- "Design a search input field: `{colors.surface}` background, `0px` border-radius, `6px 10px` padding, 16px Adobe Garamond Pro weight 400 in `{colors.ink}`. No hard outer border — use `box-shadow: inset 0 0 0 1px {colors.border-strong}, 0 1px 2px rgba(0,0,0,0.05)` for the field ring. Focus: `outline: 3px solid {colors.focus-ring}` at 0 offset."
- "Build a poem feature hero: `{colors.background}` canvas, no decorative fills. Eyebrow: 14px Gibson semibold uppercase letter-spacing 1.4px in `{colors.primary}`. Poem title at 50px Adobe Garamond Pro weight 700 line-height 1.23 in `{colors.ink}`. Opening lines: 22px Garamond regular line-height 1.5 in `{colors.ink}`. Generous vertical margin above and below — 64–80px. No shadow, no tint."

### Iteration Guide

1. Start with `{colors.background}` pure white canvas. Every reading surface is this color — no warm panels, no tinted section backgrounds except `{colors.surface}` for form fields only.
2. All editorial type — titles, body, poem text — goes in Adobe Garamond Pro. Gibson never touches a reading column.
3. All interface chrome — nav, buttons, labels, tags, captions — goes in Canada Type Gibson. Garamond never appears in a button or eyebrow.
4. Gibson at 14px and smaller needs positive letter-spacing: `1.4px` for `{typography.label-upper}`, `0.78px` for `{typography.caption}`.
5. `{colors.primary}` cardinal red is the sole interactive color. Apply it to: CTA button fill, active tab underline (3px bottom border), and link hover text. Nowhere else.
6. Content cards separate with `border-top: 1px solid {colors.border}` — never shadow, never background alternation.
7. Radius is nearly absent: `{rounded.none}` for editorial frames, `{rounded.md}` (4px) for buttons and controls, `{rounded.pill}` only for tag chips.
8. Motion is 250ms `cubic-bezier(0.4, 0, 0.2, 1)` on color, background-color, and border-color transitions — consistent across buttons, links, and tabs.
9. Section vertical spacing is generous — 40px minimum, 64–160px for major section breaks. The whitespace is load-bearing.
10. Shadows exist only on floating UI (dropdowns, dialogs) and form field inset rings — never on content cards or editorial containers.

---

## 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 Poetry Foundation. Brand names and trademarks belong to their respective owners.