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. 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. 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.
01 — Color
Pinterest Red on a quiet warm-cream chrome. The brand red carries every primary action; everything else is monochrome neutral with a faint warm cast.
Brand & Accent
Surface
Text
Semantic
02 — Typography
Pin Sans across every text role with -1.2px tracking on display tiers. Steep hierarchy: 70px display drops directly to 16px body with no intermediate.
03 — Components
Pinterest Red primary, gray-cream secondary, transparent tertiary, plus pill-on-image and circular-icon variants for in-pin chrome.
04 — Signature
Column-based layout where each pin's natural aspect ratio is preserved. Tiles are 16px-radius cards (32px for large) with 8px gutters — the imagery effectively touches across columns.
05 — Tiles
Square 1:1 tiles with a 16px radius and a category label anchored at the bottom over a darkened image gradient.
06 — Cards
Three card families: a standard feature card on canvas, a soft variant on cream, the modal-card overlay, and the dark hero CTA strip on create.pinterest.com.
Search with skin tone ranges for beauty ideas that represent you.
Visualize your ideas with others, using a Pinterest account.
Search objects within an image to find more styles you'll love.
Modal Card (login overlay)
Find new ideas to try
Hero CTA Strip (create.pinterest.com)
07 — Forms
16px-radius rectangle inputs with the signature double-ring focus signal: 2px ink inner border + 4px focus-blue outer outline.
08 — Layout
8px base with finer 4/6/7px steps for tight inline gaps. Section rhythm sits at 64px; pin grid gutters tighten to 8px so imagery effectively touches.
09 — Shapes
Three values do all the work: 16px for most components, 32px for large cards and modals, pill (9999px) for circular elements. No mid-radius value between md and lg.
Footer, primary nav, page sections
Rare medium-radius surface (e.g., editorial tooltip)
Buttons, inputs, pin cards, feature cards
Large pin cards, modal cards
Search bar, filter chips, pin overlay pills, avatars
10 — Depth
No drop-shadow elevation in content surfaces. Pin cards sit flat. The only shadow appears on the modal layer.
11 — Responsive
Pin masonry collapses from 5–6 columns at ultrawide down to 1 column at mobile while preserving each tile's natural aspect ratio.
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Pin grid 5–6 columns; max-width holds at 1280px |
| desktop-large | 1440px | Default — 4-column pin grid, full primary nav |
| desktop | 1280px | Same layout with narrower outer gutters |
| desktop-small | 1024px | Pin grid → 3 columns |
| tablet | 768px | Pin grid → 2 columns; nav becomes hamburger; search collapses |
| mobile | 480px | 1-column grid; hero 70px → ~44px |
| mobile-narrow | 320px | Hero → ~36px; section padding 32px |