Design System
Analysis of Pinterest

A near-monochrome canvas of warm plum-black on white, kept deliberately calm so a single Pinterest red owns every action — and softened everywhere by 16px corners, pill buttons, and the rounded warmth of Pin Sans.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Pin Sans, Pinterest's proprietary humanist sans — shown here as Mulish, the nearest Google substitute. Hierarchy is built from size and weight, with tight negative tracking on the headings.

03 — Components

Button Variants

button-primary
Pinterest red, white label, 16px corners. The only high-chroma fill in the system — rationed to the single primary action.
button-dark
Warm plum-black (#211922) for confirm actions and inverted bands, where red would over-signal.
button-secondary
An outlined, fill-free sibling to the red CTA — used for the lower-priority second action.
button-pill
Fully-rounded pill on the 4% grey fill — Pinterest's shape for tags, filters and toggles.
04 — Components

Pins & Surfaces

Pins rest flat with no shadow and a 16px radius; a soft lift appears only on hover. Shape and white space do the separating, not borders.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A 4px base resolves to a clean 8 / 16 / 24 / 32 rhythm; 16px is the masonry gutter and the default padding unit.

07 — Foundations

Border Radius

One radius rules everything: 16px on inputs and pin cards, stepping up to 20px for modals and a full pill for buttons, badges and tags.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. Pins and cards rest here, carried by radius and whitespace.
Level 1 — soft 0 2px 8px rgba(0,0,0,.12) lift on pin hover.
Level 2 — 0 3px 12px rgba(0,0,0,.2), measured on the login modal floating over the dimmed grid.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxMasonry drops to 2 columns; top nav becomes a bottom tab bar; modals go full-bleed.
Tablet768–1023px3–4 columns; centred modals capped at ~484px wide.
Laptop1024–1279px4–5 columns with a persistent top / side navigation.
Desktop≥ 1280px6+ fluid columns; density scales with width instead of reflowing.

Pinterest scales column count fluidly rather than reflowing at hard breakpoints — the grid simply adds columns as space allows.

Pricing Tiers

Pinterest has no consumer pricing; these tiers are illustrative — flat cards, a red-free dark CTA, and a "Most popular" marker in brand red.

Personal
$0/forever
For everyone saving and organising ideas.
  • Unlimited boards & pins
  • Home feed recommendations
  • Save from anywhere
  • Visual search
Creator● Most popular
$12/month
Tools for people who publish ideas.
  • Everything in Personal
  • Idea Pins & scheduling
  • Audience analytics
  • Trending insights
Business
$39/month
Ads, catalogs and conversion tools.
  • Everything in Creator
  • Ads Manager
  • Product catalogs
  • Conversion tracking

Data Table

The utility side of the system — dense 12–14px type, quiet greys, and status as full-pill chips with red reserved for "Active".

IDCampaignImpressionsStatusWhen
#4821Spring Home Refresh1.2MActive2h ago
#4817Recipe Saves Boost884kActive5h ago
#4809Wardrobe Lookbook612kPaused1d ago
#4802DIY Weekend Ideas1.9MActive2d ago
#4794Travel Mood Boards430kPaused3d ago
1–5 of 412
123

Auth Forms

The real pattern, reproduced — a centred white sheet (20px corners, level-2 shadow) with pill inputs outlined in mid-grey and a single red submit.

Sign in

Log in to see more

OR
Create account

Sign up to get your ideas

OR