Switch between the rendered Visual preview and the Raw DESIGN.md.
Pinterest's design system embodies a modern, inclusive, and vibrant aesthetic that celebrates discovery and creative expression. The visual language combines clean, minimalist surfaces with purposeful pops of bold color, creating an inviting environment where diverse content can shine. The design prioritizes accessibility and clarity while maintaining a sophisticated, contemporary feel. Generous whitespace, smooth interactions, and a carefully curated color palette work together to foster a sense of calm exploration rather than overwhelming stimulus. The system emphasizes human connection through imagery, with typography and interface elements stepping back to support rather than dominate the visual narrative.
Key Characteristics
#211922): Core brand color and dominant neutral; used for primary text, headings, and brand identity#E60023): Primary call-to-action; saves, primary buttons, and high-priority actions#DD0E0E): Error states, danger actions, and critical alerts#7360F2): Secondary accent for highlights and interactive elements#774FC4): Tertiary accent for gradients and layered interactions#6845AB): Accent for elevated or featured content#583B91): Alternative accent for dark mode or subtle highlights#0866FF): External integrations and social links#5BF675): Success states and positive confirmations#25D366): Alternative success and growth indicators#FFFC00): Warning states and attention-grabbing alerts#FFEB3B): Secondary warning and informational highlights#E60023): Primary button, links, and interactive CTAs#E5E5E0): Secondary buttons and ghost states#62625B): Tertiary actions and subtle interactions#000000): Maximum contrast text and critical UI elements#181816): Deep neutral for backgrounds and text emphasis#242421): Slight relief from absolute black#62625B): Secondary text, placeholders, and disabled states#EFEFEF): Subtle dividers and background tints#E5E5E0): Secondary backgrounds and surface accents#F6F6F3): Primary backgrounds and safe zones#FFFFFF): Card surfaces, modals, and maximum contrast backgrounds#62625B): Default borders and subtle dividers#F6F6F3): Primary background and container fill#E5E5E0): Secondary surfaces and subtle backgrounds#211922): Dark mode containers and overlays#5BF675): Confirmation, positive feedback, and approved states#FFFC00): Caution, pending states, and non-critical alerts#E60023): Destructive actions, validation failures, and critical issuesPrimary Font: Pin Sans (fallback stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif)
Secondary Font: Pin Sans (same family used throughout for consistency)
All typography uses Pin Sans exclusively for a cohesive, modern voice.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | Pin Sans | 24px | 700 | 26.4px | 0px | Hero headlines and page titles |
| Heading 2 (H2) | Pin Sans | 16px | 700 | 22.4px | 0px | Section titles and card headers |
| Heading 3 (H3) | Pin Sans | 14px | 700 | 19.6px | 0px | Subsection titles and emphasis |
| Body Text | Pin Sans | 14px | 400 | 19.6px | 0px | Default paragraph and list text |
| Body Small | Pin Sans | 12px | 400 | 18px | 0px | Captions, meta information, and footnotes |
| Button Text | Pin Sans | 12px | 400 | 16.8px | 0px | All button labels and interactive text |
| Input Text | Pin Sans | 16px | 400 | 22.4px | 0px | Form inputs and search fields |
| Code / Monospace | Pin Sans | 12px | 400 | 18px | 0px | Code snippets and technical content |
Primary Button (Large CTA)
#E60023#00000012px4006px 14px48px16px2px solid rgba(255, 255, 255, 0)none0.9, slightly darker shade #CC001F0.85, pressed appearancePrimary Button (Compact)
#E60023#00000012px4006px 14px48px16pxnonenone#CC001F, cursor pointerSecondary Button (Light)
#E5E5E0#00000012px4006px 14px48px16px2px solid rgba(255, 255, 255, 0)none#D4D4CF, slightly darkenedSecondary Button (Compact)
#E5E5E0#00000012px4006px 14px48px16pxnonenone#D4D4CFGhost Button (Icon)
rgba(255, 255, 255, 0)#00000012px4000px48px48px0pxnonenonergba(0, 0, 0, 0.05), subtle highlightStandard Card
#FFFFFF16px1px solid #E5E5E016px0px 1px 3px rgba(0, 0, 0, 0.08)0px 2px 8px rgba(0, 0, 0, 0.12), slight lift effectElevated Card (Featured Content)
#FFFFFF16pxnone24px0px 4px 12px rgba(0, 0, 0, 0.15)0px 8px 24px rgba(0, 0, 0, 0.2)Content Container
#F6F6F312px24pxnonenoneText Input (Search)
rgba(0, 0, 0, 0)#00000016px4000px48px0pxnonenone2px solid #E60023#62625BText Input (Form Field)
rgba(255, 255, 255, 0)#00000016px40011px 15px48px16px1px solid #919190none1px solid #E60023, background #FFFFFF#EFEFEF, border 1px solid #E5E5E0, color #62625BText Input (Compact)
#FFFFFF#00000012px4000px40px0px1px solid #C1C1C1none1px solid #E60023Top Navigation Bar
#FFFFFF#21192212px40016px80px0pxnone0px 1px 0px rgba(0, 0, 0, 0.05)#211922#E60023, underline none700, color #E60023Navigation Link (Text)
rgba(0, 0, 0, 0)#21192212px4000px0pxnonenone#E60023, underline noneNavigation Link (Pill)
rgba(255, 255, 255, 0)#21192212px4006px 14px21px999px1px solid transparentnone#E5E5E0, color #211922#E60023, color #000000Base Unit: 4px
Spacing Scale:
4px: Micro spacing between inline elements8px: Tight spacing between components12px: Default spacing between related elements16px: Standard spacing between sections24px: Medium spacing for visual breathing room32px: Large spacing between major sections36px: Extra spacing for emphasis40px: Large vertical spacing64px: Extra large vertical spacing92px: Padding for large containers100px: Padding for oversized containers120px: Maximum spacing for hero sectionsUsage Context:
Max Width: 1440px (desktop viewport match in tokens)
Column Strategy: 12-column flexible grid system
Responsive Container Widths:
40px side padding24px side padding16px side paddingSection Patterns:
Pinterest's layout philosophy centers on content prominence through restraint. UI elements occupy only necessary space, allowing images and user content to dominate visual attention. Vertical rhythm is established through consistent spacing multiples, creating visual flow without rigidity. Padding within containers remains generous (16px–24px) to prevent visual crowding, while margins between sections scale based on hierarchy importance. The design actively uses negative space as a design element—empty space is not wasted but intentional and purposeful.
0px: Navigation bars, dividers, and full-width elements2px: Small badges and micro-interactions12px: Cards, containers, and secondary elements16px: Buttons, input fields, and primary interactive surfaces999px: Pill-shaped elements, avatars, and fully rounded components| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow | Navigation, backgrounds, dividers, flat text |
| Raised (1) | 0px 1px 3px rgba(0, 0, 0, 0.08) | Default cards, subtle interactions |
| Floating (2) | 0px 2px 8px rgba(0, 0, 0, 0.12) | Hovered cards, slightly elevated states |
| Elevated (3) | 0px 4px 12px rgba(0, 0, 0, 0.15) | Featured cards, popovers, dropdowns |
| Modal (4) | 0px 8px 24px rgba(0, 0, 0, 0.2) | Modals, dialogs, deep interactions |
| Overlay (5) | 0px 12px 32px rgba(0, 0, 0, 0.25) | Overlays, notifications, critical modals |
Shadow Philosophy
Pinterest uses subtle, measured shadows that suggest depth without visual noise. Shadows follow real-world light principles—soft, diffuse, and progressive based on elevation level. Rather than heavy drop shadows, the system uses layered, soft shadows that create air between elements. This approach maintains visual clarity while establishing spatial hierarchy. Shadows increase in blur and spread as elevation increases, creating a natural sense of floating objects. No shadow reaches beyond 32px blur radius, maintaining visual restraint and preventing murkiness.
#E60023) for all primary calls-to-action and save buttons16px–24px padding inside cards and containers for breathing room16px border radius to buttons and form fields for approachability4px, 8px, 12px, 16px, etc.) consistently across layouts#FFFFFF backgrounds for card surfaces and modal dialogs12px secondary text (#62625B) for meta information, dates, and captions48px height minimum for touch target accessibility18px or 20px sizes)24px padding inside form fields or buttons without reason#62625B) for primary interactive text; reserve for secondary/disabled states1440px; maintain reading line length and focus12px surrounding margin for touch safety| Name | Width | Key Changes |
|---|---|---|
| Mobile | 0px–479px | Single column, 16px side padding, 12px spacing between sections, 40px H1, navigation icons only |
| Mobile Large | 480px–767px | Single column, 16px side padding, 16px spacing, 32px H1, hamburger menu collapses |
| Tablet | 768px–1023px | 2-column grid, 24px side padding, 24px section spacing, pinned sidebar, side search collapse |
| Desktop | 1024px–1439px | 3–4 column grid, 40px side padding, 32px section spacing, full navigation visible |
| Large Desktop | 1440px+ | Maintain 1440px max width, 40px side padding, masonry grids with variable columns |
Minimum Interactive Size: 48px × 48px (all buttons, links, icon buttons)
Recommended Spacing: 12px minimum between adjacent touch targets to prevent accidental activation
Form Field Height: 48px minimum for text inputs and selects
Navigation Elements: 16px padding around link text; text itself can be smaller if padded adequately
Hover States: On desktop, hover effects appear at reduced opacity; on touch devices, no :hover applies—use :active for pressed state feedback
Header Navigation:
Content Grid:
Sidebar:
Form Fields:
Spacing Reduction:
32px and 40px vertical spacing; use 16px–24px instead24px to 16px on mobile48px; width adapts to content or full-width on mobile#E60023)#211922)#211922)#000000)#62625B)#62625B)#F6F6F3) or Pure White (#FFFFFF)#FFFFFF)#E5E5E0)#62625B) or Off-White (#E5E5E0)#5BF675)#E60023)#FFFC00)#7360F2) or Deep Purple (#774FC4)#211922) at 80% opacityAll buttons use 12px font size, #E60023 for primary (red), #E5E5E0 for secondary (light gray), 48px height minimum, 6px 14px padding, 16px border radius, and #000000 text color regardless of background
Typography is Pin Sans exclusively; use exact sizes (24px H1, 16px H2, 14px body, 12px captions); weight is 700 for headings, 400 for body; line height matches the hierarchy table exactly
Spacing uses only the scale values (4px, 8px, 12px, 16px, 24px, 32px, 36px, 40px, 64px, 92px, 100px, 120px); no arbitrary padding or margins; card padding is 16px default, section margins are 24px–32px
Card border radius is 12px for secondary containers, 16px for buttons and primary inputs; no component uses radius outside this scale
Box shadows follow the elevation table exactly; flat elements have no shadow; raised cards use 0px 1px 3px rgba(0, 0, 0, 0.08); hovered states increase to 0px 2px 8px rgba(0, 0, 0, 0.12) or higher based on elevation
All interactive elements (buttons, inputs, links) must have minimum 48px height for mobile accessibility; text inside can be 12px–16px, but the hit target remains 48px
Form fields use #919190 border (1px solid) until focus, then switch to #E60023 border; padding is 11px 15px; placeholder text is #62625B
Navigation bars are 80px height, #FFFFFF background, #211922 text; links become #E60023 on hover; padding is 16px all sides
Rich Black (#211922) is the dominant neutral and appears ~709 times in extraction; use it for primary text, headings, and brand surfaces; Pure White (#FFFFFF) is card background; Cream (#F6F6F3) is page background
On responsive breakpoints below 768px, reduce section spacing from 32px to 16px; reduce card padding from 24px to 16px; grid collapses from 3–4 columns to 1–2; keep all other values consistent; maintain 48px touch targets