---
version: alpha
name: Pinterest
website: "https://www.pinterest.com"
description: |
  A photography-first discovery system organized around the Pinterest Red CTA, the masonry pin grid, and a soft warm-cream chrome that gets out of the imagery's way. The home page is a content-discovery tool wearing the chrome of a magazine publisher: 70px display headlines, friendly Pin Sans typography, fully-rounded pill buttons (16px) on a cream-tinted neutral palette, and a sticky red "Sign up" CTA that anchors every viewport. Pin imagery is the system's load-bearing visual element — square, portrait, and landscape pins tile in a column-based masonry grid where each tile is a fully-rounded 16px-radius card, separated by tight 8px gutters. The chrome is otherwise quiet: warm grays, true whites, and a single saturated red — no decorative gradients, no atmospheric backgrounds, no shadows beyond a soft modal scrim.

seo:
  title: "Pinterest Design System for React — Pinterest Red #e60023, Pin Sans, 25 components"
  metaDescription: "Pinterest's design system as a DESIGN.md file. Pinterest Red #e60023, Pin Sans, 28 colors, 25 components. For React, Next.js, and AI tools."
  highlights:
    - "Single-accent voltage — Pinterest Red #e60023 reserved for Sign-up CTAs, active tabs, and the wordmark, never decorative"
    - "Two-radius shape system — 16px on every button and pin card, 32px on modals and large pins, nothing in between"
    - "Steep type jump — 70px Pin Sans display drops directly to 16px body with no intermediate tier on the home hero"
    - "Masonry pin grid at 8px gutters — imagery effectively touches across columns, the tightest grid in mainstream marketing"
    - "Warm-cream chrome — #f6f6f3 card surface and #fbfbf9 page wash recede behind photography without competing"
  tags:
    - "Social & Community"
  lastUpdated: "2026-05-12"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Pinterest's marketing system is the discipline of getting out of the photograph's way. The chrome runs a warm-cream neutral palette — #fbfbf9 page wash, #f6f6f3 card surface, true #ffffff canvas — with Pin Sans typography in tight negative-tracked display sizes, and a single saturated Pinterest Red (#e60023) reserved exclusively for the Sign-up CTA, the active-tab indicator, and the brand wordmark. The home page alternates two surface modes: hero/CTA chrome with 70px display headlines and alternating left/right feature cards, then a column-based masonry pin grid where each tile is a 16px-radius card at its natural aspect ratio with 8px gutters between columns.

    This page packages all of that into a single DESIGN.md file written to the Google Labs open specification. Inside: 28 color tokens grouped into brand, surface, text, semantic, and editorial-accent buckets; 14 Pin Sans typography roles from 70px display-xl down to 12px caption-sm; five border-radius values where only three see active use (16px, 32px, pill); a nine-step 8px-based spacing scale; and 25 components covering buttons, filter chips, search bar, pin cards, modal, primary nav, and footer. Each component declares its background, text color, typography, radius, and padding by referencing tokens — every value resolves back to a quoted hex or pixel literal.

    Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Pinterest's restraint — the single red accent, the warm-cream surfaces, the masonry pin grid, the two-radius shape vocabulary — rather than inventing a generic photography theme. Reference tokens directly in Tailwind config or CSS variables when you want one specific value. The system is worth studying because it commits hard to one rule most photo-led brands hedge on: type and chrome serve the imagery, never compete with it.
  related:
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "/blocks"
      title: "React blocks for shadcn/ui"
      description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives."
  questions:
    - id: "primary-color"
      title: "What is Pinterest's primary brand color?"
      answer: "Pinterest's brand color is Pinterest Red — #e60023, a single saturated red that's the only highly-chromatic color in the entire chrome. It's used scarcely: the always-red Sign-up CTA anchored in the top nav, the active-tab indicator, and the brand wordmark. Pressed state drops one notch deeper to #cc001f. Every other surface in the system is monochrome warm-cream or near-black, so the red functions as the page's single voltage rather than a decorative tone."
    - id: "typography"
      title: "What typography does Pinterest use, and what should I use if Pin Sans isn't available?"
      answer: "Pinterest runs Pin Sans, a proprietary geometric sans-serif licensed only to Pinterest, with weights 400/500/600/700 and fallbacks through -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial. The spec captures 14 type tokens from 70px display-xl down to 12px caption-sm, with aggressive -1.2px negative tracking on display tiers. Inter is the closest open-source substitute — geometry and x-height match within ~3% at body sizes. Manrope is a strong alternate for the 70px display tier where tighter tracking helps. Apply -1.2px letter-spacing on whichever substitute you choose at display sizes."
    - id: "shape-system"
      title: "How does Pinterest's border-radius system work?"
      answer: "Pinterest uses a deliberately narrow two-radius vocabulary plus pill. Most components — buttons, inputs, pin cards, feature cards, category tiles — sit at 16px (rounded.md). Large pin cards and modal cards step up to 32px (rounded.lg). Circular elements like the search bar, filter chips, pin overlay pills, and icon-circular buttons go fully pill (9999px). There are no sharp-cornered interactive elements anywhere in the system, and the spec explicitly forbids introducing a third radius value between 16px and 32px."
    - id: "masonry-grid"
      title: "What makes the pin masonry grid different from a normal card grid?"
      answer: "The pin grid is column-based rather than row-based — each column packs tiles independently so pins of different aspect ratios (square 1:1, portrait 2:3 / 3:4 / 4:5) tile without gaps. Gutters are 8px horizontal and vertical, the tightest in mainstream marketing, so adjacent pins effectively touch across columns. Pin cards carry 16px corner rounding with zero internal padding — the photograph IS the card. The grid auto-fits 5–6 columns at ultrawide, 4 at desktop, 3 at tablet, 2 at mobile-landscape, 1 at mobile."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React content-discovery app?"
      answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce Pinterest's restraint rather than a generic photography theme. The single Pinterest Red accent, warm-cream chrome, 16px-radius pin cards, and 8px-gutter masonry grid all encode as tokens the AI can map to Tailwind classes or CSS variables. Reference values directly when you want one specific number — {colors.primary} resolves to #e60023, {rounded.md} to 16px, {spacing.section} to 64px."
    - id: "known-gaps"
      title: "What's missing from this DESIGN.md spec?"
      answer: "Several things, documented in the Known Gaps section: mobile screenshots weren't captured (responsive behavior synthesizes Pinterest's known mobile patterns from desktop evidence), hover states are intentionally undocumented per system policy, the pin-detail close-up overlay (single-pin view with comments and related pins) isn't in the captured surfaces, authenticated chrome (logged-in feed, board pages, profiles) is out of scope, the native mobile-app screens aren't represented, and form-validation states beyond focused are not documented."

colors:
  primary: "#e60023"
  on-primary: "#ffffff"
  primary-pressed: "#cc001f"
  ink: "#000000"
  ink-soft: "#211922"
  body: "#33332e"
  charcoal: "#262622"
  mute: "#62625b"
  ash: "#91918c"
  stone: "#c8c8c1"
  hairline: "#dadad3"
  hairline-soft: "#e5e5e0"
  on-secondary: "#000000"
  secondary-bg: "#e5e5e0"
  secondary-pressed: "#c8c8c1"
  canvas: "#ffffff"
  surface-soft: "#fbfbf9"
  surface-card: "#f6f6f3"
  surface-elevated: "#ffffff"
  on-dark: "#ffffff"
  on-dark-mute: "rgba(255,255,255,0.7)"
  surface-dark: "#262622"
  focus-outer: "#435ee5"
  focus-inner: "#ffffff"
  accent-pressed-blue: "#617bff"
  accent-purple: "#7e238b"
  accent-purple-deep: "#6845ab"
  success-deep: "#103c25"
  success-pale: "#c7f0da"
  error: "#9e0a0a"
  error-deep: "#cc001f"

typography:
  display-xl:
    fontFamily: Pin Sans
    fontSize: 70px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  display-lg:
    fontFamily: Pin Sans
    fontSize: 44px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -0.8px
  heading-xl:
    fontFamily: Pin Sans
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -1.2px
  heading-lg:
    fontFamily: Pin Sans
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0
  heading-md:
    fontFamily: Pin Sans
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  body-md:
    fontFamily: Pin Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-strong:
    fontFamily: Pin Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-sm:
    fontFamily: Pin Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  body-sm-strong:
    fontFamily: Pin Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.4
    letterSpacing: 0
  caption-md:
    fontFamily: Pin Sans
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0
  caption-sm:
    fontFamily: Pin Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  link-md:
    fontFamily: Pin Sans
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  button-md:
    fontFamily: Pin Sans
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0
  button-sm:
    fontFamily: Pin Sans
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: 0

rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 32px
  full: 9999px

spacing:
  xxs: 4px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 32px
  section: 64px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 6px 14px
    height: 40px
  button-primary-pressed:
    backgroundColor: "{colors.primary-pressed}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
  button-secondary:
    backgroundColor: "{colors.secondary-bg}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
    padding: 6px 14px
    height: 40px
  button-secondary-pressed:
    backgroundColor: "{colors.secondary-pressed}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
  button-tertiary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.md}"
  button-icon-circular:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
    size: 40px
  button-pill-on-image:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 8px 14px
  button-disabled:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ash}"
    rounded: "{rounded.md}"
  search-bar:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.full}"
    padding: 11px 15px
    height: 48px
  search-bar-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.full}"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: 11px 15px
    height: 44px
  text-input-focused:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
  pin-card:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
  pin-card-large:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
  pin-overlay-pill:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-sm}"
    rounded: "{rounded.full}"
    padding: 6px 12px
  filter-chip:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: 8px 16px
  filter-chip-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
  category-tile:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    rounded: "{rounded.md}"
    padding: 16px
  feature-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-xl}"
    rounded: "{rounded.md}"
    padding: 32px
  feature-card-soft:
    backgroundColor: "{colors.surface-card}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-xl}"
    rounded: "{rounded.md}"
    padding: 32px
  modal-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: 32px
  hero-cta-strip:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.heading-xl}"
    rounded: "{rounded.none}"
    padding: 48px 32px
  primary-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-strong}"
    rounded: "{rounded.none}"
    height: 64px
  footer-section:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.mute}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: 32px 24px
  link-inline:
    textColor: "{colors.ink-soft}"
    typography: "{typography.link-md}"
---

## Overview

Pinterest's marketing system is built around a single instructional principle: get out of the photograph's way. The chrome is a quiet warm-cream neutral palette (#fbfbf9, #f6f6f3, #ffffff) carrying typography in Pinterest's proprietary Pin Sans face, with Pinterest Red (#e60023) reserved exclusively for the "Sign up" CTA, the active-tab indicator, and the sticky top-nav anchor. Every other surface is allowed to fade behind the imagery — pin tiles, category tiles, content thumbnails, profile shots — that constitutes the actual product.

The design system has two distinct surface modes that alternate down the home page: the hero/CTA chrome (cream surfaces, large 70px Pin Sans display headlines, alternating left/right photo-illustrated feature cards) and the content masonry (a column-based grid of 16px-radius pin cards on #f6f6f3 with no internal padding — the pin is the card). The search results page is almost pure masonry: a tight column grid of pin imagery in mixed aspect ratios, with a small filter-chip strip at the top and the sticky red Sign-up CTA in the upper-right corner. The create.pinterest.com business surface inverts the grid back to a more traditional editorial layout but keeps every other rule of the system: Pin Sans, cream chrome, red CTA, 16px-radius pills.

The system's signature gesture is shape geometry: 16px radius for nearly every surface — buttons, inputs, pin cards, feature cards — and 32px radius reserved for pin-card-large and modal cards. There are exactly three radius values in active use: 16px, 32px, and pill (9999px). The system never goes flat (sharp corners) and never goes radius-medium — those two values are the entire shape vocabulary.

**Key Characteristics:**
- Single-accent CTA: Pinterest Red #e60023 carries every primary action; everything else is monochrome
- Pin Sans proprietary typography across every text role from 70px display-xl down to 12px caption-sm — no serif, no monospace anywhere
- Two-radius shape system: 16px for most components, 32px for large cards and modals, pill for circular elements
- Masonry pin grid as the load-bearing visual element — column-based layout where each pin's natural aspect ratio is preserved
- Warm-cream neutral chrome (#f6f6f3) that softly recedes behind imagery without competing
- Sticky top nav with the always-red Sign-up CTA anchored in the upper-right at every breakpoint
- Modal overlay (login/signup) using a soft scrim over the page content rather than a navigation jump

## Known Gaps

- **Mobile screenshots not captured** — responsive behavior synthesizes Pinterest's known mobile pattern (hamburger drawer, single-column grid, hero downscale) from desktop evidence and the documented breakpoint stack.
- **Hover states not documented** by system policy.
- **Pin-detail close-up (single pin overlay)** is not in the captured set — the in-product Pin detail view (with comments, related pins, save board picker) likely introduces components not documented here.
- **Authenticated chrome** (logged-in home feed, board pages, profile pages) not in the captured pages — the captured surfaces are the logged-out marketing and search experience.
- **Pinterest mobile app screens** not in the system documented here — this is the web-only chrome.
- **Form validation states** (success / error inline messages) not documented; only the focused-state field is captured.