Pinimg (Pinterest) Design System Deep Dive

1. Brand Overview

Pinterest’s design language is deceptively simple. On the surface, it’s a clean, friendly UI with a lot of white space and rounded corners. But under the hood, there’s a tightly controlled design system that balances personality with clarity.

The vibe? Warm minimalism with pops of bold, confident color. The palette is loaded with functional tones: deep reds for action, soft neutrals for surfaces, and bright link blues for interactive cues. This isn’t a “flat” system—there’s depth through subtle shadows and nuanced hover states. But it’s nowhere near skeuomorphic. Everything feels intentional, from the fixed 8px radius logic to the way typography scales down gracefully across breakpoints.

Philosophically, Pinterest’s UI is about discovery without distraction. The feed is the hero, so interface elements take a back seat visually. Buttons are small and pill-like (16px radius), inputs are unobtrusive until focused, and links are color-coded by context. The system is designed for a massive range of content types—photos, videos, text posts—so the UI itself has to be a neutral stage.

The audience here is broad: casual browsers, creators, businesses. That means accessibility matters. Colors hit high contrast ratios. Type sizes are generous at the top of the hierarchy. Interactive states are clear, with hover/focus indicators that are easy to see but not garish.

One thing that stands out: Pinterest uses a lot of semantic color tokens (--sema-color-hover-text-link, --base-color-green-700), which indicates a mature design token strategy. This isn’t just “red for buttons”—it’s “primary default hover link” vs “secondary pressed background.” That precision is what keeps the UI consistent across thousands of variations.

If you’re building for this brand, the rule of thumb is: keep it light, keep it rounded, keep it clean. Let the content breathe. And always respect the palette—they’ve clearly invested in making it broad enough to cover every functional need without drifting into chaos.

2. Color System

2.1 Primary Colors

Pinterest’s main brand color is a saturated red (#e60023 from --sema-color-icon-verified-pinner), used for primary actions and branding marks. It’s aggressive enough to stand out against heavy visual content, but not so neon that it becomes fatiguing. Psychologically, red here signals “act now” — save, pin, follow.

Compared to social competitors:

• Facebook’s blue is calmer, more about stability.
• Instagram’s gradient is expressive and playful.
• Pinterest’s red is urgent and active.

The secondary “link blue” (#2b48d4) is used for hyperlinks and interactive text. It’s deep enough to pass WCAG contrast against white backgrounds.

2.2 Complete Palette

Here’s the extracted palette in table form:

…and many more functional tokens from the CSS variables list. The system is token-heavy, which means each color has a job.

2.3 Color Relationships

Contrast: White + link blue is high contrast (AA+), white + brand red is also strong. Gray text (#62625b) on white still passes AA for large text, but not AAA — fine for metadata.

Dark mode: No explicit dark mode palette in data, but darker neutrals (#181816, #33332e) suggest they have a dark theme internally.

2.4 Usage Guide

Works:

• Brand red for primary buttons with white text — clear, accessible.
• Link blue for text links — distinctive but harmonious.
• Soft gray backgrounds for hover states — keeps focus without shouting.

Avoid:

• Mixing two strong accent colors (red + blue) in the same element — creates visual conflict.
• Using brand red for non-interactive elements — dilutes its urgency.
• Putting gray text on gray backgrounds — kills contrast.

3. Typography

3.1 Font Families

Pinterest uses Pin Sans, a custom brand typeface, with a robust fallback stack:

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, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

No Google Fonts or Adobe Fonts — this is custom-hosted.

3.2 Type Scale

3.3 Hierarchy

The jump from 36px to 28px in headings is tight — keeps sections visually related. Body/link text at 16px is generous for readability. Captions drop to 14px or 12px, but still maintain high weight for clarity. No ultra-thin weights—minimum is 400.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px, but with irregular 2px/4px/5px increments for micro-spacing.

4.2 Layout

Breakpoints:

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

This suggests a responsive system with 6 tiers, scaling from mobile to ultra-wide desktop.

5. Visual Elements

Border Radius

Shadows

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

Subtle depth, used sparingly.

Borders

Mix of transparent 2px for button outlines, 1px solid for inputs.

6. Components

6.1 Buttons

Primary:

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

Secondary:

• Default: background: #e5e5e0, same padding/radius.
• Active: var(--comp-button-color-pressed-background-secondary-default).

Text button:

• Transparent background, no border, padding 0.

6.2 Links

Multiple styles:

• Neutral text (#211922), no underline.
• Blue link (#2b48d4) hover underline + color change.
• Accent colors for category links: gold (#c28b00), green (#618c7b), etc.
• Disabled/warning states in gray (#62625b).

6.3 Forms

Text inputs: borderless until focused. Email inputs: white background, 1px solid gray border, radius 16px, padding 11px 15px. Focus changes border and outline via tokens.

6.4 Cards

No explicit card data, but divs with 16px radius, subtle shadows.

7. Design Tokens (CSS)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-link-blue: #2b48d4;
  --color-neutral-gray: #62625b;
  --color-hover-link-blue: #2741bf;
  --color-hover-red: #cc001f;
  --color-hover-blue-accent: #435ee5;
  --color-wash-gray: #dadad3;

  /* Typography */
  --font-family-pin-sans: "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, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial;

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

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

8. AI Coding Assistant Prompt

# Pinterest (Pinimg) Design System Specification

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

## Brand Context
Pinterest’s design is warm minimalism: generous white space, rounded corners, and clear typography. It uses a red-driven action palette with functional blues and neutrals. The UI is a stage for varied content—keep interface elements subtle but clear.

## Color Palette
- White: #ffffff — Page backgrounds
- Black: #000000 — Text
- Brand Red: #e60023 — Primary actions, verified icons
- Link Blue: #2b48d4 — Links
- Hover Link Blue: #2741bf — Link hover
- Hover Red: #cc001f — Button hover
- Focus Blue: #435ee5 — Focus outline
- Neutral Gray: #62625b — Metadata
- Wash Gray: #dadad3 — Hover backgrounds
- Green 700: #103c25 — Success text
- Green 100: #c7f0da — Success background
- Blue 600: #273eb0 — Info text
- Orange 300: #fe9752 — Warnings
- Purple 700: #51005c — Recommendations
- Red 600: #900909 — Errors
- Gray 450: #181816 — Dark surfaces
- Gray Disabled: #91918c — Disabled text

## Typography
Font family: "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, ヒラギノ角ゴ Pro W3, メイリオ, Meiryo, ＭＳ Ｐゴシック, Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 Hero | 70px | 600 | — | Landing titles |
| Link Large | 60px | 600 | — | Promotional links |
| H1 | 36px | 700 | 1.10 | Section titles |
| H2 | 28px | 700 | — | Subheadings |
| Body Bold | 16px | 700 | 1.40 | Labels |
| Body Medium | 16px | 500 | 1.40 | Links |
| Body Regular | 16px | 400 | 1.40 | Text |
| Caption Bold | 14px | 700 | — | Metadata |
| Button Text | 12px | 400 | — | Buttons |
| Caption | 12px | 400 | 1.50 | Small text |

## Spacing & Grid
Base: 8px. Scale: 2px, 4px, 5px, 6px, 8px, 10px, 11px, 16px, 24px, 32px, 100px, 160px, 240px.

## Border Radius
- None: 0px — Flat elements
- Badge: 2px
- Switch: 4px
- Small: 8px
- Medium: 12px — Small cards
- Pill: 16px — Buttons, inputs
- Large: 24px — Cards
- XL: 32px — Containers
- Round: 50px — Idea cards
- Full: 50% — Circular buttons

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

## Component Specifications

### Primary Button
Default:
- background: #e60023
- color: #000000
- padding: 6px 14px
- border-radius: 16px
- border: 2px solid transparent
Hover: background: #cc001f
Active: background: var(--comp-button-color-pressed-background-primary-default)
Focus: outline: 2px solid #435ee5

### Secondary Button
Default:
- background: #e5e5e0
- same padding/radius
Active: var(--comp-button-color-pressed-background-secondary-default)

### Text Link
Default: color: #2b48d4, no underline
Hover: underline, color: #2741bf

### Input Field
Default: background: #ffffff, border: 1px solid #91918c, radius: 16px, padding: 11px 15px
Focus: border-color: var(--sema-color-hover-border-interactive), outline: solid var(--sema-color-border-focus-outer-default)

## Layout & Responsive Rules
Breakpoints: 576px, 768px, 1312px, 1440px, 1680px, 2048px

## Interaction Rules
- Transition: 150ms ease
- Focus indicators: token-driven outlines
- Loading states: opacity or spinner color tokens

## DO
- Use only palette colors
- Maintain 8px grid
- Use Pin Sans for all text
- Keep buttons pill-shaped
- Respect hover/focus states from tokens
- Ensure WCAG contrast

## DON'T
- Invent new colors
- Mix sharp and rounded corners
- Hide focus indicators
- Use shadows excessively

## Code Examples

```css
.btn-primary {
  background: #e60023;
  color: #000;
  padding: 6px 14px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-size: 12px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #cc001f; }
.btn-primary:focus { outline: 2px solid #435ee5; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

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

.card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.45) 0px 2px 10px;
}
```

9. Summary

TL;DR: Pinterest’s system is white-heavy, red-led, and token-driven. It’s friendly, rounded, and built for clarity across massive content variety. The rules are strict—respect the palette, the 8px grid, and the pill radii.

Brand Keywords:

• warm-minimalist
• token-driven-precision
• content-first
• rounded-friendly
• action-red