The visual approach
Nike's homepage operates in near-monochrome. The primary palette is --color-black (#111111) and --color-white (#FFFFFF), with gray stepping stones at --color-gray-100, --color-gray-300, and --color-gray-500. Accent colors—--color-red (#DC143C) and --color-orange (#FF4500)—appear sparingly, reserved for calls-to-action and sale indicators. This isn't minimalism for aesthetic posturing. It's a functional decision that directs attention exactly where Nike wants it: on product photography.
Typography follows the same logic. Helvetica Neue anchors the system, set at weights that communicate hierarchy through boldness rather than ornament. The hero text (--text-hero at 72px, weight 800) hits hard, while body copy sits at a readable --text-base (16px, weight 400). The scale collapses quickly—--text-2xl is 32px, then straight down to 14px and 12px for tertiary information. There's no meandering middle ground. You're either reading a headline or you're reading instructions.
The component vocabulary is equally terse: nav, hero, card, cta, modal. No carousels, no accordions, no tabs. The page is a series of full-bleed hero sections stacked vertically, each one a self-contained argument for a product line or campaign. Scroll replaces click. The architecture assumes you'll keep moving.
What works
The motion system earns its complexity budget. Page loads use progressive reveal—hero imagery fades in over 300ms, then text staggers in with a 60ms offset between headline and subhead. The timing is tight enough to feel immediate but staggered enough to establish hierarchy. No element fights for attention because each one arrives in sequence.
Scroll behavior reinforces depth without theatrics. Hero text translates at 0.6x the speed of background imagery, creating subtle parallax. Product grids use stagger-fade-in as cards enter the viewport, each row offset by 40ms. The reveal pattern is consistent: opacity: 0 → 1 paired with translateY(20px) → 0 over 350ms using cubic-bezier(0.2, 0.8, 0.2, 1). The easing curve is custom but not precious—it's fast on entry, smooth on exit, and never bounces.
Hover states follow the same principle. Product cards lift with translateY(-6px) and a shadow intensification over 200ms ease-out. Navigation links animate an underline via scaleX(0 → 1) with transform-origin: left, sliding in over 250ms. The transforms are quick but grounded. Nothing floats. The brand is athletic, and the motion system reflects that: powerful, controlled, efficient.
The restraint extends to color usage. Because the palette is so limited, the red and orange accents land with force. A "Sale" badge in --color-red doesn't need to pulse or glow. It's the only red element on screen. That's enough.
What a builder can borrow
Start with the timing pattern. Nike's 300ms fade + 60ms stagger is a template worth stealing. The initial fade brings the page into focus; the stagger establishes reading order without requiring the user to hunt. Implement it with a simple delay multiplier: animation-delay: calc(var(--base-delay) + (var(--item-index) * 60ms)). The 60ms offset is short enough to feel continuous but long enough to register as intentional.
The parallax ratio—0.6x for foreground text against a 1x background—creates depth without disorientation. Slower ratios (0.3x, 0.4x) feel sluggish; faster ratios (0.8x, 0.9x) lose impact. 0.6x is the middle ground where the effect reads as polish rather than gimmick.
The hover transform values are also worth adopting. translateY(-6px) is perceptible without being cartoonish. Pair it with a shadow transition (not a drop shadow, a box-shadow that intensifies in blur and opacity) and you've communicated interactivity. The 200ms ease-out timing prevents the card from snapping back too quickly when the user moves their cursor away.
Most importantly, borrow the constraint. Nike's design system doesn't offer twelve grays and eight accent colors. It offers five grays and two accents. The typography scale doesn't include a size for every possible use case. It includes five sizes and forces designers to choose one. Constraint isn't limitation—it's leverage. Every decision Nike doesn't have to make is a decision they can't make poorly.