The visual approach
Pinterest's design system operates from a position of deliberate scarcity. The color palette centers on a single accent—--color-primary: #E60023, a saturated red reserved almost exclusively for primary actions—while the rest of the interface lives in a grayscale spectrum between --color-black: #111111 and --color-white: #FFFFFF. Secondary surfaces use --color-gray-200: #EFEFEF for input backgrounds and --color-gray-300: #E2E2E2 for fills, with --color-gray-600: #767676 handling secondary text. This isn't minimalism for its own sake. It's a calculated trade: the interface recedes so millions of user-generated images can compete for attention without fighting chrome.
The typographic scale follows the same logic. --text-display-1 sits at 72px with an 800 weight for hero headlines, dropping to --text-heading-1 at 48px/700 for section headers and --text-heading-3 at 28px/700 for component-level headings. Body text and labels both use 16px, differentiated only by weight—400 for --text-body, 600 for --text-label. The scale is compressed compared to systems that distinguish themselves through typography. Pinterest distinguishes itself through content density.
The masonry grid is the structural centerpiece. Cards arrange in staggered columns with variable heights, creating organic negative space that guides the eye vertically. The layout is virtualized—likely react-window or a custom solution—to handle thousands of pins without layout thrashing. Each card is a simple container: image, optional text overlay, and hover-triggered save badge.
What works
The motion system does heavy lifting without calling attention to itself. Parallax depth on hero sections moves scattered image cards at differentiated scroll rates—0.3× to 0.8× of scroll speed—to reinforce spatial layering. It's subtle enough that you feel depth without noticing the technique. Masonry grids use staggered reveals: each card fades and translates up (translateY(20px) to translateY(0)) with a 40–60ms delay from its neighbor. The effect is cohesive arrival rather than a sequence of pops.
Hover states strike a pragmatic balance. Image cards scale 1.03× to 1.05× with shadow deepening, timed at 250ms with cubic-bezier(0.2, 0.8, 0.2, 1) for a snappy response. CTA buttons lift 2–4px with shadow expansion over 200ms ease-out, and the primary red likely adds a slight scale bump (1.02×) for tactile feedback. Save badges appear on image hover with a scale-and-fade combo—scale(0.9) to scale(1) with opacity transitioning over 180ms. These are standard interaction patterns, but they're tuned to feel immediate without being jumpy.
The red accent does what accent colors are supposed to do: it marks the path forward. Save buttons, follow CTAs, and primary navigation elements all carry #E60023. Because the rest of the interface is achromatic, the red reads as actionable by default. You don't need to teach users where to click.
What a builder can borrow
The core lesson is editorial restraint in service of user content. If your product is a container for user-generated material—marketplaces, portfolios, social feeds—every color and weight you add to the chrome is a distraction from what people came to see. Pinterest's narrow palette isn't dogma; it's a recognition that the product is the content, not the frame.
Parallax scroll at differentiated rates is underused outside of marketing sites, but it's effective for spatial storytelling when you have layered content. The key is subtlety—0.3× to 0.8× multipliers, not 0× to 2×. Exaggerated parallax reads as gimmick. Gentle differentiation reads as depth.
Staggered card reveals with 40–60ms delays are portable to any grid layout. The pattern avoids the all-at-once pop of intersection observer defaults while keeping total animation time short. It's a small detail that makes density feel considered rather than dumped.
The single-accent color model is harder than it looks. It requires discipline to route every primary action through one hue and resist the urge to introduce secondary accents for variety. But when it works—when you have strong content and weak chrome—the clarity is worth the constraint. Pinterest proves you can build a billion-dollar visual platform on one red and a handful of grays.