What typography does Pinterest use, and what should I use if Pin Sans isn't available?

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.

How does Pinterest's border-radius system work?

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.

What makes the pin masonry grid different from a normal card grid?

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.

Can I use this DESIGN.md to build my own React content-discovery app?

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.

What's missing from this DESIGN.md spec?

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.

Pinterest Design System

Pinterest's design system as a DESIGN.md file.

About Pinterest DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source pinterest.com

Social & Community

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.

What makes it distinct

Single-accent voltagePinterest Red #e60023 reserved for Sign-up CTAs, active tabs, and the wordmark, never decorative
Two-radius shape system16px on every button and pin card, 32px on modals and large pins, nothing in between
Steep type jump70px Pin Sans display drops directly to 16px body with no intermediate tier on the home hero
Masonry pin grid at 8px guttersimagery 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

Live at pinterest.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

pinterest.com

Explore Pinterest

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.