---
name: Nike
description: "This site exemplifies how a global brand achieves premium positioning through radical restraint—letting world-class photography and bold type do all the emotional work."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#111111"
  secondary: "#707072"
  neutral: "#E5E5E5"
  bg-soft: "#F5F5F5"
  line: "rgba(17,17,17,0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.5px"
  headline:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.75
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 30px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A bold, photographic e-commerce experience that lets high-impact imagery and clean typography drive product storytelling.

*A premium athletic showroom with cinematic product showcases*

## Colors

High-contrast monochrome palette with photography providing all chromatic energy

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`#707072`)** — uses `ink-soft` token
- **Muted (`#E5E5E5`)** — uses `muted` token
- **Borders (`rgba(17,17,17,0.15)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** humanist-sans

- 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

## Layout

Full-width hero images with centered text overlays, single-column content flow with wide margins

*Rhythm:* 8px base grid with generous whitespace around hero sections

## Elevation & Depth

- rgba(17,17,17,0.06) 0px 4px 8px 0px
- rgba(17,17,17,0.03) 0px 0px 24px 4px
- Borders: 1px solid rgba(17,17,17,0.15) with 0px 0px 2px pattern for dividers

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 30px
- `pill`: 999px

## Components

- **button:** Pill-shaped (border-radius: 30px) with solid black background and white text, medium weight
- **card:** No visible cards in this view - content is presented through full-width image sections
- **chip:** None visible
- **input:** Rounded search field with placeholder text, subtle border
- **hero:** Full-bleed photographic hero with centered typography overlay and single CTA button

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```