The visual approach
Strava built its interface around one decision: #FC4C02, a saturated orange that sits between safety vest and ember. It appears on primary CTAs, links, and key metrics, but the system resists the temptation to spray it everywhere. The background is pure white (#FFFFFF), text is near-black (#242428), and borders are a neutral gray (#E5E5E5). The secondary purple (#5B21B6) makes rare appearances, mostly in premium-tier UI or illustrative elements, never competing with the orange for attention.
Typography leans on the system sans-serif stack—no custom webfont, no brand-specific letterforms. The scale runs from 12px to 60px with three weights (400, 600, 700), and line heights stay between 1.2 and 1.5. It reads as a performance choice, not a stylistic one. Athletes care about load time and legibility mid-run, not typographic personality.
Spacing follows a strict 4px base unit, scaling to 96px at the high end. Cards get an 8px radius, buttons get 6px, modals stretch to 12px. The progression feels calibrated—soft enough to avoid the harshness of sharp corners, tight enough to stay crisp at small sizes. The result is a system that holds together without calling attention to itself.
What works
The hover states show more craft than most marketing sites bother with. Primary CTAs lift translateY(-2px) and deepen their shadow from 0 2px 8px rgba(0,0,0,0.1) to 0 4px 16px rgba(252,76,2,0.25) over 180ms. The motion is fast enough to feel responsive, slow enough to read as intentional. Secondary buttons (white background, orange border) reverse the pattern—border thickens or a subtle shadow fades in at 150ms. The contrast between the two states gives hierarchy without requiring a designer to write interaction specs for every button instance.
Scroll-driven animations lean on IntersectionObserver to reveal timeline cards with a translateY(20px → 0) fade-in, staggered by 80-120ms per card. It is a common pattern, but Strava executes it without the lag or jank that plagues less disciplined implementations. The hero layout uses split-screen parallax—left and right panels translate at 0.6-0.8× scroll rate while center content moves normally—adding depth without the vertigo of aggressive parallax effects.
The color palette stays minimal. Orange handles calls to action and active states. Gray handles supporting text (#6B6B6B) and borders. Black handles body copy. The beige (#E5DCC3) appears sparingly, mostly as a background accent in premium feature callouts. The restraint makes the orange feel louder than it actually is. When every other surface is neutral, even a single accent color can anchor the entire interface.
What a builder can borrow
Start with the 4px spacing base. It forces alignment decisions into a predictable grid without requiring a complex layout system. Strava scales from 4px to 96px in clean multiples (4, 8, 12, 16, 24, 32, 48, 64, 80, 96), which means padding, margin, and gap values compose cleanly. A 16px button padding pairs naturally with 8px icon spacing and 32px section margins. The math stays simple.
Steal the hover timing. 180ms for primary actions, 150ms for secondary, 120ms for text links. The progression mirrors the visual weight of each element—heavier components get slightly longer transitions. It is subtle, but it keeps the interface from feeling like every interaction runs on the same generic easing curve.
Use a single accent color and make everything else step back. Strava's orange works because the rest of the palette refuses to compete. If your design needs three or four accent colors to communicate hierarchy, the real problem is probably layout or typography, not color. A bold accent only reads as bold when the surrounding context is neutral.
Skip the custom webfont unless brand identity demands it. Strava chose the system stack and gained instant load time, native rendering on every platform, and zero FOIT/FOUT issues. For a product where users check pace and distance mid-workout, performance beats personality. Most products could make the same trade and ship a faster, more accessible interface without losing recognizability.