Pinterest Design System Deep Dive

1. Brand Overview

Pinterest’s interface is deceptively simple. At first glance, you see endless pins in a clean grid. But under the hood, there’s a disciplined design system built to keep billions of visual elements feeling consistent without suffocating creativity.

The vibe: approachable, content-first, and subtly branded. They don’t splash their primary red everywhere—most of the UI is neutral, letting images do the heavy lifting. The core brand red (#e60023) shows up strategically: primary CTAs, key interactive signals, the logo. This restraint makes the red pop when it appears. It’s not just a color, it’s a call to action.

This is a product for an audience that values inspiration and visual discovery, not corporate rigidity. Typography is custom—Pin Sans—so the brand feels distinct even in text-heavy states. Spacing is consistent (8px base grid) but flexible enough to accommodate wildly different content shapes. Border radii are generous (16px on most buttons, 50% for circular avatars), which keeps the interface friendly.

Pinterest’s design philosophy here: content is king, UI is the frame. They’ve stripped away anything that competes with imagery while keeping interaction cues clear. It’s not flat minimalism—they use subtle depth, rounded corners, and soft neutrals—but it’s quiet. The system supports a global audience, so accessibility and clarity are baked in. High-contrast text colors, clear focus states, and WCAG-friendly link behaviors are all present.

If you’re designing for Pinterest, every element needs to feel like it belongs in a gallery. No loud gradients outside defined use cases. No arbitrary shadows. Keep the typography clean, the spacing consistent, and let the red do the talking when it matters.

2. Color System

2.1 Primary Colors

Pinterest’s hero color is #e60023 (semantic token: --sema-color-icon-primary). This deep, saturated red is emotionally charged—red is urgency, action, and attention. Competitors like Instagram lean into multi-color gradients, Facebook into blue calmness. Pinterest’s red is more editorial—it’s the “click me” signal.

Interestingly, the UI backgrounds are mostly white (#ffffff) and neutral grays (#62625b, #dadad3). That keeps the brand red from feeling overused. Blue (#2b48d4) appears for link text—this is a conventional web pattern that aids accessibility. They don’t reinvent link coloring; they just pick a strong, readable hue.

2.2 Complete Palette

Here’s every extracted color from the palette:

(Note: This is a condensed set from the hundreds of CSS vars—they have a huge semantic token set for every state, but these are the visually prominent ones.)

2.3 Color Relationships

White + black is the foundation. The contrast ratio here is infinite—meets WCAG AAA. Link blue #2b48d4 against white is high-contrast. Brand red #e60023 against white is also solid (~4.6:1), enough for AAA compliance for large text.

They use neutrals (#62625b, #dadad3) to soften non-critical UI. This prevents visual fatigue. Hover states darken or brighten slightly—never drastic shifts. This subtlety avoids jarring transitions.

Dark mode isn’t evident in extracted tokens—--gestalt-color-scheme is lightMode—so the palette is tuned for bright surfaces.

2.4 Usage Guide

Works well:

• White background + brand red CTA.
• Neutral gray text on white for secondary info.
• Link blue on white for conventional clickable cues.

Avoid:

• Red text on neutral backgrounds—contrast drops.
• Overusing brand red for non-interactive elements—it dilutes its impact.
• Mixing social brand colors outside their buttons—confuses the UI.

3. Typography

3.1 Font Families

Primary font: "Pin Sans" — custom, not Google or Adobe. Fallbacks are system fonts: -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, ... Arial. This ensures consistent rendering across platforms.

No variable fonts. The choice is deliberate—Pinterest wants control over letterforms.

3.2 Type Scale

3.3 Hierarchy

The jump from 70px to 60px heading sizes is subtle—probably responsive variants. 36px and 28px headings cover subheaders. Body text is at 16px—standard for readability. Captions drop to 12–14px, but still high enough to avoid strain.

Weights shift between 400 (normal), 500 (medium), and 700 (bold) for emphasis. This is enough contrast without relying on size alone.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Common multiples:

They hammer on 16px spacing—396 occurrences. This is the workhorse gap.

4.2 Layout

Breakpoints:

• 576px
• 768px
• 1312px
• 1440px
• 1680px
• 2048px

This covers mobile to ultra-wide displays. Layout likely shifts from single-column to multi-column masonry grid around 768px.

5. Visual Elements

Border Radius

They love 16px rounded corners—friendly but not cartoonish.

Shadows

Two shadows:

• rgba(0,0,0,0.45) 0px 2px 10px
• rgb(128,128,128) 0px 0px 5px

Very subtle, barely-there depth.

Borders

Mostly 2px solid transparent for buttons—used for focus outlines. Inputs have 1px solid #91918c neutral borders.

6. Components

6.1 Buttons

Primary Button:

• Default: BG rgb(230,0,35), text #000, padding 6px 14px, radius 16px, border 2px solid transparent.
• Active: BG token --comp-button-color-pressed-background-primary-default.
• Focus: outline and border at var(--sema-space-50) solid.

Secondary Button:

• Default: BG #e5e5e0, text #000, padding 6px 14px, radius 16px.
• Active: BG token --comp-button-color-pressed-background-secondary-default.
• Focus same as primary.

Text Button:

• Default: BG transparent, text #000, padding 0, radius 0, border 0.

6.2 Links

Variants:

• Default text #211922, no underline.
• Blue links #2b48d4, hover underline + #2741bf.
• Warning links #62625b with underline, hover changes to #993d00.
• White links for footer, hover underline + warning hover color.

6.3 Forms

Email input:

• Default: BG white, text black, border 1px solid #91918c, radius 16px, padding 11px 15px.
• Focus: Border and outline change to semantic tokens for hover border and focus outer.

No checkboxes or radios extracted.

6.4 Cards

No explicit card spec extracted, but given shadows and spacing, likely 16px padding, white BG, subtle shadow or border.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-link-blue: #2b48d4;
  --color-neutral-gray: #62625b;
  --color-link-hover-blue: #2741bf;
  --color-red-hover: #cc001f;
  --color-focus-blue: #435ee5;
  --color-light-gray: #dadad3;
  --color-brand-red: #e60023;
  --color-facebook-blue: #0866ff;
  --color-kakao-yellow: #ffeb3b;
  --color-whatsapp-green: #25d366;
  --color-discord-purple: #5865f2;
  --color-instagram-pink: #ff0076;
  --color-gmail-gray: #64656c;
  --color-reddit-orange: #ff4500;
  --color-google-messages-blue: #0057cc;
  --color-telegram-blue: #2aabee;
  --color-snap-yellow: #fffc00;
  --color-wechat-green: #05d50b;
  --color-line-green: #06c755;
  --color-primary-orange: #fe9752;
  --color-error-red: #dd0e0e;
  --color-success-green: #068440;
  --color-warning-orange: #b24700;

  /* Typography */
  --font-primary: "Pin Sans", -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial;
  --font-size-h1-xl: 4.38rem;
  --font-size-h1-lg: 3.75rem;
  --font-size-h1-md: 2.25rem;
  --font-size-h1-sm: 1.75rem;
  --font-size-body: 1rem;
  --font-size-caption-lg: 0.88rem;
  --font-size-caption-sm: 0.75rem;
  --line-height-tight: 1.10;
  --line-height-body: 1.40;
  --line-height-caption: 1.50;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-80: 80px;
  --space-100: 100px;
  --space-160: 160px;
  --space-240: 240px;
  --space-400: 400px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xxl: 16px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-50: 50px;
  --radius-full: 999px;
  --radius-half: 50%;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.45) 0px 2px 10px;
  --shadow-sm: rgb(128,128,128) 0px 0px 5px;
}

8. AI Coding Assistant Prompt

# Pinterest Design System Specification

You are a Pinterest design expert. Build UIs matching their visual language exactly.

## Brand Context
Pinterest values content-first design. UI elements are frames, not focal points. Colors are restrained, typography is custom, spacing is consistent. Interactions are clear but subtle.

## Color Palette
- Brand Red: #e60023 — Primary buttons, logo, key CTAs
- White: #ffffff — Backgrounds, cards
- Black: #000000 — Primary text
- Link Blue: #2b48d4 — Default link text
- Link Hover Blue: #2741bf — Link hover
- Neutral Gray: #62625b — Secondary text
- Light Gray: #dadad3 — Hover backgrounds
- Red Hover: #cc001f — Hover for red elements
- Focus Blue: #435ee5 — Focus outlines
- Error Red: #dd0e0e — Form errors
- Success Green: #068440 — Success icons
- Warning Orange: #b24700 — Warning text
- Social Colors: blue #0866ff (Facebook), yellow #ffeb3b (Kakao), green #25d366 (WhatsApp), purple #5865f2 (Discord), pink #ff0076 (Instagram), gray #64656c (Gmail), orange #ff4500 (Reddit), blue #0057cc (Google Messages), blue #2aabee (Telegram), yellow #fffc00 (Snapchat), green #05d50b (WeChat), green #06c755 (LINE)

## Typography
Font: "Pin Sans", -apple-system, system-ui, Segoe UI, Roboto, Oxygen-Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 XL | 70px | 600 | — | Hero titles |
| H1 LG | 60px | 600 | — | Hero titles (responsive) |
| H1 MD | 36px | 700 | 1.10 | Section titles |
| H1 SM | 28px | 700 | — | Subsection titles |
| Body Bold | 16px | 700 | 1.40 | Emphasized body text |
| Link MD | 16px | 500 | 1.40 | Primary links |
| Link | 16px | 400 | 1.40 | Secondary links |
| Caption Bold | 14px | 700 | — | Labels |
| Caption | 12px | 400 | 1.50 | Meta info |
| Button | 12px | 400 | — | Button text |

## Spacing & Grid
Base: 8px. Scale: 2, 4, 6, 8, 10, 11, 16, 20, 24, 32, 48, 80, 100, 160, 240, 400.
Use multiples of 8px for layout gaps. Buttons: 6px vertical padding, 14px horizontal. Cards: 16px padding.

## Border Radius
- none: 0px — sharp elements
- sm: 2px — badges
- md: 4px — small toggles
- lg: 8px — small containers
- xl: 12px — modals
- pill: 16px — buttons
- large: 24px, 32px — cards
- circle: 50%, 50px — avatars
- full: 999px — home pill link

## Shadows & Depth
- Medium: rgba(0,0,0,0.45) 0px 2px 10px
- Small: rgb(128,128,128) 0px 0px 5px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #e60023;
  color: #000000;
  padding: 6px 14px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-weight: 400;
  font-size: 12px;
}
.btn-primary:active {
  background: var(--comp-button-color-pressed-background-primary-default);
}
.btn-primary:focus {
  outline: var(--sema-space-50) solid;
  border: var(--sema-space-50) solid;
}

Secondary Button

.btn-secondary {
  background: #e5e5e0;
  color: #000000;
  padding: 6px 14px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-weight: 400;
  font-size: 12px;
}
.btn-secondary:active {
  background: var(--comp-button-color-pressed-background-secondary-default);
}

Input Field

.input-text {
  background: #ffffff;
  color: #000000;
  border: 1px solid #91918c;
  border-radius: 16px;
  padding: 11px 15px;
}
.input-text:focus {
  border: var(--sema-space-25) solid var(--sema-color-hover-border-interactive);
  outline: var(--sema-space-50) solid var(--sema-color-border-focus-outer-default);
}

Layout & Responsive Rules

Breakpoints: 576px, 768px, 1312px, 1440px, 1680px, 2048px. Max content width: 1440px for desktop grid. Mobile padding: 16px.

Interaction Rules

• Transition: 150ms ease for state changes
• Focus indicators: visible outlines using focus blue
• Hover states: subtle color shifts

DO List

• Use only defined palette colors
• Keep spacing in 8px multiples
• Use Pin Sans for all text
• Reserve brand red for primary CTAs
• Maintain generous border radius on buttons (16px)

DON'T List

• Add arbitrary shadows
• Mix sharp and rounded corners
• Use gradients outside defined tokens
• Change link colors outside palette
• Use brand red for non-interactive text

Code Examples

Primary Button:

<button class="btn-primary">Save</button>

Card:

.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

Form Input:

<input type="email" class="input-text" placeholder="Enter email" />

---

## 9. Summary

**TL;DR** — Pinterest’s design system is quiet but strict. The brand red is the loudest element, used sparingly. Everything else is neutral, rounded, and spaced on an 8px grid. Typography is custom, spacing is consistent, and interactions are subtle.

**Brand Keywords**:
- content-first
- restrained-color
- friendly-rounded
- grid-disciplined
- subtle-interactions