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.

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

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
• Feature
• Gallery / Showcase
• Feature
• Feature
• Feature
• CTA / Sign-up
• Footer

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)_
- h1: 70px
- h2: 24px
- body: 16px

> **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

## 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.

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;
  --text-h1: 70px;
  --text-h2: 24px;
  --text-body: 16px;
  --radius-base: 8px;
  --radius-button: 8px;
  --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;
  --radius: 8px;
  --radius-button: 8px;
}
/* fonts: Pin Sans may be proprietary — safe free fallback: Newsreader (Google Fonts). */