Pinterest

Overview

Pinterest is a visual discovery engine that curates inspiration through a masonry-grid interface, transforming user intent into actionable collections. The design system embodies 'Purposeful Minimalism'—a philosophy that prioritizes content clarity through restrained color palettes, generous whitespace (16px gutters, 24px section spacing), and strategic accent deployment. The brand personality is optimistic yet grounded: encouraging exploration without overwhelming the user. The UI voice is conversational and action-oriented, using imperative language that invites participation. Example: 'Save this idea to your board' rather than 'This item can be saved.'

Colors

The color system balances a light, content-forward surface (#f6f6f3 with 8px dim variant #efefeb) against two distinct accent families: a bold red primary (#e60023) for critical CTAs and engagement, and a sophisticated purple secondary (#583b91) for premium features and secondary actions. The primary red (#e60023) appears on save buttons, create pins, and primary navigation—it commands attention without aggression. The secondary purple (#583b91) supports performance-plus features and elevated states, with hover state #6845ab and pressed state #583b91. A tertiary blue (#0866ff) handles informational and link contexts. Surfaces layer through a six-step grayscale stack: surface-bright (#ffffff) for cards, surface (#f6f6f3) for page background, surface-container (#242421) for interactive eleme

Typography

Pin Sans (custom typeface) anchors the entire system with a warm, approachable character. Display (60px, 700 weight, -0.04em tracking) commands hero sections; headline-lg (40px, 700 weight) titles major sections; headline-md (28px, 600 weight) introduces subsections; title-lg (20px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) handles long-form descriptions; body-md (16px, 400 weight, 24px line-height) is the default for UI copy. Label-md (14px, 600 weight, 0.01em tracking) marks buttons and form labels; label-sm (12px, 500 weight, 0.02em tracking) appears on badges and secondary metadata. Apply text-shadow 0 1px 2px rgba(0,0,0,0.08) on small labels (label-sm) when layered over image content to ensure 4.5:1 contrast minimum. Use 600 weight for all inter

Layout

The layout system uses a 12-column responsive grid (1280px max-width) with 16px gutters that collapse to 8px on mobile. The masonry pin grid employs CSS Grid with auto-fill columns (typically 3–5 columns depending on viewport), each pin card sized at 236px width with 8px gaps. Section spacing follows a semantic scale: 24px (lg) separates major sections, 16px (md) divides subsections, 8px (sm) groups related elements. Container padding is consistently 24px on desktop, 16px on tablet, 8px on mobile. The 'Purposeful Minimalism' aesthetic demands negative space: never fill more than 60% of viewport width with content; reserve 40% for breathing room. Use the spacing scale consistently—never hardcode arbitrary values like 18px or 22px.

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics physical layering without visual heaviness. Level 1 (Base): no shadow, surface sits flush at #f6f6f3. Level 2 (Raised): box-shadow 0 2px 8px 0 rgba(0,0,0,0.12) applied to cards, buttons, and input fields—this is the default interactive state. Level 3 (Floating): box-shadow 0 -2px 8px 0 rgba(0,0,0,0.12) for modals, popovers, and elevated overlays. Hover states intensify to 0 4px 12px rgba(0,0,0,0.08) (md elevation). Pressed states reduce shadow to 0 1px 3px rgba(0,0,0,0.06) (sm elevation) to signal tactile feedback. Dark overlays

Shapes

The shape language follows 'Soft Geometric Precision'—rounded corners are applied strategically to signal affordance without sacrificing clarity. Buttons and chips use full (50%) border-radius for maximum approachability and to distinguish them from content containers. Cards and modals use lg (16px) radius, creating a subtle visual separation from the page background. Input fields and smaller interactive elements use DEFAULT (8px) radius. Dividers and thin UI elements remain sharp (0px radius). The rationale: full-radius buttons feel inviting and clickable; lg-radius cards feel contained yet o

Components

Action Elements Buttons are the primary affordance system. Primary buttons (button-primary) use #e60023 background with white text, 48px height, 12px vertical / 24px horizontal padding, full (50%) radius, and label-md typography (14px, 600 weight). Hover state shifts to #ad081b (darkened 20%), pressed state to #8b0000 (darkened 40%). Secondary buttons (button-secondary) use #583b91 background with identical sizing; hover #6845ab, pressed #583b91. Ghost buttons use transparent background with 1px outline (#8e8e8a), text color on-surface (#181816). All buttons include a 200ms transition on background-color and box-shadow. Icon buttons are 40px squares with transparent background, full radius, and 24px centered icons; hover state applies surface-container-high (#393937) background at 100%

Do's and Don'ts

**Do**

• Do use the primary red (#e60023) exclusively for save buttons, create actions, and primary CTAs—never dilute its impact by overusing it.
• Do maintain 16px gutters and 24px section spacing consistently across all breakpoints to preserve the 'Purposeful Minimalism' aesthetic.
• Do apply label-md (14px, 600 weight) to all interactive text (buttons, form labels, links) to signal affordance through weight, not color alone.
• Do layer shadows using the three-tier system (no shadow / 0 2px 8px / 0 4px 12px) to create depth without visual clutter.
• Do use full (50%) border-radius on buttons and chips to maximize approachability and distinguish interactive elements from static content.
• Do apply 200ms transitions on all state changes (hover, pressed, focus) to provide tactile feedback without feeling sluggish.

**Don't**

• Don't use the secondary purple (#583b91) on primary CTAs—reserve it for secondary actions and premium feature indicators only.
• Don't apply rounded corners to text-only labels or dividers; keep them sharp (0px) to maintain visual hierarchy and clarity.
• Don't hardcode arbitrary spacing values like 18px or 22px—always use the semantic scale (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 40px).
• Don't use pure black (#000000) or pure white (#ffffff) for text; use on-surface (#181816) for primary text and on-surface-variant (#6d6d69) for secondary.
• Don't apply shadows to elements at rest—only use them on hover/raised states to signal interactivity and depth.
• Don't exceed 60% viewport width with content; reserve 40% for negative space to maintain the 'Purposeful Minimalism' philosophy.