ACG Zegama Trail
Wildly Comfortable
Soft shoes for hard trails. A typical Nike campaign hero with image as color and UI as a black-and-white system.
Nike P-6000
Back in the Game. Your Look.
Pegasus 42
Full Horsepower
Phantom 6
No Stopping Haaland
Nike Free Metcon 7
Train the Right Way
Black-and-white as UI, campaign images as color.
Nike uses almost exclusively #111, white, and light grays in the interface. Status orange appears in product listings as text, not as a badge capsule.
Nike Futura for campaign, Helvetica Now for commerce.
The hierarchy clearly separates emotional headline impact from calm retail information.
Cards without card chrome.
Nike builds area through image and grid, not through shadows. Product cards are deliberately restrained.
Nike-specific commerce patterns.
These modules make the extraction brand-specific: Search Sheet, PLP, Filter, Carousel, and Campaign Grid.
Shoes, Clothing & Accessories: New Arrivals (1045)
Discover Classics
Search is a top sheet, not a modal.
White 100% sheet, wide pill search, popular search chips, and text button 'Cancel'.
Large spacing, hard image edges, almost no depth.
The Nike system gains value through discipline, not decoration.
Spacing
Radius
Elevation
Microinteractions remain functional and fast.
Nike avoids decorative motion. Interaction shows state: header hover, search sheet, carousel scroll, filter toggle, and focused pills.
Nav hover
2px black underline, no colored active state.
Search expand
Top sheet from above, white background, content below remains visible.
Carousel
Arrow circle buttons, disabled lighter, overflow tile clipped.
Focus
Black 2px ring with 3px offset for keyboard navigation.
Concrete values for agents.
These tokens can be implemented directly in HTML/CSS/React components.