The visual approach
Coinbase's homepage centers on #0052FF — a saturated blue that anchors every call-to-action and interactive element. The color sits against a largely monochromatic palette: #000000 for type, #5B616E for secondary text, and #F5F5F5 for backgrounds. This restraint isn't minimalism for its own sake; it's a trust signal. When you're asking users to store their wealth, visual noise reads as instability.
The type system relies on Coinbase Sans, a custom typeface that pairs a 700-weight Display scale (48px) with a sensible body size (16px). The scale doesn't chase drama — H1 tops out at 32px, H2 at 24px. The spacing system follows 4px increments: 4, 8, 16, 24, 32, 48, 64. Cards and buttons use an 8px radius; larger containers go to 12px. The predictability is the point.
Motion is where the system shows its hand. The hero section uses parallax depth — the phone mockup translates slower than surrounding content. Headlines stagger their fade-up entrance with a ~400ms delay between lines. Chart line paths draw left-to-right over ~800ms (cubic-bezier(.4,0,.2,1)), then dot-matrix fill fades in beneath. Every transition declares its duration.
What works
The motion timing choices are unusually specific, and they work because they're calibrated for perceived stability rather than excitement. Primary CTAs lift on hover with translateY(-2px) and shadow expansion over 200ms ease-out. Table rows gain a subtle rgba(0,82,255,0.04) tint on hover in 150ms. Input borders transition from gray to blue on focus in 180ms. Percentage indicators pulse on data update — scale(1.1) for 300ms, then settle.
These durations sit in a narrow band: 150ms to 400ms for interface feedback, 800ms for chart reveals. Nothing is instant, nothing drags. The rhythm conveys responsiveness without jitter. When a button lifts in 200ms, it feels like the system is paying attention. When a chart draws in 800ms, it feels like the data is being composed, not dumped.
The spatial system reinforces this. An 8px radius on buttons and cards is large enough to feel contemporary but restrained enough to avoid the "everything is a pill" trend. The 4px base unit keeps the grid tight without feeling cramped. The spacing scale doubles at each step until 16px, then moves in 16px increments after that (24, 32, 48, 64). This isn't a perfect geometric progression, but it maps better to real layout needs — you rarely need 128px of padding, but you often need something between 16 and 32.
What a builder can borrow
The first lesson is duration precision. Don't reach for 300ms because it's a round number; choose it because 200ms feels too snappy and 400ms feels sluggish for the weight of the element. Coinbase's system suggests testing in 20–50ms increments once you're in the right range. The difference between 150ms and 200ms is perceptible when you're signaling data integrity.
The second is chromatic restraint under a single accent. #0052FF does all the interaction work because the rest of the palette stays neutral. If you add a second accent color, you've introduced a decision tree for the user: does green mean go, or does blue? One accent means one message.
The third is that custom type is worth it at scale, but the scale itself can stay humble. Coinbase Sans doesn't need display sizes above 48px to establish hierarchy. The 32px H1 is large enough to lead a section without shouting. If your type scale goes above 60px and you're not a landing page for a science fiction film, you're compensating for weak content.
The fourth is that 8px radius is the new 4px. It's large enough to register as intentionally soft but not so round that it competes with the content. If your cards feel too sharp, try 8px before you jump to 16px.