Color Palette
Brand & Primary Colors — Warm near-black + Pinterest Red
Dark Gray (body text)
#211922 · ×1232
Pinterest Red ★
#E60023 · ×18
Red 2 (orange-red)
#FA5F2E · ×5
Grayscale — Warm toned (slight yellow cast)
Gray 300 (body 2)
#62625B · ×16
Gray 200 (mid)
#91918C · ×3
Gray 150 (border)
#C1C1C1 · ×1
White 2 (surface)
#F6F6F3 · ×1
Mid Gray 2 (shadow)
#808080 · ×1
Accent Colors — Blues, Purple, Cyan, Pink, Yellow
Blue/Purple 2
#9270D7 · ×2
Cyan (success)
#2AA788 · ×2
Pink (special)
#C856C8 · ×3
Gestalt :root Base Color Scale — Grayscale + Pinterest brand (500 steps each hue)
The :root layer contains a full 3-tier token architecture: --base-* → --sema-* → --comp-* with full red/blue/purple/green/orange hue scales at 50–700, hover/pressed state variants, and social sharing button colors for 20+ platforms.
Typography
--font-family-base · Pin Sans (proprietary) + system stack
Pin Sans
Discover recipes, home ideas, style inspiration and other ideas to try. Save Pins to collections and share them.
Regular · 400
Medium · 500
Semibold · 600
Bold · 700
Black · 900
--font-family-2 · -apple-system → Pin Sans fallback
System stack · Japanese support
"SF Pro JP",-apple-system,"BlinkMacSystemFont","Segoe UI","Hiragino Kaku Gothic Pro","メイリオ","Arial",sans-serif
Gestalt Design System
--gestalt-theme: calico
Save ideas
Display 1000 · 70px · Black 900 · line-height: 77px · letter-spacing: −1.2px
Get inspired every day
Display 900 · 50px · Black 900 · line-height: 55px
Discover what you love
Display 700 · 38px · Black 900 · line-height: 42px
Create collections that inspire
Heading 700 · 28px · Bold 700 · line-height: 32px
Pinterest helps you find and save ideas you love — from recipes and travel to fashion and home decor.
Body 400 (sema-body-400) · 20px · Regular · line-height: 28px
Start by creating a board to save your favourite Pins.
Body 300 (sema-body-300) · 16px · Regular · line-height: 22.4px
POPULAR · TRENDING · SEASONAL
Compact 100 · 12px · Medium 500 · letter-spacing: 0.3px
Letter Spacing — 1 token (−1.2px for display only)
Save ideas you love
--letter-spacing-tight
−1.2px · Display headings (font-size 28px+, weight 700+) only
Body, UI elements, labels — no tracking applied. Gestalt semantic font tokens default to 0 letter-spacing for all body and UI roles.
Body / UI default
0 · All body, UI, compact roles via --sema-font-letterspacing-body-* and ui-*
Spacing
Spacing Scale
23 steps · 4px base unit (--base-space-unit: 4px) · Semantic negative space tokens (−1px to −64px) in :root · Outlier: --space-24 = 343.523px (likely a layout calculation anomaly)
Borders
Border Radii — 12 tokens (richest in this series)
sm (bottom)
0/0/32/32px · ×1
Pinterest has the most radius tokens in the series. The dominant token is --radius-2xl: 16px (×36), used on all Pin cards. The 40px pill button (r10) is the signature CTA shape.
Border Widths — 3 tokens (unique: 8px base)
--border-width-hairline
1px · ×16
--border-width-thin
2px · ×64 (dominant)
--border-width-base
8px · ×20 — selection/focus ring on Pin cards
Shadows / Elevation
Shadow Tokens — 3 levels
Unique: --shadow-lg uses a solid rgb(128,128,128) color instead of rgba — distinct mid-gray glow rather than black shadow
Surface
×1
rgba(0,0,0,0.2) · 0px 0.5px 3px · subtle definition for cards at rest
Raised
×1
rgba(0,0,0,0.45) · 0px 2px 10px · Pin card on hover, menus, dropdowns
Floating (gray glow)
×1
rgb(128,128,128) · 0px 0px 5px · solid color shadow — used for focus/modal state
Z-Index
7 layers — 1→2→3→4→5 then a dramatic jump to 671 and 1500. The z=1 through z=5 cluster handles Pinterest's masonry layout ordering. The jump to 671 is for the top navigation/sticky header overlay. z=1500 is the highest-priority modal layer (shopping cart, full-screen Pin viewer).
| Layer | Value | Usage |
|---|
| --z-1 (Content 1) | 1 | Base stacking — Pin card image layer |
| --z-2 (Content 2) | 2 | Pin card overlay text, hover states |
| --z-3 (Content 3) | 3 | Badges, indicators on cards |
| --z-4 (Content 4) | 4 | Quick-save button, card action layer |
| --z-5 (Content 5) | 5 | Tooltips, contextual overlays within grid |
| --z-6 (Navigation) | 671 | Sticky navigation bar — dramatic jump above content z-stack (1–5) |
| --z-7 (Modal top) | 1500 | Full-screen Pin viewer, shopping cart, modals, drawers — absolute top layer |
Breakpoints
7 breakpoints — 576px → 2048px. Widest range in the series, extending to 2048px (4K support). Custom non-standard values: 890px, 1312px, 1680px — driven by Pinterest's masonry column count system rather than generic screen sizes.
--breakpoint-xs
576px
Mobile large
--breakpoint-sm
768px
Tablet portrait
--breakpoint-md
890px
Tablet landscape (custom)
--breakpoint-lg
1312px
Desktop (custom — Pin columns)
--breakpoint-xl
1440px
Desktop wide
--breakpoint-2xl
1680px
Desktop XL (custom)
--breakpoint-3xl
2048px
4K / ultra-wide display
Opacity
4 extracted opacity tokens — asymmetric pairs: 22%/26% (faint overlays) and 74%/78% (strong overlays). Used for scrim/wash backgrounds in the Pin card hover system. The :root semantic layer additionally defines --sema-opacity-* at 0/4/20/40/60/80/90/100%.
Opacity Tokens
Asymmetric faint/strong pairs for image overlays
--opacity-22
22% · ×1 — faint wash
--opacity-26
26% · ×2 — light scrim
--opacity-74
74% · ×2 — strong overlay
--opacity-78
78% · ×1 — opaque overlay
Accessibility
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1. Notable: Pinterest Red (#E60023) on white fails AA for normal text at 4.5:1 threshold.
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| #211922 (Dark Gray) | #000000 (Black) | 1.23:1 | Fail |
| #211922 (Dark Gray) | #FFFFFF (White) | 17.12:1 | AAA |
| #211922 (Dark Gray) | #E60023 (Red) | 3.58:1 | AA Large |
| #211922 (Dark Gray) | #FA5F2E (Red 2) | 5.49:1 | AA |
| #211922 (Dark Gray) | #E0E0D9 (Light Gray) | 12.91:1 | AAA |
| #62625B (Dark Gray 2) | #000000 (Black) | 3.42:1 | AA Large |
| #62625B (Dark Gray 2) | #FFFFFF (White) | 6.14:1 | AA |
| #62625B (Dark Gray 2) | #E60023 (Red) | 1.28:1 | Fail |
| #62625B (Dark Gray 2) | #E0E0D9 (Light Gray) | 4.63:1 | AA |
| #2B48D4 (Blue) | #FFFFFF (White) | 7.05:1 | AAA |
| #2B48D4 (Blue) | #E60023 (Red) | 1.47:1 | Fail |
| #2B48D4 (Blue) | #E0E0D9 (Light Gray) | 5.31:1 | AA |
| #9270D7 (Blue 2) | #000000 (Black) | 5.52:1 | AA |
| #9270D7 (Blue 2) | #FFFFFF (White) | 3.8:1 | AA Large |
| #2AA788 (Cyan) | #000000 (Black) | 6.98:1 | AA |
| #2AA788 (Cyan) | #FFFFFF (White) | 3.01:1 | AA Large |
CSS Variables Reference
Dark Gray (body ×1232)--color-dark-gray#211922
Black (×226)--color-black#000000
White (×166)--color-white#FFFFFF
Pinterest Red ★ (×18)--color-red#E60023
Blue link (×14)--color-blue#2B48D4
Red-orange (×5)--color-red-2#FA5F2E
Pink (×3)--color-pink#C856C8
Cyan/success (×2)--color-cyan#2AA788
Pin Sans (proprietary)--font-family-basePin Sans
400/500/600/700/900weights5 weights
Display (70px · Black 900)--font-size-3xl70px
Body default (20px)--font-size-base20px
Compact / Label (12px)--font-size-2xs12px
Display tight--letter-spacing-tight−1.2px
Base (dominant ×37)--space-14px
Standard (×66)--space-1616px
Hero (×7)--space-256100px
Hairline (×16)--border-width-hairline1px
Thin (dominant ×64)--border-width-thin2px
Base (focus/selected ×20)--border-width-base8px
2xl (dominant ×36)--radius-2xl16px
r10 (CTA button ×15)--radius-r1040px
r12 (pill)--radius-r12999px
Instant (×44)--duration-instant0.085s
Slow / animations (×40)--duration-slow1s
ease-out (×44)--easing-ease-outcubic-bezier(0.05,0.7,0.1,1)
Spring (fast/medium/slow)--sema-motion-spring-*linear() physics
Faint wash--opacity-2222%
Light scrim--opacity-2626%
Strong overlay--opacity-7474%
Opaque overlay--opacity-7878%
Content layers 1–5--z-1/2/3/4/51 / 2 / 3 / 4 / 5
Navigation (jump)--z-6671
Modal / Pin viewer (top)--z-71500
Mobile large--breakpoint-xs576px
Tablet portrait--breakpoint-sm768px
Tablet landscape (custom)--breakpoint-md890px
Desktop (Pin columns)--breakpoint-lg1312px
Desktop wide--breakpoint-xl1440px
Desktop XL (custom)--breakpoint-2xl1680px
4K / ultra-wide--breakpoint-3xl2048px
:root token architecture: --base-* (primitives) → --sema-* (semantic) → --comp-* (component). Spring physics via CSS linear() function. 20+ social platform brand colors.
Pinterest Design System (Gestalt · calico · lightMode) · Generated 17/04/2026 · 21 color tokens · 2 font families (Pin Sans + system) · 5 font weights · 8 font sizes · 5 line heights · 1 letter-spacing · 23 spacing steps · 12 radius tokens · 3 border widths · 3 shadows · 6 motion tokens (incl. 3 spring curves) · 7 z-index (1–5 + 671 + 1500) · 7 breakpoints (576–2048px) · 4 opacity tokens