DESIGN.md inspired by Pinterest

---
name: Pinterest
tagline: Masonry feed as product, restrained chrome around it — white canvas, near-black text, Pinterest red reserved for action.
updated_at: 2026-05-28T11:00:00+12:00
published_at: 2026-05-28T11:00:00+12:00
author: webdesignhot
source_url: https://www.pinterest.com
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [social, media]
tags: [light, minimal, sans, grid, image-first, masonry, mobile-first]
preview_swatch: ['#ffffff', '#e60023', '#000000']
related: [are-na, instagram-not-yet, tldraw]
description: 'Pinterest is the masonry feed perfected — a near-white `#fff` canvas, plain `#000` text, restrained sans-serif chrome that gets out of the way of images, and a single `#e60023` red ("Pushpin") reserved for primary actions and brand moments. The product is the feed: 2-6 column masonry of image cards at 12px radius, hover-reveal save buttons, ellipsis-driven secondary actions, and tonal grayscale chrome (`#62625b` subtle text, `#e5e5e0` hairline borders) so the chromatic load lives entirely in the images. Typography runs on a custom variable font ("Pin Sans") with a Helvetica-class system stack as fallback. The visual lineage runs through the literal pin metaphor (Polaroid + cork-board scrapbooks), parallel-evolved with Tumblr''s pre-collapse masonry feeds, and disciplined by Material Design''s tonal-container restraint — the chrome recedes so the images carry the page.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  muted: text-subtle
  border: border
  ring: border-strong

colors:
  # Canvas + surface
  bg: '#ffffff'                  # the canvas; full white
  surface: '#ffffff'              # card surface = canvas (cards distinguished by hairline + shadow, not fill)
  surface-elevated: '#fbfbf9'     # near-white tint for modals / nav drawers (grayscale-25)
  surface-wash: '#f6f6f3'         # softer panel wash for empty states / drawer bg (grayscale-50)

  # Text
  text: '#000000'                 # primary text — near pure black
  text-subtle: '#62625b'          # secondary text, meta lines (grayscale-300)
  text-faint: '#91918c'           # disabled / tertiary (grayscale-200)
  text-muted: '#62625b'           # alias of subtle

  # Brand — the single chromatic anchor in chrome
  brand: '#e60023'                # Pushpin red — primary CTA, brand moments
  brand-hover: '#cc001f'          # CTA hover state
  brand-pressed: '#b2001b'        # CTA pressed state
  on-brand: '#ffffff'             # white text on red CTA

  # Borders — hairline grayscale
  border: '#e5e5e0'               # default hairline divider (grayscale-100)
  border-soft: '#f6f6f3'          # softest separation (grayscale-50)
  border-strong: '#c8c8c1'        # emphasis border (grayscale-150)

  # Semantic states
  success: '#097239'              # subdued forest green
  success-bg: '#e3f7ec'           # success surface
  warning: '#b24700'              # restrained orange
  warning-bg: '#ffede0'           # warning surface
  danger: '#b60c0c'               # restrained brick
  danger-bg: '#ffebeb'            # danger surface
  info: '#62625b'                 # info reuses subtle gray (no blue)
  info-bg: '#f6f6f3'              # info surface

typography:
  display:
    family: '"Pin Sans", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif'
    weights: [400, 500, 700]
    opentype-features: ['kern']
  body:
    family: '"Pin Sans", -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif'
    weights: [400, 500, 700]
    opentype-features: ['kern']
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Courier New", monospace'
    weights: [400, 500]
  scale:
    display-hero:   { size: 72, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    display-lg:     { size: 60, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    display:        { size: 48, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    display-sm:     { size: 36, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    h1:             { size: 36, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    h2:             { size: 28, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    h3:             { size: 24, weight: 700, lineHeight: 1.1,  tracking: '-0.5px',   family: display }
    h4:             { size: 20, weight: 700, lineHeight: 1.2,  tracking: '0',        family: display }
    h5:             { size: 16, weight: 700, lineHeight: 1.4,  tracking: '0',        family: display }
    h6:             { size: 14, weight: 700, lineHeight: 1.4,  tracking: '0',        family: display }
    body-large:     { size: 20, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    body:           { size: 16, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    body-small:     { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    ui:             { size: 14, weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    ui-large:       { size: 16, weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    label:          { size: 12, weight: 500, lineHeight: 1.2,  tracking: '0',        family: body }
    caption:        { size: 12, weight: 400, lineHeight: 1.4,  tracking: '0',        family: body }
    code-inline:    { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

radius:
  micro: 0
  xs: 4
  sm: 6
  md: 8
  lg: 12         # the card default — Pinterest's signature soft-rounded image card
  xl: 16
  '2xl': 20
  '3xl': 24
  '4xl': 28
  '5xl': 32
  pill: 999
  circle: '50%'

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80]

shadow:
  none: '0px 0px 0px 0px hsla(0,0%,100%,0)'
  surface: '0px 0.5px 3px 0px rgba(0,0,0,0.2)'        # subtle card lift on hover
  raised: '0px 1.5px 6px 0px rgba(0,0,0,0.2)'         # popovers, dropdowns
  floating: '0px 3px 12px 0px rgba(0,0,0,0.2)'        # modals, save-board sheets

layout:
  page-width: 1440
  prose-width: 720
  feed-min-column-width: 200
  feed-max-columns: 6
  header-height: 80
  mobile-bottom-nav-height: 60

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-out: 'cubic-bezier(0, 0, 0.2, 1)'
  ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
  duration-fast: 150         # hover lift, button press, micro-state
  duration-standard: 240     # card expand, dropdown open
  duration-slow: 320         # modal enter, sheet slide
  reduced-motion: 'respects prefers-reduced-motion: reduce'

breakpoints:
  sm: 640
  md: 768
  lg: 1024
  xl: 1280
  '2xl': 1440

components:
  button-primary:    { bg: brand, text: on-brand, padding: '12px 16px', radius: pill, font: ui, weight: 700 }
  button-primary-sm: { bg: brand, text: on-brand, padding: '8px 12px', radius: pill, font: ui, weight: 700 }
  button-secondary:  { bg: surface-wash, text: text, padding: '12px 16px', radius: pill, font: ui, weight: 700 }
  button-ghost:      { bg: transparent, text: text, padding: '12px 16px', radius: pill, font: ui, weight: 700 }
  card:              { bg: surface, radius: lg, shadow: surface, padding: 0 }
  pin-card:          { bg: surface, radius: lg, shadow: surface-on-hover, padding: 0, aspect: variable }
  search-input:      { bg: surface-wash, text: text, padding: '12px 16px 12px 44px', radius: pill, font: ui-large }
  avatar:            { radius: circle, size: 40 }
  badge:             { bg: surface-wash, text: text, padding: '4px 10px', radius: pill, font: label, weight: 500 }
  modal:             { bg: surface, radius: xl, shadow: floating, padding: 24 }

lineage:
  summary: |
    Pinterest's visual lineage runs through three traditions: the literal **pin-up wall** (Polaroid prints, cork-board scrapbooks, mood boards) where the page is a tactile collection; **Tumblr's pre-collapse masonry feed** (2010-2013) which Pinterest's product directly references; and **Material Design's tonal restraint** (post-2018) — neutral grayscale chrome, tonal containers in place of heavy shadows, a single chromatic accent. The custom "Pin Sans" variable font is a Helvetica-class commercial sans tuned for image-adjacent typography (renders cleanly at 12px label sizes next to dense photo content). The single `#e60023` red, called "Pushpin" internally, is the chromatic anchor in an otherwise grayscale chrome — used for primary CTAs, brand moments, and the literal pin icon. Where Instagram chose square crop and overlaid stories, Pinterest chose variable-height masonry and persistent boards. Where Material went on-surface tonal, Pinterest kept pure white canvas. The synthesis is a feed-first product where chrome recedes and images carry every chromatic moment.
  influences:
    - name: Tumblr
      role: Variable-height image-card feeds; pre-collapse masonry navigation pattern.
      url: https://www.tumblr.com
    - name: Material Design
      role: Tonal containers, restrained shadows, neutral grayscale chrome with single chromatic accent.
      url: https://m3.material.io
    - name: Instagram
      role: Image-first social feed; mobile-first interaction patterns, parallel-evolved.
      url: https://www.instagram.com
    - name: Polaroid scrapbooks
      role: The literal pin metaphor — a page is a wall of collected images, tactile-editorial register.
      url: https://www.polaroid.com
    - name: Helvetica
      role: Image-adjacent typography that disappears next to photo content. Pin Sans descends from this Helvetica-class lineage.
      url: https://en.wikipedia.org/wiki/Helvetica
---


## 1. Visual Theme & Atmosphere

Pinterest is a **feed-as-product**. The masonry grid of variable-height image cards is the entire interface; everything else — top nav, search, save buttons, board sheets — is chrome whose only job is to get out of the way and let the images carry the page. The atmospheric register is **tactile-editorial**: a near-white `#ffffff` canvas, near-black `#000000` text, hairline grayscale dividers, and a single saturated red (`#e60023` — Pushpin) reserved for action surfaces and brand moments.

The page reads as a moodboard. Cards have soft 12-16px corners, sit on the canvas with the lightest possible shadow (`0px 0.5px 3px rgba(0,0,0,0.2)` — almost invisible until hover), and stack 2-6 columns wide depending on viewport. There are no big drop shadows, no gradient backgrounds, no chromatic chrome competing with image content. The discipline is **tonal restraint**: chromatic load is in the images, not in the UI.

Typography runs on **Pin Sans**, Pinterest's custom variable sans built for image-adjacent reading. Headings hold weight 700 at sizes 14-72px with tight `-0.5px` letter-spacing, optimized to render legibly next to dense photo content. Body type stays at weight 400, 14-16px, with the standard 1.5 line-height. There is no serif. There is no display script. Type is utility; the images do the visual work.

Interaction patterns are **discovery-first**: a pill-shape search input dominates the header, hover on a pin reveals a red **Save** button + ellipsis menu, click expands into a detail sheet with related pins below. The bottom of the mobile interface carries a 60px-tall persistent nav with home / search / create / notifications / profile — never a hamburger, never a drawer. Mobile is the primary surface: 65%+ of Pinterest's traffic is mobile, and the desktop feed is essentially the mobile feed widened.

**Key Characteristics:**

- Pure white canvas (`#ffffff`) — no off-white tint, no warm cream
- Single chromatic anchor — Pushpin red `#e60023`, used positionally not decoratively
- Masonry grid as primary product surface (2-6 columns, variable card heights)
- Soft-rounded image cards (12px standard, 16px elevated)
- Custom variable sans (Pin Sans) for all type — no serif, no script
- Tonal grayscale chrome — subtle text `#62625b`, hairline borders `#e5e5e0`
- Light shadows only — `0px 0.5px 3px rgba(0,0,0,0.2)` floor, `0px 3px 12px` ceiling
- Pill-shape CTAs — buttons go full 999px radius, never sharp corners
- Hover reveals action — Save button + ellipsis appear on pin hover, not always-visible
- Mobile-first interaction — bottom nav, large tap targets, swipe-friendly

## 2. Color Palette & Roles

### Canvas & Surface

- **bg** `#ffffff` [→ `--sema-color-background-default`]: the page canvas, full white
- **surface** `#ffffff`: card surface = canvas (cards distinguished by hairline + soft shadow, not fill)
- **surface-elevated** `#fbfbf9` [→ `--base-color-grayscale-25`]: modal / nav drawer bg
- **surface-wash** `#f6f6f3` [→ `--base-color-grayscale-50`]: empty-state wash, ghost-button bg

### Text

- **text** `#000000` [→ `--sema-color-text-default`]: primary copy, near pure black
- **text-subtle** `#62625b` [→ `--sema-color-text-subtle`, `--base-color-grayscale-300`]: meta lines, secondary text, captions
- **text-faint** `#91918c` [→ `--base-color-grayscale-200`]: disabled, tertiary

### Brand — The Single Chromatic Anchor

- **brand** `#e60023` [→ `--sema-color-background-primary`, internal name "Pushpin"]: primary CTA, brand moments, the pin icon
- **brand-hover** `#cc001f`: CTA hover state — slightly darker red
- **brand-pressed** `#b2001b`: CTA pressed state — darker still
- **on-brand** `#ffffff`: white text on red CTA

### Borders — Hairline Grayscale

- **border** `#e5e5e0` [→ `--base-color-grayscale-100`]: default hairline divider
- **border-soft** `#f6f6f3` [→ `--base-color-grayscale-50`]: softest separation
- **border-strong** `#c8c8c1` [→ `--base-color-grayscale-150`]: emphasis border, focus rings

### Semantic States

- **success** `#097239` [→ `--sema-color-text-success`]: confirmation text, success icon
- **success-bg** `#e3f7ec` [→ `--sema-color-background-success-weak`]: success banner background
- **warning** `#b24700` [→ `--sema-color-background-warning-default`]: warning text/icon
- **warning-bg** `#ffede0`: warning banner background
- **danger** `#b60c0c` [→ `--sema-color-text-error`]: error text/icon
- **danger-bg** `#ffebeb`: error banner background
- **info** `#62625b`: info text reuses subtle gray — Pinterest deliberately avoids blue for info
- **info-bg** `#f6f6f3`: info banner background

The discipline: **chrome is grayscale except for action**. Pushpin red is never used decoratively, never used as a wash, never used for non-interactive elements. Every red moment on the page is something the user can tap.

## 3. Typography Rules

**Font Family Chain (display + body, identical):**

```
"Pin Sans", -apple-system, "system-ui", "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
"Helvetica Neue", Helvetica, Arial, sans-serif
```

Pin Sans is Pinterest's custom variable sans-serif, served from Pinterest's CDN with `font-display: swap`. Fallback chain is Helvetica-class system stack — the visual difference is small enough that FOUT is invisible to most users.

**Hierarchy:**

| Role | Size | Weight | Line height | Tracking | Use |
|---|---|---|---|---|---|
| display-hero | 72 | 700 | 1.1 | −0.5px | Marketing pages only |
| display-lg | 60 | 700 | 1.1 | −0.5px | Marketing hero |
| display | 48 | 700 | 1.1 | −0.5px | Section opening |
| display-sm | 36 | 700 | 1.1 | −0.5px | Sub-display |
| h1 | 36 | 700 | 1.1 | −0.5px | Page title |
| h2 | 28 | 700 | 1.1 | −0.5px | Section header |
| h3 | 24 | 700 | 1.1 | −0.5px | Card title |
| h4 | 20 | 700 | 1.2 | 0 | Small section |
| h5 | 16 | 700 | 1.4 | 0 | Label-as-heading |
| h6 | 14 | 700 | 1.4 | 0 | Smallest heading |
| body-large | 20 | 400 | 1.5 | 0 | Lead paragraph |
| body | 16 | 400 | 1.5 | 0 | Standard prose |
| body-small | 14 | 400 | 1.5 | 0 | Meta, pin descriptions |
| ui | 14 | 500 | 1.2 | 0 | Button label, nav item |
| ui-large | 16 | 500 | 1.2 | 0 | Primary CTA label |
| label | 12 | 500 | 1.2 | 0 | Tag, badge, small chip |
| caption | 12 | 400 | 1.4 | 0 | Image credit, helper text |
| code-inline | 13 | 400 | 1.5 | 0 | Inline code (rare on Pinterest) |

**Principles:**

- **Weight binary**: type is either 400 (body) or 700 (headings + UI emphasis). 500 is reserved for UI labels. There is no 300 light, no 600 semibold, no 800 black.
- **No italic display** — Pinterest never uses italic for emphasis at heading sizes. Italic is reserved for inline body text quotes.
- **Tight tracking for display** — all heading sizes get `−0.5px` letter-spacing for compactness against image content.
- **No drop caps, no small caps, no editorial flourishes** — Pin Sans is utility; the images carry the visual identity.
- **Letter-spacing default 0** for body — no `0.02em` "cleaner" tracking, no `-0.01em` "tighter" tracking on body sizes.
- **Single line-height for headings (1.1)** — compact, broadsheet-like, optimized for stacking next to images.
- **Body line-height 1.5** — standard, readable, no tighter.

## 4. Component Stylings

### Buttons — Always Pill (radius 999px)

**Primary** (Save, Sign up, Next):
```
bg: #e60023 (Pushpin)
text: #ffffff (white)
padding: 12px 16px
radius: 999px (pill)
font: 14px / weight 700
hover: bg #cc001f
pressed: bg #b2001b
```

**Primary, small** (inline pin actions):
```
padding: 8px 12px
font: 12px / weight 700
(same colors as Primary)
```

**Secondary** (Cancel, secondary action):
```
bg: #f6f6f3 (surface-wash)
text: #000
padding: 12px 16px
radius: 999px (pill)
font: 14px / weight 700
hover: bg #e5e5e0
```

**Ghost / Tertiary** (toolbar buttons, low-emphasis):
```
bg: transparent
text: #000
padding: 12px 16px
radius: 999px
font: 14px / weight 700
hover: bg #f6f6f3
```

**Icon button** (heart, share, ellipsis):
```
bg: transparent (or surface-wash on hover)
icon: 24px stroke-2 line icons
size: 40×40 hit target
radius: 50% (circle)
```

### Cards — The Pin

Pinterest's defining component. Variable height (driven by image aspect), 12px corner radius, lightest-possible shadow.

```
bg: #ffffff
radius: 12px
shadow (default): 0px 0.5px 3px rgba(0,0,0,0.2)
shadow (hover):   0px 1.5px 6px rgba(0,0,0,0.2)
padding: 0 (image fills card; meta sits below outside the rounded mask)
```

On hover (desktop): Save button appears top-right, ellipsis menu appears top-right (offset), entire card lifts 0.5px → 1.5px shadow. On mobile, Save button is always visible; ellipsis hidden behind long-press.

### Inputs — Pill Search

```
bg: #f6f6f3 (surface-wash)
text: #000
placeholder: #62625b (text-subtle)
padding: 12px 16px 12px 44px (left padding for inline icon)
radius: 999px (pill)
font: 16px / weight 400
icon: 20px magnifying glass, inline left
focus: outline 2px solid #c8c8c1 (border-strong)
```

Search dominates the top nav — full-width on mobile, ~600px wide centered on desktop.

### Badges & Chips

Used for board tags, content category labels. Always pill-shaped, never rectangular.

```
bg: #f6f6f3 (surface-wash) or #e5e5e0 (border)
text: #000
padding: 4px 10px
radius: 999px
font: 12px / weight 500
```

### Avatars

```
shape: circle (radius 50%)
size: 24 / 32 / 40 / 64 (small / default / large / profile)
border: none (or 2px solid #ffffff for stacked group avatars)
fallback: initial in Pin Sans on grayscale-200 bg
```

### Navigation

**Top nav (desktop):**
- 80px tall, white bg, no border
- Logo (Pinterest red) left, search center, profile + create right
- All icon buttons 40px circular hit target

**Bottom nav (mobile):**
- 60px tall, white bg, 1px top border (`#e5e5e0`)
- 5 items: home / search / create / notifications / profile
- Active item: red text + red filled icon
- Inactive: black icon, no label (icons are 24px)

## 5. Layout Principles

### Spacing System

Base unit: **4px**. Scale: `[0, 4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 72, 80]`.

The scale is denser than most modern systems — Pinterest uses 4-unit increments rather than 8-unit jumps to give the masonry grid more spacing control between pins.

**Common pairings:**
- Card gap in feed: 16px
- Padding inside meta strip below pin: 8px / 12px
- Section between feed sections: 24px / 32px
- Page padding on desktop: 24px (16px on mobile)

### Grid & Container

- Max page width: **1440px** centered with 24px horizontal padding
- Prose pages (about, help, blog): **720px** centered
- Feed: full-width masonry, columns calculated from viewport width with `feed-min-column-width: 200px` and `feed-max-columns: 6`
  - <640px: 2 columns
  - 640-1024px: 3 columns
  - 1024-1280px: 4 columns
  - 1280-1440px: 5 columns
  - 1440px+: 6 columns

### Whitespace Philosophy

- **Tight between pins** — 16px column gap, 16px row gap — pins are the content; space between them is the cork-board void.
- **Generous around chrome** — 24-32px padding around major sections (header, footer, modals).
- **No artificial breathing room** in feed — Pinterest is denser than Instagram. Variable card heights mean visual rhythm comes from image aspect, not from spacing.

### Section Cadence

Marketing pages (rare; Pinterest is mostly product chrome):

- Hero: 72px display, 16px tagline, primary CTA, 80-128px top padding
- Section gap: 64-96px between marketing sections
- Section heading: 28-36px h2 with 24px tagline below

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|---|---|---|
| micro | 0px | Sharp corners (rare — used only for fullbleed image edges) |
| xs | 4px | Smallest containers (chips, hairline strips) |
| sm | 6px | Small badges |
| md | 8px | Inputs (when not pill), small cards |
| **lg** | **12px** | **The Pin card default — Pinterest's signature** |
| xl | 16px | Modals, large cards |
| 2xl | 20px | Hero cards in detail view |
| 3xl | 24px | Sheet headers |
| 4xl | 28px | Large modal corners |
| 5xl | 32px | Marketing-page hero containers |
| pill | 999px | All buttons, search input, badges, tags |
| circle | 50% | Avatars, icon buttons |

The **12px card radius** is the most identifying shape token in Pinterest's system. It's soft enough to feel friendly (vs Twitter's 16px or Instagram's 8px) but not so soft it feels child-targeted (vs Discord's 16-24px). Combined with the lightest-possible shadow, it produces the "card floating slightly above paper" feeling that's distinctly Pinterest.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| none | `0px 0px 0px 0px hsla(0,0%,100%,0)` | Default: no shadow |
| surface | `0px 0.5px 3px 0px rgba(0,0,0,0.2)` | Pin card at rest, subtle lift |
| raised | `0px 1.5px 6px 0px rgba(0,0,0,0.2)` | Pin card on hover, dropdowns, popovers |
| floating | `0px 3px 12px 0px rgba(0,0,0,0.2)` | Modals, save-board sheets, mobile bottom-sheets |

**Shadow Philosophy:**

Pinterest's shadows are **deliberately subtle** — even the heaviest (`floating`) is `0px 3px 12px` at 20% black, lighter than most modern systems. The intent is that cards feel like they're _almost_ flat — sitting on the canvas with the lightest possible separation. The hover state (surface → raised) is the entire interaction story for depth; no large shadow appears unless something is actively floating (modals, sheets).

There is **no inset shadow** anywhere in Pinterest's system. No emboss, no "pressed in" treatment. Pressed states are color-only (`brand` → `brand-pressed`).

## 8. Interaction & Motion

### Easing Curves

- **standard** `cubic-bezier(0.4, 0, 0.2, 1)` — default for entering and exiting (Material-aligned)
- **out** `cubic-bezier(0, 0, 0.2, 1)` — for entering (settling)
- **emphasized** `cubic-bezier(0.2, 0, 0, 1)` — for assertive transitions (save confirmation)

### Duration Buckets

- **fast** 150ms — hover state, button press, micro-toggles
- **standard** 240ms — card lift, dropdown open, pin expand-in-place
- **slow** 320ms — modal enter, mobile bottom-sheet slide, save-board reveal

### Per-Component Motion

- **Pin card hover**: 150ms shadow surface → raised, no transform, no color shift
- **Save button reveal**: 150ms fade-in from 0 → 1 opacity on hover
- **Modal enter**: 240ms scale 0.96 → 1.0 + opacity 0 → 1, easing standard
- **Bottom-sheet (mobile)**: 320ms translateY 100% → 0, easing emphasized
- **Search expand**: 240ms width 200px → full, easing standard
- **Heart/Save confirmation**: 240ms scale 1 → 1.2 → 1 ("pop"), easing emphasized

### Page Transitions

Pinterest does NOT do page transitions. Navigation is instant client-side route swap with no fade/slide between feeds. The motion budget lives entirely inside individual components.

### Reduced Motion

`@media (prefers-reduced-motion: reduce)` collapses all durations to 0ms or 50ms minimum. Animations are replaced with instant state changes. The "Save" confirmation pop animation is replaced with a static color flash.

## 9. Accessibility & A11y

### Contrast Pairs (computed against the design system tokens)

- `text` (#000) on `bg` (#ffffff): **21:1** — AAA
- `text-subtle` (#62625b) on `bg` (#ffffff): **6.43:1** — AAA for normal text
- `on-brand` (#ffffff) on `brand` (#e60023): **4.92:1** — AA for normal text, AAA for large
- `text` (#000) on `surface-wash` (#f6f6f3): **19.2:1** — AAA
- `text` (#000) on `success-bg` (#e3f7ec): **18.4:1** — AAA
- `text` (#000) on `danger-bg` (#ffebeb): **18.7:1** — AAA

### Focus Indicators

- Default focus ring: 2px solid `#c8c8c1` (border-strong), 2px offset
- Brand-action focus ring: 2px solid `#435ee5` (blue, contrasts against red CTA so it's visible on hover-red state)
- Focus ring is **always visible** when keyboard navigation is detected (Pinterest uses focus-visible polyfill)

### ARIA Patterns

- Pin cards: `<article role="article" aria-labelledby="...">` with the title id'd
- Save button: `<button aria-label="Save Pin" aria-pressed="false">` toggles `aria-pressed`
- Search: `<form role="search">` wrapping the input, `<input aria-label="Search Pinterest">`
- Modal: `<div role="dialog" aria-modal="true" aria-labelledby="...">`, focus trapped inside, ESC closes
- Bottom nav (mobile): `<nav aria-label="Main">` with `<a aria-current="page">` for active item

### Keyboard Navigation

- Tab order follows visual order: top nav → search → feed (left-to-right, top-to-bottom) → footer
- Pin card: Enter opens detail, Space toggles Save (when focused)
- Save button: Enter or Space toggles
- Modal: ESC closes, Tab cycles inside trap, Shift+Tab reverses
- Search: ⌘K (Cmd+K) / Ctrl+K opens search globally (rare in social apps)

### Screen Reader Hints

- Pin images have descriptive alt text from the original pinner's caption + AI-augmented for missing captions
- Loading states announce via `aria-live="polite"` ("Loading more pins…")
- Save confirmation announces via `aria-live="assertive"` ("Saved to [board name]")

### Reduced Motion

See §8. Fully respected via `prefers-reduced-motion: reduce`.

## 10. Responsive Behavior

### Breakpoints

| Name | Min width | Use |
|---|---|---|
| sm | 640px | Two-column feed, bottom nav still visible |
| md | 768px | Three-column feed, sidebar emerges in some flows |
| lg | 1024px | Four-column feed, top nav adds secondary actions |
| xl | 1280px | Five-column feed |
| 2xl | 1440px | Six-column feed, max page width hit |

### Touch Targets

All tappable elements are **minimum 40×40px** on mobile (Pinterest exceeds the 44px Apple guideline for icon buttons by using 40px hit areas with sub-icons). Pill buttons have 44px height when padding is included.

### Per-Component Mobile Behavior

- **Top nav**: collapses to logo + profile only on <640px; search becomes a tap-to-expand icon
- **Pin card**: corners stay at 12px (not larger) — mobile doesn't go more rounded
- **Hover-reveal Save button**: replaced with always-visible Save on mobile (no hover state)
- **Modal**: becomes a bottom-sheet on mobile (slides up from bottom, takes 100% width)
- **Search results**: full-width on mobile, 2-3 columns instead of 5-6

### Image Behavior

- Pins use **native variable aspect ratios** — Pinterest does not force a 1:1 or 16:9 crop. The card's height matches the image's aspect.
- Mobile images load at viewport width / 2 (for 2-column feed), with `loading="lazy"` below the fold
- WebP served when supported, with JPEG fallback
- LCP image (top of feed) is preloaded via `<link rel="preload" as="image">`

### Container Queries

Pinterest uses container queries for the pin card meta strip (title + avatar + save button) — collapses to icon-only when the card is narrow (~150px wide).

## 11. Content & Voice

**Tone**: friendly-utility. Pinterest's voice is warm but never cute, helpful but never instructional. The product does most of the talking; UI copy is short, second-person, declarative.

**Microcopy Patterns:**

- CTAs: imperative verbs — "Save", "Sign up", "Continue", "See more"
- Empty states: "No pins yet. Try searching for something you love."
- Loading: "Loading more ideas…" (Pinterest avoids "Loading…" alone — adds the noun)
- Saved confirmation: "Saved to [board name]" — never just "Saved"
- Errors: "Something went wrong. Try again?" — never blame the user, always offer the next step

**CTA Verb Conventions:**

- **Save** (the brand verb) — adds to a board
- **Sign up** (not "Register", not "Join", not "Create account")
- **Continue** (next step in a flow)
- **See more** (load more results)
- **Send** (DM or share)
- **Done** (close a modal after action)

**Tone-of-voice anchors:**

- Helpful, not preachy
- Concrete, not abstract
- Encouraging, not flattering
- Calm, not breathless

## 12. Dark Mode & Theming

Pinterest **does not ship a true dark mode** on web. The product is white-canvas only, in keeping with the moodboard / scrapbook lineage where photo content reads best against neutral light surfaces.

On iOS the native app provides a system-following dark variant (different from web), but the web product is single-theme. This is a deliberate brand choice — image-driven content has historically been judged easier to scan on light backgrounds.

If you're building a Pinterest-flavored UI and need a dark mode pairing, the convention from iOS is:

```
bg-dark:        '#000000'      # full black canvas
surface-dark:   '#181816'      # near-black card surface (grayscale-450 inverted)
text-dark:      '#efefeb'      # near-white primary text
text-subtle-dark: '#91918c'    # grayscale-200 — same as light mode
border-dark:    '#33332e'      # grayscale-400
brand-dark:     '#e60023'      # brand red stays — works on both canvases
```

But the web product itself: white-only. Don't ship a dark variant if you're cloning Pinterest's web feel.

## 13. Lineage & Influences

Pinterest's visual lineage runs through three traditions, each contributing one distinct property to the synthesis:

**1. The pin-up wall** — Polaroid prints on a cork board, scrapbook pages, interior-design moodboards. This is the source of the literal "pin" metaphor and the masonry layout. Pinterest's product is, structurally, a digitalized scrapbook page. The variable-height card heights, the discovery-by-browsing affordance, the "save" verb itself — all from this tradition.

**2. Tumblr's pre-collapse masonry feed (2010-2013)** — Tumblr shipped the variable-height image-card feed before Pinterest hit critical mass, and Pinterest's product is a direct parallel evolution. Both prioritize image as content, both rely on infinite scroll, both treat the chrome as minimal. Where Tumblr went editorial (custom themes per user), Pinterest went consistent (one canvas for everyone).

**3. Material Design's tonal restraint** — Pinterest's chrome borrowed Material's discipline around tonal containers (no big shadows, no heavy gradients, single chromatic accent). Pin Sans, the variable type, is Pinterest's Roboto-equivalent — a custom utility sans that disappears next to image content.

**What Pinterest borrows from contemporaries:**

- **Instagram's image-first feed** — parallel-evolved, occasional pattern cross-pollination
- **Material Design's neutral chrome** — tonal containers, restrained shadows, single accent
- **Modern editorial design** — restrained typography, image-as-content, broadsheet heading sizes
- **Mood-board / interior-design magazines** — the "collected images" gestalt

**What Pinterest rejects:**

- Heavy drop shadows (Pinterest never goes above `0px 3px 12px @ 20%`)
- Color gradients (no atmospheric backgrounds, no rainbow accents)
- Cosmic / neon palettes (the "AI-startup" purple-mesh look is anti-Pinterest)
- Serif typography (no editorial broadsheet serifs, no warm humanist serifs)
- Dark mode on web (deliberate light-only canvas)
- Always-visible secondary actions (Save and ellipsis appear on hover, not always)

## 14. Do's and Don'ts

### Do's

- ✓ Use `#e60023` (Pushpin) as the single chromatic anchor — primary CTAs, brand moments, the pin icon
- ✓ Keep cards at **12px radius** — Pinterest's signature
- ✓ Use **pill buttons** (radius 999px) for every action
- ✓ Light shadows only — `0px 0.5px 3px @ 20%` floor, `0px 3px 12px @ 20%` ceiling
- ✓ Variable-height masonry for feed content
- ✓ Hover reveals Save + ellipsis (desktop); always-visible on mobile
- ✓ Single sans-serif for all typography — Pin Sans or system fallback
- ✓ Tight letter-spacing for headings (`-0.5px`)
- ✓ Bold weight 700 for emphasis — there is no 500/600 semibold display
- ✓ White canvas (`#ffffff`), near-black text (`#000000`), grayscale-300 (`#62625b`) for subtle text

### Don'ts

- ✗ Don't use red (`#e60023`) decoratively or as a wash — red is always action
- ✗ Don't add drop shadows above `0px 3px 12px` — Pinterest stays subtle
- ✗ Don't use gradients in chrome — image content carries chromatic load
- ✗ Don't introduce serif typography — Pin Sans / sans-serif throughout
- ✗ Don't ship a dark mode for web — Pinterest is light-canvas by brand design
- ✗ Don't use 16px+ card radius — 12px is the signature, larger feels child-targeted
- ✗ Don't use sharp 0px corners — even 4px is acceptable, but 0 reads as wrong
- ✗ Don't always-show Save button on desktop — it appears on hover, that's the discipline
- ✗ Don't put italic on heading sizes — italic is body-only
- ✗ Don't use blue for "info" semantic — Pinterest reuses subtle gray
- ✗ Don't force a 1:1 or 16:9 crop on pin images — variable aspect is the whole point
- ✗ Don't add page transitions — navigation is instant; motion lives inside components

## 15. Agent Prompt Guide

### Quick Color Reference

- **Canvas**: `#ffffff`
- **Text**: `#000000`
- **Subtle text**: `#62625b`
- **Brand red (Pushpin)**: `#e60023`
- **Brand hover**: `#cc001f`
- **On-brand**: `#ffffff`
- **Border**: `#e5e5e0`
- **Surface wash**: `#f6f6f3`
- **Success**: `#097239`
- **Danger**: `#b60c0c`

### Example Component Prompts

```
Create a hero for a Pinterest-like product: white canvas (#fff),
near-black 60px h1 "Pin Sans"-class sans-serif at weight 700,
tight -0.5px tracking, 16px body description, a pill-shape primary
CTA in #e60023 with white text "Get started" — no gradient, no
shadow on the canvas itself, generous 80px top padding.
```

```
Design a pin card following Pinterest's pattern: variable height
matching image aspect, 12px radius, 0px 0.5px 3px rgba(0,0,0,0.2)
shadow at rest, lift to 0px 1.5px 6px on hover, meta strip below
the image with avatar + title + Save button (Pushpin red pill).
Hide Save and ellipsis until hover.
```

```
Build a Pinterest search input: 600px max-width centered, pill
radius (999px), surface-wash bg (#f6f6f3), magnifying-glass icon
inline left at 20px, 16px placeholder in #62625b, focus ring 2px
solid #c8c8c1 with 2px offset.
```

```
Create a Pinterest-style mobile bottom nav: 60px tall, white bg,
1px top border (#e5e5e0), 5 items (home/search/create/notifications/
profile), 24px icon-only, active item icon and label tinted Pushpin
red, inactive items pure black.
```

```
Layout a Pinterest masonry feed: 2 columns at <640px, 3 at 640-1024px,
4 at 1024-1280px, 5 at 1280-1440px, 6 at 1440px+. 16px column gap,
16px row gap. Variable card heights matching image aspect. Each card
is a 12px-radius image with meta below.
```

```
Build a Pinterest save confirmation: button morph from "Save" pill
to filled red with white checkmark, scale 1 → 1.2 → 1 over 240ms
with cubic-bezier(0.2, 0, 0, 1) easing, then "Saved to [board]"
announcement via aria-live="assertive" toast.
```

### Iteration Guide

1. **Start light.** Pinterest's canvas is full white (`#ffffff`), not off-white. If your reference looks "warm", it's drifted toward Notion or Apple. Bring it back to pure white.
2. **Reserve red for action.** If you see Pushpin red anywhere that's not a CTA, brand mark, or pin icon, you're drifting. Move it to grayscale.
3. **Cards 12px.** If radius creeps to 16px+, you're heading toward Discord. If it drops to 8px or below, you're toward LinkedIn. 12px is the lock.
4. **Pill all buttons.** Sharp-rectangle buttons read as anti-Pinterest. Even small icon buttons go circle.
5. **Subtle shadows.** If you see a `0px 6px 24px rgba(0,0,0,0.4)` anywhere, you're drifting toward 2018-era SaaS. Pinterest tops out at `0px 3px 12px @ 20%`.
6. **One sans-serif.** No serif companions. No "Display" font separate from "Body". Pin Sans (or system fallback) does both.
7. **Bold for emphasis.** Headings are weight 700. There is no semibold display variant. If you see 500-600 weight on a heading, you've drifted toward Anthropic / Stripe — bring it back to 700.
8. **Mobile is primary.** Design for the bottom nav first. The desktop feed is the mobile feed widened. If your desktop view feels like the primary surface and mobile feels squeezed, you've inverted the priority.