---
version: alpha
name: Pinterest
description: One decisive red on a soft off-white feed of saved images.
colors:
  on-surface-variant: "#62625b"
  on-surface: "#000000"
  surface: "#ffffff"
  error: "#b60c0c"
  primary: "#e60023"
  pinterest-red-pressed: "#b2001b"
  near-black-ink: "#211922"
  off-white: "#f6f6f3"
  pale-gray: "#efefef"
  cloud-gray: "#e5e5e0"
  steel-gray: "#91918c"
  charcoal: "#242421"
  link-blue: "#2b48d4"
typography:
  caption:
    fontFamily: Pin Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  label-small:
    fontFamily: Pin Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  body:
    fontFamily: Pin Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0em
  subheading:
    fontFamily: Pin Sans
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  heading:
    fontFamily: Pin Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.5px
  section:
    fontFamily: Pin Sans
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  display:
    fontFamily: Pin Sans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1px
  hero:
    fontFamily: Pin Sans
    fontSize: 70px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1px
rounded:
  small-controls-tags: 8px
  inputs-cards-buttons: 16px
  large-surfaces: 20px
  modals-sheets: 32px
  pills-chips-avatars-search: 999px
spacing:
  3xs: 2px
  2xs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 48px
  5xl: 64px
---
# Pinterest — Style Reference
> One decisive red on a soft off-white feed of saved images.

**Theme:** mixed

Pinterest runs an almost entirely achromatic system and spends its whole color budget on a single saturated red (`#e60023`). Everything else is a disciplined grayscale ramp — pure black ink, graphite for secondary text, a warm off-white (`#f6f6f3`) canvas, and cloud-gray fills for secondary controls. The signature move is the pill: every actionable element rounds to a soft `16px` radius or a full `999px` capsule, so buttons, search fields, and nav chips all read as friendly tap targets rather than boxes. Type is set in the proprietary **Pin Sans**, which goes big and confident in the hero (`70px`) then settles to a plain `16px` body. The product surface is bright and light; the marketing hero inverts to a near-black `#242421` stage with full-bleed imagery and large white headings — the two-mode register the whole brand lives in.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Pinterest Red | `#e60023` | `--color-pinterest` | The single brand hue. Primary CTA / "Save" pill fill and brand mark. Never for body text, never diluted into gradients — it is the only saturated color the chrome permits. |
| Pinterest Red Pressed | `#b2001b` | `--color-pinterest-pressed` | Pressed/active depression of the red pill. The only red variant; hover/press darken, never lighten. |
| Ink Black | `#000000` | `--color-text-default` | Default text, headings, and icon fill on light surfaces (`grayscale-500`). Pinterest sets copy in true black, not a soft gray. |
| Near-Black Ink | `#211922` | `--color-ink` | Measured heading and nav-link ink — a hair warmer/softer than pure black on some surfaces. |
| Graphite | `#62625b` | `--color-text-subtle` | Secondary and supporting text (`grayscale-300`); metadata, captions, placeholder-adjacent labels. |
| White | `#ffffff` | `--color-canvas` | Main product canvas and the inverse label color on the red pill and dark hero (`grayscale-0` / text-inverse). |
| Off-White | `#f6f6f3` | `--color-surface-subtle` | The warm feed backdrop and subtle section fill (`grayscale-50`). Softer than the pure-white canvas — the feed sits on this. |
| Pale Gray | `#efefef` | `--color-surface` | Measured hover/elevated surface tint for cards and rows. |
| Cloud Gray | `#e5e5e0` | `--color-surface-secondary` | Secondary button fill (`grayscale-100`) — the neutral counterpart to the red primary. |
| Steel Gray | `#91918c` | `--color-border` | Interactive borders and input outlines (`grayscale-200`) — 1px hairlines only. |
| Charcoal | `#242421` | `--color-surface-dark` | Dark hero / inverted marketing stage background (`grayscale-450`). |
| Link Blue | `#2b48d4` | `--color-link` | In-text hyperlinks only (`blue-500`). Never a button — buttons are red or gray. |
| Error Red | `#b60c0c` | `--color-text-error` | Validation and error text (`red-500`). Deliberately darker than the brand red so it never competes with a CTA. |

## Tokens — Typography
### Pin Sans — the entire type system: hero display through caption, one proprietary humanist sans · `--font-default`
- **Substitute:** -apple-system / BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif
- **Weights:** 400 (regular), 500 (medium), 600 (semibold), 700 (bold), 800/900 (display) — loaded 400/500/700/800
- **Sizes:** 12, 14, 16, 20, 24, 36, 38, 48, 50, 70px (design tokens run 12→72)
- **Line height:** 1.1 (display) → 1.6 (body); token ramp 1.1–1.8
- **Letter spacing:** tight at display sizes (down to `-1px` / `-0.5px`), neutral (`0`) at text sizes
- **Role:** Pinterest ships one family for everything. Weight and size — not a second typeface — carry the entire hierarchy. Hero headings go `600`–`900` and very large; body stays a plain `400`/`16px`.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.4 | 0 | `--text-caption` |
| Label / small | 14px | 1.4 | 0 | `--text-label` |
| Body | 16px | 1.6 | 0 | `--text-body` |
| Subheading | 20px | 1.4 | 0 | `--text-subheading` |
| Heading | 24px | 1.3 | -0.5px | `--text-heading` |
| Section | 36px | 1.2 | -0.5px | `--text-section` |
| Display | 48px | 1.2 | -1px | `--text-display` |
| Hero | 70px | 1.1 | -1px | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 3xs | 2px | `--spacing-50` |
| 2xs | 4px | `--spacing-100` |
| xs | 8px | `--spacing-200` |
| sm | 12px | `--spacing-300` |
| md | 16px | `--spacing-400` |
| lg | 20px | `--spacing-500` |
| xl | 24px | `--spacing-600` |
| 2xl | 32px | `--spacing-800` |
| 3xl | 40px | `--spacing-1000` |
| 4xl | 48px | `--spacing-1200` |
| 5xl | 64px | `--spacing-1600` |

### Border Radius
| Element | Value |
|---------|-------|
| Small controls / tags | 8px |
| Inputs, cards, buttons | 16px |
| Large surfaces | 20px / 24px |
| Modals / sheets | 32px |
| Pills, chips, avatars, search | 999px (full) |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Surface | `0px 0.5px 3px 0px rgba(0,0,0,.2)` | `--shadow-surface` |
| Raised | `0px 1.5px 6px 0px rgba(0,0,0,.2)` | `--shadow-raised` |
| Floating | `0px 3px 12px 0px rgba(0,0,0,.2)` | `--shadow-floating` |

### Layout
- **Page max-width:** fluid / full-bleed (the masonry feed fills the viewport)
- **Section gap:** 32–64px
- **Card padding:** 12–16px
- **Element gap:** 8–16px

## Components
### Primary Button (Save / Sign up)
**Role:** The one high-emphasis action — save a Pin, sign up, follow.
Pinterest Red `#e60023` fill, white label (`#ffffff`, text-inverse), `16px` radius, `6px 14px` padding, `12px`/`400` label. Pressed state darkens to `#b2001b`. This is the only place the brand red appears as a fill.

### Secondary Button
**Role:** Neutral secondary action beside the red primary.
Cloud Gray `#e5e5e0` fill, black label `#000000`, `16px` radius, `6px 14px` padding, `12px`/`400`. Same shape as the primary so the pair reads as a set; only the fill signals emphasis.

### Tertiary / Dropdown Pill
**Role:** Board selector, "All boards", filter dropdowns.
White `#ffffff` fill, `1px` Steel Gray `#91918c` border, `16px` radius, asymmetric `12px 44px 12px 16px` padding (room for a trailing chevron), black label. Hairline outline instead of a fill — quiet until opened.

### Ghost / Text Button
**Role:** Low-emphasis inline actions and nav items.
No fill, no border, near-black `#211922` or black `#000000` label, `12px`/`400`, `0` radius. Relies on the pill-shaped hover wash, not a resting background.

### Search Field
**Role:** The always-present discovery input — the heart of the product.
No fill over `#f6f6f3`, `1px` `#91918c` border, `16px` radius (capsule feel), `11px 15px` padding, `16px`/`400` text. Trailing-icon variant pads to `11px 39px 11px 15px`. The search bar is the widest, most prominent control on the chrome.

### Text Input
**Role:** Forms, board names, profile fields.
`1px` `#91918c` border, `16px` radius, `11px 15px` padding, `16px`/`400`, black text on white. Focus adds a 2px inner/outer focus ring (system focus tokens).

### Nav Link / Header Item
**Role:** Top-level navigation (Home, Explore, Create).
Near-black `#211922` label, `12px`/`400`, `999px` hover target. Active/selected item goes `700` weight rather than a color change — hierarchy stays achromatic.

### Pin Card
**Role:** The atomic unit of the feed — an image tile in the masonry grid.
Rounded `16px` image with a `Raised`/`Floating` shadow on hover; a red "Save" pill overlays the top-right on hover, title and attribution sit below in `14px`. Cards are content-first: no chrome border, the image is the card.

### Avatar / Chip
**Role:** User avatars, topic chips, board covers.
Full `999px` (circle) radius, `1px` `#91918c` container border where needed. Chips reuse the pill shape at small sizes.

### Modal / Sheet
**Role:** Pin close-up, board picker, create flow.
White surface, `32px` corner radius, `Floating` shadow, generous 24–32px internal padding. The largest radius in the system — sheets feel soft and lifted.

### Dark Hero
**Role:** Marketing / logged-out landing stage.
Charcoal `#242421` (or black `#000000`) full-bleed background, white `#ffffff` heading at `70px`/`600`, imagery bleeding to the edges. The inverse of the light product surface.

## Do's and Don'ts
### Do
- Spend the entire color budget on one red (`#e60023`) — reserve it for the single most important action on any view.
- Round everything: `16px` for cards/buttons/inputs, full `999px` for chips, avatars, and search. The pill is the brand.
- Set the whole hierarchy in Pin Sans using weight (`400`→`900`) and size, not a second typeface.
- Keep body copy true black (`#000000`) on a warm off-white (`#f6f6f3`) feed; let the imagery supply the color.
- Use 1px `#91918c` hairlines for borders and inputs — never heavy strokes.

### Don't
- Don't add a second accent hue. Blue (`#2b48d4`) is text-links only; error red (`#b60c0c`) is deliberately dulled so it never reads as a CTA.
- Don't put the brand red on text, borders, or gradients — it is a fill for one action, nothing else.
- Don't square off controls or use small radii; a sharp-cornered button is off-brand.
- Don't introduce a display typeface — Pin Sans carries the hero too.
- Don't let cards carry visible borders; the image is the card, elevation comes from shadow on hover.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#ffffff` | Base product surface, cards, modals |
| 1 | Feed | `#f6f6f3` | Warm off-white the masonry grid sits on |
| 2 | Hover / Row | `#efefef` | Elevated hover tint and list rows |
| 3 | Secondary Fill | `#e5e5e0` | Secondary buttons, quiet fills |
| — | Dark Stage | `#242421` | Inverted marketing hero |

## Elevation
Depth is luminance-plus-shadow, never borders. Cards live flat in the feed and lift on hover with a three-tier soft shadow set (`surface` → `raised` → `floating`, all `rgba(0,0,0,.2)`). The system also defines background blurs (8/24/64px) for scrims over imagery. On the dark hero, elevation inverts to lighter washes. Resting UI has almost no shadow — the feed reads as paper until you touch it.

## Imagery
Imagery is the product. Pinterest's entire canvas is a masonry wall of user photography and illustration in a fluid multi-column grid, and the design system deliberately recedes so the images carry all the color and texture. Rounded `16px` corners, no borders, hover-reveal scrims and a "Save" pill. Photography is warm, lifestyle, aspirational; the chrome is achromatic precisely so nothing competes with it. In marketing, images bleed full-width behind large white type.

## Layout
Full-bleed, edge-to-edge masonry — content fills the viewport rather than a centered max-width column. A fixed top bar carries the logo, the dominant pill search field, and a few nav items; the feed flows below in a responsive multi-column grid whose column count scales with width. Spacing is comfortable (16–24px gutters), corners are uniformly soft, and the page has no hard section dividers — the imagery itself sets the rhythm. The marketing site breaks this with full-viewport dark hero panels stacked vertically.

## Typography Voice
Two modes, one typeface. In the **product**, Pin Sans is nearly invisible: plain `400` weight, `16px`, black on off-white, letting the images speak. In the **hero**, the same font becomes the star — `70px`, `600`, tracked tight to `-1px`, white on charcoal. The signature move is that Pinterest never reaches for a display face or an accent color to create drama; it just scales one humanist sans up and leans on weight. Tight negative tracking (`-0.5` to `-1px`) at large sizes gives the headlines a confident, packed feel while body copy stays neutral and legible at `0` tracking and `1.6` line height.

## Agent Prompt Guide
## Quick Color Reference
- background: `#ffffff` (canvas) / `#f6f6f3` (feed)
- text: `#000000` (primary) / `#62625b` (subtle)
- surface: `#efefef` (hover) / `#e5e5e0` (secondary fill)
- border: `#91918c`
- accent: `#e60023` (Pinterest Red — the only saturated hue)
- primary action: `#e60023` fill with white label
- link: `#2b48d4` (text links only)

## Example Component Prompts
1. **Primary CTA pill**: Build a "Save" button — fill `#e60023`, white `#ffffff` label at `12px`/weight 400, `16px` border-radius, `6px 14px` padding; darken to `#b2001b` on press. No shadow at rest.
2. **Search field**: A pill search input over a `#f6f6f3` page — no fill, `1px` solid `#91918c` border, `16px` radius, `11px 15px` padding, `16px`/400 text, leading search icon, wide as the header allows.
3. **Pin card**: An image tile with `16px` rounded corners, no border, flat at rest; on hover raise a `0px 3px 12px 0px rgba(0,0,0,.2)` shadow and overlay a red `#e60023` "Save" pill top-right, with `14px` title beneath.
4. **Secondary button**: Neutral action — fill `#e5e5e0`, black `#000000` label, `16px` radius, `6px 14px` padding, same footprint as the red primary so they pair.
5. **Dark hero**: Full-bleed `#242421` panel, white `#ffffff` heading in Pin Sans at `70px`/weight 600, tracking `-1px`, `1.1` line height, imagery bleeding behind the type.

## Similar Brands
- **Dribbble** — an achromatic content-first grid where the uploaded work supplies all the color and the chrome stays neutral.
- **Behance** — masonry-of-imagery portfolio surface with quiet UI and a single restrained accent.
- **Airbnb** — one warm saturated brand color (their coral) held against a soft neutral, rounded-pill controls, photography-led.
- **Etsy** — warm-neutral marketplace with a single strong accent reserved for the primary action and a friendly rounded control language.
- **Instagram** — imagery-is-the-product feed where the interface recedes to near-monochrome so photos carry the palette.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-pinterest: #e60023;
  --color-pinterest-pressed: #b2001b;
  --color-text-default: #000000;
  --color-ink: #211922;
  --color-text-subtle: #62625b;
  --color-canvas: #ffffff;
  --color-surface-subtle: #f6f6f3;
  --color-surface: #efefef;
  --color-surface-secondary: #e5e5e0;
  --color-border: #91918c;
  --color-surface-dark: #242421;
  --color-link: #2b48d4;
  --color-text-error: #b60c0c;

  /* Typography — Families */
  --font-default: 'Pin Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-label: 14px;
  --text-body: 16px;
  --text-subheading: 20px;
  --text-heading: 24px;
  --text-section: 36px;
  --text-display: 48px;
  --text-hero: 70px;
  --leading-tight: 1.1;
  --leading-heading: 1.3;
  --leading-body: 1.6;

  /* Spacing */
  --spacing-50: 2px;
  --spacing-100: 4px;
  --spacing-200: 8px;
  --spacing-300: 12px;
  --spacing-400: 16px;
  --spacing-500: 20px;
  --spacing-600: 24px;
  --spacing-800: 32px;
  --spacing-1000: 40px;
  --spacing-1200: 48px;
  --spacing-1600: 64px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-surface: 0px 0.5px 3px 0px rgba(0,0,0,.2);
  --shadow-raised: 0px 1.5px 6px 0px rgba(0,0,0,.2);
  --shadow-floating: 0px 3px 12px 0px rgba(0,0,0,.2);
}
```
### Tailwind v4
```css
@theme {
  /* Colors */
  --color-pinterest: #e60023;
  --color-pinterest-pressed: #b2001b;
  --color-text-default: #000000;
  --color-ink: #211922;
  --color-text-subtle: #62625b;
  --color-canvas: #ffffff;
  --color-surface-subtle: #f6f6f3;
  --color-surface: #efefef;
  --color-surface-secondary: #e5e5e0;
  --color-border: #91918c;
  --color-surface-dark: #242421;
  --color-link: #2b48d4;
  --color-text-error: #b60c0c;

  /* Typography — Families */
  --font-default: 'Pin Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --text-label: 14px;
  --text-body: 16px;
  --text-subheading: 20px;
  --text-heading: 24px;
  --text-section: 36px;
  --text-display: 48px;
  --text-hero: 70px;
  --leading-tight: 1.1;
  --leading-heading: 1.3;
  --leading-body: 1.6;

  /* Spacing */
  --spacing-50: 2px;
  --spacing-100: 4px;
  --spacing-200: 8px;
  --spacing-300: 12px;
  --spacing-400: 16px;
  --spacing-500: 20px;
  --spacing-600: 24px;
  --spacing-800: 32px;
  --spacing-1000: 40px;
  --spacing-1200: 48px;
  --spacing-1600: 64px;

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-surface: 0px 0.5px 3px 0px rgba(0,0,0,.2);
  --shadow-raised: 0px 1.5px 6px 0px rgba(0,0,0,.2);
  --shadow-floating: 0px 3px 12px 0px rgba(0,0,0,.2);
}
```