Pinterest — Design System

Name: Pinterest design system
Creator: Mozaika
Keywords: design system, design tokens, Pinterest, dark

dark

Pinterest onboards in Pin Sans at 70px/600 ('Sign up to get your ideas') with 16px-radius buttons in the signature red, over an infinite masonry of pins that IS the brand argument. The custom geometric sans stays soft and rounded — chrome tuned to disappear behind a billion images of other people's taste.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/pinterest.

Tokens

Pinterest's decoded design system: background #0A0A0B, text #EDEDEE; type scale h1 70px / h2 24px / body 16px; 8px spacing base; 8px base radius.

Color roles

Role	Value
bg	`#0A0A0B`
surface	`#171718`
border	`#2C2C2D`
text	`#EDEDEE`
text_muted	`#969697`

Typography

Heading: Pin Sans
Body: Pin Sans
h1: 70px
h2: 24px
body: 16px

Spacing

base unit: 8px
scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

Radii

base: 8px
button: 8px

Per-section tokens (8)

Hero — light · bg #FFFFFF · text #C2221C · 2 col · split
Feature — light · bg #FDFCFC · text #620519 · 1 col · left
Gallery / Showcase — light · bg #FEFEFE · text #746759 · 1 col · left
Feature — light · bg #FFFFFF · text #563738 · 1 col · left
Feature — light · bg #FFFFFF · text #7F3A2B · 2 col · split
Feature — light · bg #FFFFFF · text #B00104 · 2 col · split
CTA / Sign-up — light · bg #FFFFFF · text #807F77 · 1 col · left
Footer — dark · bg #000000 · text #CFCFCE · 2 col · split

Export: DESIGN.md

# Pinterest — Design System

> dark

Pinterest onboards in Pin Sans at 70px/600 ('Sign up to get your ideas') with 16px-radius buttons in the signature red, over an infinite masonry of pins that IS the brand argument. The custom geometric sans stays soft and rounded — chrome tuned to disappear behind a billion images of other people's taste.

## Colors

| Role | Value |
|------|-------|
| bg | `#0A0A0B` |
| surface | `#171718` |
| border | `#2C2C2D` |
| text | `#EDEDEE` |
| text_muted | `#969697` |

## Typography

- Heading: **Pin Sans** _(free fallback: Newsreader)_
- Body: **Pin Sans** _(free fallback: Newsreader)_

| Role | Size / weight · line-height · tracking |
|------|------------------------------------------|
| hero | 70px / 600 |
| h2 | 50px / 700 |
| h3 | 48px / 900 · lh 53px · tracking -0.5px |
| body | 20px / 400 · lh 28px |
| small | 16px / 700 · lh 22px |

- Weight ladder: 400 · 500 · 600 · 700 · 900 — use these exact measured weights, not the 400/600 defaults.

> **Fonts —** Pin Sans may be proprietary — safe free fallback: Newsreader (Google Fonts).

## Spacing
- base unit: 8px
- scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

## Radius
- base: 8px
- button: 8px
- card: 16px
- pill: 9999px
- sharp: 2px

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.

---

> **Decoded with Mozaika** — measured live, not guessed. Full decoded design system + one-command install: mozaika.design/ds/pinterest

Export: Tailwind v4 (@theme)

@theme {
  --color-bg: #0A0A0B;
  --color-surface: #171718;
  --color-border: #2C2C2D;
  --color-text: #EDEDEE;
  --color-text-muted: #969697;
  /* fonts: Pin Sans may be proprietary — safe free fallback: Newsreader (Google Fonts). */
  --font-heading: "Pin Sans", "Newsreader", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Pin Sans", "Newsreader", system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* measured weights: 400, 500, 600, 700, 900 — use these, not 400/600 */
  --text-hero: 70px; --font-weight-hero: 600;
  --text-h2: 50px; --font-weight-h2: 700;
  --text-h3: 48px; --font-weight-h3: 900; --leading-h3: 53px; --tracking-h3: -0.5px;
  --text-body: 20px; --font-weight-body: 400; --leading-body: 28px;
  --text-small: 16px; --font-weight-small: 700; --leading-small: 22px;
  --radius-base: 8px;
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --radius-sharp: 2px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 24px;
  --spacing-6: 32px;
  --spacing-7: 48px;
  --spacing-8: 64px;
}

Export: CSS variables

:root {
  --bg: #0A0A0B;
  --surface: #171718;
  --border: #2C2C2D;
  --text: #EDEDEE;
  --text-muted: #969697;
  --font-heading: "Pin Sans", "Newsreader", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Pin Sans", "Newsreader", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-hero: 70px; --weight-hero: 600;
  --text-h2: 50px; --weight-h2: 700;
  --text-h3: 48px; --weight-h3: 900; --leading-h3: 53px; --tracking-h3: -0.5px;
  --text-body: 20px; --weight-body: 400; --leading-body: 28px;
  --text-small: 16px; --weight-small: 700; --leading-small: 22px;
  --radius: 8px;
  --radius-button: 8px;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --radius-sharp: 2px;
}
/* fonts: Pin Sans may be proprietary — safe free fallback: Newsreader (Google Fonts). */