Reference fixture · pinterest

Find the next thing you love.

A warm-canvas token system distilled from Pinterest's 2026 brand — Pin Sans across the entire hierarchy, olive/sand neutrals that feel handcrafted, and Pinterest Red used once per screen as the only confident accent. The masonry below uses the same :root block agents paste into every artifact.

Explore tokens Read the brand

56 tokens passing schema Press ⌘ K to jump to the token grep.

What the fixture exercises

Three pins, one Pinterest Red, no cool grays.

Every visible value resolves through var(--*). The masonry offsets, the warm card surface, the 16px button radius, the plum-tinted whisper shadow on hover — all driven by the same paste block above.

Warmth as a system

Olive & sand neutrals

Surface, border, and meta colors all lean warm. The page never feels clinical — even the disabled state carries an olive undertone.

Inspect the neutrals

Pin Sans, end to end

One font, twelve to seventy

Pin Sans handles every label — 12px caption, 16px body, 70px hero. No secondary display family, no monospace beyond ⌘ hints.

Read the rule

Generous geometry

12, 16, 28 — never pill on text

Buttons land at 16px, pin cards at 28px, chips at 12px. Pinterest's soft geometry sits between sharp and pill — friendly, never corporate.

Inspect the radii

Form components

Save ideas to your private board.

Inputs sit on the white canvas with a 1px Warm Silver edge and the brand's 16px button radius. Focus rings switch to Focus Blue so they survive both the warm secondary surface and the red CTA — an accent-tinted ring would vanish into Pinterest Red.

Full reference at tokens.css · brand at DESIGN.md.