A premium athletic showroom with cinematic product showcases
02
Color
#111111Ink
#707072Ink soft
#FFFFFFBG
#F5F5F5BG soft
#E5E5E5Muted
rgba(17,17,17,0.15)Line
High-contrast monochrome palette with photography providing all chromatic energy
03
Typography
grotesque-sans · humanist-sans
display56px · 500
headline32px · 500
body16px · 400
caption12px · 500
Headlines use weight 500 (medium) rather than heavy weights · Body text uses weight 400 (regular) for readability · All typography uses tight negative letter-spacing for display sizes · Chinese text uses Noto Sans SC with same weight hierarchy as Latin text
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
8px base grid with generous whitespace around hero sections
05
Surfaces
sm · 4px
md · 8px
lg · 30px
pill · 999px
1px solid rgba(17,17,17,0.15) with 0px 0px 2px pattern for dividers
Full-width hero images with centered text overlays, single-column content flow with wide margins
07
Motion & Interaction
220msmicro
300mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
Opacity transitions on hover states (0.3s) · Background-color transitions on interactive elements (0.5s) · Transform animations for scroll reveals (0.8s)
Subtle opacity reduction and color transition on navigation links · No visible active states beyond standard browser defaults
08
Components
buttonPill-shaped (border-radius: 30px) with solid black background and white text, medium weight
cardNo visible cards in this view - content is presented through full-width image sections
chipNone visible
inputRounded search field with placeholder text, subtle border
heroFull-bleed photographic hero with centered typography overlay and single CTA button
09
Voice & Don'ts
ToneConfident, aspirational, direct
HeadlinesBold, declarative statements with minimal supporting text
CTAsAction-oriented verbs in compact pill buttons ('即刻探索' / 'Shop Now')
Don't use decorative backgrounds — screenshot shows clean white backgrounds (#FFFFFF) that let photography dominate
Don't use rounded card containers — screenshot shows full-bleed images without visible card boundaries
Don't use heavy font weights — screenshot shows weight 500 (medium) maximum for headlines, never bold/black weights
Don't add accent colors to UI elements — screenshot shows buttons and links in pure black (#111111) without color highlights
Don't use complex multi-column layouts — screenshot shows single-column centered content with generous whitespace
Don't add drop shadows to text — screenshot shows text rendered directly over photography without shadows or overlays
Don't use small, cramped navigation — screenshot shows generous padding (36px 0px 12px 0px) in header areas
Don't mix multiple typefaces — screenshot shows consistent Noto Sans SC family throughout with Helvetica Neue fallback
Captured from the live site · real computed styles
11
System prompt
Nike.com is a premium athletic e-commerce platform that uses bold typography and cinematic photography to showcase products. The design language is clean and minimal with a monochrome palette: primary background white (#FFFFFF), secondary gray (#F5F5F5), ink black (#111111), and muted gray (#707072). Typography uses grotesque-sans for display (weight 500, negative letter-spacing) and humanist-sans (Noto Sans SC) for body text at weight 400. UI elements like buttons use pill shapes (border-radius: 30px) in solid black. Layout is full-width with generous whitespace and single-column content flow. Key donts: Never use decorative backgrounds that compete with photography, never exceed medium weight (500) for type, never add accent colors to navigation or buttons, never use heavy drop shadows on text overlays, never create cramped multi-column layouts, never mix typeface families.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
