Pinterest Design System

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.