Pinterest Design System

---

version: alpha

name: Pinterest-design-analysis

description: |

A photography-first discovery system organized around the Pinterest Red CTA, the masonry pin grid, and a soft warm-cream chrome that gets out of the imagery's way. The home page is a content-discovery tool wearing the chrome of a magazine publisher: 70px display headlines, friendly Pin Sans typography, fully-rounded pill buttons (16px) on a cream-tinted neutral palette, and a sticky red "Sign up" CTA that anchors every viewport. Pin imagery is the system's load-bearing visual element — square, portrait, and landscape pins tile in a column-based masonry grid where each tile is a fully-rounded 16px-radius card, separated by tight 8px gutters. The chrome is otherwise quiet: warm grays, true whites, and a single saturated red — no decorative gradients, no atmospheric backgrounds, no shadows beyond a soft modal scrim.

colors:

primary: "#e60023"

on-primary: "#ffffff"

primary-pressed: "#cc001f"

ink: "#000000"

ink-soft: "#211922"

body: "#33332e"

charcoal: "#262622"

mute: "#62625b"

ash: "#91918c"

stone: "#c8c8c1"

hairline: "#dadad3"

hairline-soft: "#e5e5e0"

on-secondary: "#000000"

secondary-bg: "#e5e5e0"

secondary-pressed: "#c8c8c1"

canvas: "#ffffff"

surface-soft: "#fbfbf9"

surface-card: "#f6f6f3"

surface-elevated: "#ffffff"

on-dark: "#ffffff"

on-dark-mute: "rgba(255,255,255,0.7)"

surface-dark: "#262622"

focus-outer: "#435ee5"

focus-inner: "#ffffff"

accent-pressed-blue: "#617bff"

accent-purple: "#7e238b"

accent-purple-deep: "#6845ab"

success-deep: "#103c25"

success-pale: "#c7f0da"

error: "#9e0a0a"

error-deep: "#cc001f"

typography:

display-xl:

fontFamily: Pin Sans

fontSize: 70px

fontWeight: 600

lineHeight: 1.1

letterSpacing: -1.2px

display-lg:

fontFamily: Pin Sans

fontSize: 44px

fontWeight: 700

lineHeight: 1.15

letterSpacing: -0.8px

heading-xl:

fontFamily: Pin Sans

fontSize: 28px

fontWeight: 700

lineHeight: 1.2

letterSpacing: -1.2px

heading-lg:

fontFamily: Pin Sans

fontSize: 22px

fontWeight: 600

lineHeight: 1.25

letterSpacing: 0

heading-md:

fontFamily: Pin Sans

fontSize: 18px

fontWeight: 600

lineHeight: 1.3

letterSpacing: 0

body-md:

fontFamily: Pin Sans

fontSize: 16px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

body-strong:

fontFamily: Pin Sans

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

body-sm:

fontFamily: Pin Sans

fontSize: 14px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

body-sm-strong:

fontFamily: Pin Sans

fontSize: 14px

fontWeight: 700

lineHeight: 1.4

letterSpacing: 0

caption-md:

fontFamily: Pin Sans

fontSize: 12px

fontWeight: 500

lineHeight: 1.5

letterSpacing: 0

caption-sm:

fontFamily: Pin Sans

fontSize: 12px

fontWeight: 400

lineHeight: 1.4

letterSpacing: 0

link-md:

fontFamily: Pin Sans

fontSize: 16px

fontWeight: 600

lineHeight: 1.4

letterSpacing: 0

button-md:

fontFamily: Pin Sans

fontSize: 14px

fontWeight: 700

lineHeight: 1

letterSpacing: 0

button-sm:

fontFamily: Pin Sans

fontSize: 12px

fontWeight: 700

lineHeight: 1

letterSpacing: 0

rounded:

none: 0px

sm: 8px

md: 16px

lg: 32px

full: 9999px

spacing:

xxs: 4px

xs: 6px

sm: 8px

md: 12px

lg: 16px

xl: 24px

xxl: 32px

section: 64px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: 6px 14px

height: 40px

button-primary-pressed:

backgroundColor: "{colors.primary-pressed}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

button-secondary:

backgroundColor: "{colors.secondary-bg}"

textColor: "{colors.on-secondary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: 6px 14px

height: 40px

button-secondary-pressed:

backgroundColor: "{colors.secondary-pressed}"

textColor: "{colors.on-secondary}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

button-tertiary:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

button-icon-circular:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

size: 40px

button-pill-on-image:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 8px 14px

button-disabled:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ash}"

rounded: "{rounded.md}"

search-bar:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.full}"

padding: 11px 15px

height: 48px

search-bar-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: 11px 15px

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.md}"

pin-card:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.md}"

padding: 0px

pin-card-large:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

rounded: "{rounded.lg}"

padding: 0px

pin-overlay-pill:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.button-sm}"

rounded: "{rounded.full}"

padding: 6px 12px

filter-chip:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: 8px 16px

filter-chip-active:

backgroundColor: "{colors.ink}"

textColor: "{colors.on-dark}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

category-tile:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.body-strong}"

rounded: "{rounded.md}"

padding: 16px

feature-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.heading-xl}"

rounded: "{rounded.md}"

padding: 32px

feature-card-soft:

backgroundColor: "{colors.surface-card}"

textColor: "{colors.ink}"

typography: "{typography.heading-xl}"

rounded: "{rounded.md}"

padding: 32px

modal-card:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.lg}"

padding: 32px

hero-cta-strip:

backgroundColor: "{colors.surface-dark}"

textColor: "{colors.on-dark}"

typography: "{typography.heading-xl}"

rounded: "{rounded.none}"

padding: 48px 32px

primary-nav:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-strong}"

rounded: "{rounded.none}"

height: 64px

footer-section:

backgroundColor: "{colors.canvas}"

textColor: "{colors.mute}"

typography: "{typography.body-sm}"

rounded: "{rounded.none}"

padding: 32px 24px

link-inline:

textColor: "{colors.ink-soft}"

typography: "{typography.link-md}"

---

Pinterest's marketing system is built around a single instructional principle: get out of the photograph's way. The chrome is a quiet warm-cream neutral palette (`{colors.surface-soft}`, `{colors.surface-card}`, `{colors.canvas}`) carrying typography in Pinterest's proprietary Pin Sans face, with Pinterest Red (`{colors.primary}` — `#e60023`) reserved exclusively for the "Sign up" CTA, the active-tab indicator, and the sticky top-nav anchor. Every other surface is allowed to fade behind the imagery — pin tiles, category tiles, content thumbnails, profile shots — that constitutes the actual product.

The design system has two distinct surface modes that alternate down the home page: the **hero/CTA chrome** (cream surfaces, large 70px Pin Sans display headlines, alternating left/right photo-illustrated feature cards) and the **content masonry** (a column-based grid of 16px-radius pin cards on `{colors.surface-card}` with no internal padding — the pin is the card). The search results page is almost pure masonry: a tight column grid of pin imagery in mixed aspect ratios, with a small filter-chip strip at the top and the sticky red Sign-up CTA in the upper-right corner. The `create.pinterest.com` business surface inverts the grid back to a more traditional editorial layout but keeps every other rule of the system: Pin Sans, cream chrome, red CTA, 16px-radius pills.

The system's signature gesture is **shape geometry**: 16px radius (`{rounded.md}`) for nearly every surface — buttons, inputs, pin cards, feature cards — and 32px radius (`{rounded.lg}`) reserved for pin-card-large and modal cards. There are exactly three radius values in active use: 16px, 32px, and pill (9999px). The system never goes flat (sharp corners) and never goes radius-medium — those two values are the entire shape vocabulary.

**Key Characteristics:**

> **Source pages:** `/` (home), `/search/pins/?q=bold lip` (search results), `create.pinterest.com/` (creator marketing), `create.pinterest.com/product-features/how-to-create-boards/` (creator article). The chrome palette is identical across all four pages.

**Pin Sans** is Pinterest's proprietary geometric sans-serif used across every text role on every page. It carries weights 400 (regular), 500 (medium), 600 (semibold), and 700 (bold), and falls back through a long stack — `-apple-system` → `system-ui` → `Segoe UI` → `Roboto` → `Helvetica Neue` → `Arial` plus emoji fallbacks. The face's distinctive trait is its tight letter-spacing at display sizes (-1.2px on `{typography.display-xl}` and `{typography.heading-xl}`), which gives 70px headlines a confident, friendly density rather than the airy spread of more conventional display geometric sans faces.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.display-xl}` | 70px | 600 | 1.1 | -1.2px | Marketing hero headline ("Create the life you love on Pinterest") |

| `{typography.display-lg}` | 44px | 700 | 1.15 | -0.8px | "Where your content can thrive" creator hero |

| `{typography.heading-xl}` | 28px | 700 | 1.2 | -1.2px | Section heading ("Bring your favorite ideas to life", "Pinterest for your brand") |

| `{typography.heading-lg}` | 22px | 600 | 1.25 | 0 | Sub-section heading, modal title ("Welcome to Pinterest") |

| `{typography.heading-md}` | 18px | 600 | 1.3 | 0 | Card title, in-grid pin label |

| `{typography.body-md}` | 16px | 400 | 1.4 | 0 | Body copy, modal body, default paragraph |

| `{typography.body-strong}` | 16px | 600 | 1.4 | 0 | Inline emphasis, primary nav link, form label |

| `{typography.body-sm}` | 14px | 400 | 1.4 | 0 | Footer copy, in-grid pin metadata, helper text |

| `{typography.body-sm-strong}` | 14px | 700 | 1.4 | 0 | Search-result count label, table-header text |

| `{typography.caption-md}` | 12px | 500 | 1.5 | 0 | Caption text, link metadata |

| `{typography.caption-sm}` | 12px | 400 | 1.4 | 0 | Smallest utility text, copyright |

| `{typography.link-md}` | 16px | 600 | 1.4 | 0 | Inline anchor link in body prose |

| `{typography.button-md}` | 14px | 700 | 1 | 0 | Standard primary/secondary button label |

| `{typography.button-sm}` | 12px | 700 | 1 | 0 | Compact pill chip, in-card button |

The system has an unusually steep size jump between display and body — `{typography.display-xl}` (70px) drops directly to `{typography.body-md}` (16px) on the home hero with no intermediate tier between. The negative tracking on the largest tiers (-1.2px / -0.8px) creates a tighter, more confident headline than a default geometric sans would deliver, and the body copy sits at a generous 1.4 line-height to keep multi-line descriptions breathing.

Pin Sans is proprietary. The closest open-source substitute is **Inter** (weights 400 / 500 / 600 / 700) — its geometry, x-height, and metric balance match Pin Sans within ~3% at body sizes. **Manrope** is a strong secondary substitute for the display tier where slightly tighter letterspacing helps the 70px headline feel weighted. Apply -1.2px tracking on the substitute at display sizes regardless of which substitute is chosen.

Whitespace is generous on the marketing surfaces and tight on the discovery surfaces. The home page sits sections 64px apart with photo-illustrated feature cards using 32px internal padding, while the search results page collapses to an 8px-gutter masonry grid that tiles imagery edge-to-edge. The system reads as two tools sharing the same chrome: a magazine (hero / feature / CTA / footer) and a search engine (top nav / filter row / pin grid / load more).

| Level | Treatment | Use |

|---|---|---|

| 0 — Flat | No border, no shadow | Default for pin cards, feature cards, footer — the dominant treatment |

| 1 — Hairline border | 1px solid `{colors.hairline}` | Inputs, footer column dividers, in-list rows |

| 2 — Modal scrim + soft shadow | Modal sits on a dark scrim over the page content with a soft 16px ambient shadow | Login / signup modal, image preview modal |

| 3 — Pin hover lift | (intentionally undocumented per system policy) | n/a |

Pinterest's system has effectively no shadow elevation in its content surfaces. Pin cards sit flat on the canvas; the only "elevation" appears on the modal layer where a 16px ambient shadow paired with a 50%-opacity scrim lifts the modal above the page content.

Depth comes entirely from the imagery itself, not from CSS effects:

| Token | Value | Use |

|---|---|---|

| `{rounded.none}` | 0px | Footer, primary nav, page sections — all flat structural surfaces |

| `{rounded.sm}` | 8px | Rare medium-radius surface (e.g., editorial tooltip) |

| `{rounded.md}` | 16px | Buttons, inputs, pin cards, feature cards, category tiles — the dominant component radius |

| `{rounded.lg}` | 32px | Large pin cards, modal cards — used sparingly for "big" content surfaces |

| `{rounded.full}` | 9999px | Search bar, filter chips, pin overlay pills, icon-circular buttons, avatars |

The radius vocabulary is essentially three values: 16px for most things, 32px for big cards and modals, and pill for circular elements. There are no sharp-cornered buttons or sharp-cornered pin cards.

> **No hover states documented** per system policy. Each spec covers Default and Active/Pressed only.

**`button-primary`** — the universal Pinterest CTA

**`button-secondary`** — gray-cream alternative

**`button-tertiary`** — ghost link

**`button-icon-circular`** — circular icon button

**`button-pill-on-image`** — small overlay pill on photography

**`button-disabled`**

**`filter-chip`** + **`filter-chip-active`**

**`text-input`** + **`text-input-focused`**

**`search-bar`** + **`search-bar-focused`**

**`pin-card`** — the standard masonry pin tile

**`pin-card-large`** — the home-page feature pin

**`pin-overlay-pill`** — anchored chip on pin imagery

**`category-tile`**

**`feature-card`** + **`feature-card-soft`**

**`modal-card`** — login/signup overlay

**`hero-cta-strip`** — dark CTA strip on `create.pinterest.com`

**`primary-nav`**

**Top Nav (Mobile)**

**`footer-section`**

**`link-inline`** — body-prose anchor link

| Name | Width | Key Changes |

|---|---|---|

| ultrawide | 1920px+ | Pin grid expands to 5–6 columns; content max-width holds at ~1280px |

| desktop-large | 1440px | Default — 4-column pin grid, full primary nav |

| desktop | 1280px | Same layout with narrower outer gutters |

| desktop-small | 1024px | Pin grid collapses to 3 columns; sub-nav remains horizontal |

| tablet | 768px | Pin grid collapses to 2 columns; primary nav becomes hamburger drawer; search bar becomes icon-only |

| mobile | 480px | Single-column pin grid; hero `{typography.display-xl}` scales 70px → ~44px |

| mobile-narrow | 320px | Hero further scales to ~36px; section padding tightens to 32px |

All interactive elements meet WCAG AA (≥ 44×44px). `{component.button-primary}` and `{component.button-secondary}` sit at ~40px height with 14px horizontal padding (effective ~40×80px tappable). `{component.search-bar}` sits at 48px. `{component.text-input}` sits at 44px. `{component.filter-chip}` is ~36–40px height with 16px padding — extends to 44px tappable via inline padding. `{component.button-icon-circular}` is exactly 40×40 with extended hit-target padding to 48×48 inside the parent.

1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves.

2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.md}`) — do not paraphrase.

3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically.

4. Add new variants as separate component entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose.

5. Default body to `{typography.body-md}`; reach for `{typography.body-strong}` for emphasis; reserve `{typography.display-xl}` strictly for top-of-page hero headlines.

6. Keep `{colors.primary}` scarce — at most one Pinterest-red CTA per fold (counting nav, hero, and feature-card CTAs together).

7. When introducing a new component, ask whether it can be expressed with the existing pin-card + 16px-radius + cream-surface vocabulary before adding new tokens. The system's strength is that it almost never needs new ones.