@litfamily/litcodex 1.0.0

package/marketplace/plugins/litcodex/skills/frontend-ui-ux/references/_canonical-corpus/design/nike.md

@@ -0,0 +1,366 @@
+# Design System Inspired by Nike
+
+> Category: E-Commerce & Retail
+> Athletic retail. Monochrome UI, massive uppercase type, full-bleed photography.
+
+## 1. Visual Theme & Atmosphere
+
+Nike.com is a kinetic retail cathedral — a site that channels the explosive energy of sport into a digital shopping experience. The design operates on a principle of radical simplicity: strip everything back to black, white, and grey so that athletic photography and product color can dominate without competition. The result feels less like a website and more like a sports editorial laid out with the precision of a luxury magazine. Every pixel of real estate is either selling product or driving toward product.
+
+The "Podium CDS" (Nike's internal Core Design System) establishes an aggressively monochromatic foundation. The UI disappears into black (`#111111`) text and white surfaces, allowing hero photography — sweating athletes, mid-air shoes, stadium energy — to carry the emotional weight. When color does appear in the UI, it's almost exclusively functional: red for errors, blue for links, green for success. The product itself is the color story. This restraint creates a visual paradox: the most colorful pages on the internet feel the most minimal, because all vibrancy comes from merchandise rather than interface.
+
+The typography system is the other half of Nike's visual identity. Massive uppercase headlines in Nike Futura ND — a custom condensed Futura variant with impossibly tight line-height (0.90) — punch through hero imagery like a typographic shockwave. Below the headlines, the workhorse Helvetica Now family handles everything from navigation to product descriptions with Swiss-precision clarity. This split between expressive display type and functional body type mirrors Nike's brand duality: inspiration meets execution.
+
+**Key Characteristics:**
+- Monochromatic UI (black/white/grey) that lets product photography be the only color source
+- Massive uppercase display typography (96px, line-height 0.90) that punches through hero images
+- Full-bleed photography with no border radius — imagery fills every available edge
+- Pill-shaped buttons (30px radius) as the primary interactive element
+- 8px spacing grid with athletic discipline — every measurement snaps to the system
+- Category-driven shopping architecture with large navigational image cards
+- Shadow-free, border-minimal elevation model — surface differentiation through grey shifts only
+
+## 2. Color Palette & Roles
+
+### Primary
+
+- **Nike Black** (`#111111`): The foundation — primary text, button backgrounds, nav text, hero overlays. Deliberately not pure black (#000000), creating a fractionally softer reading experience
+- **Nike White** (`#FFFFFF`): Primary page canvas, button text on dark, card surfaces, nav bar background
+
+### Surface & Background
+
+- **Snow** (`#FAFAFA`): Lightest surface, near-white subtle differentiation (--podium-cds-color-grey-50)
+- **Light Gray** (`#F5F5F5`): Secondary background, search input fill, image placeholder, loading skeleton (--podium-cds-color-grey-100)
+- **Hover Gray** (`#E5E5E5`): Hover state background, disabled button fill (--podium-cds-color-grey-200)
+- **Dark Surface** (`#28282A`): Primary background on dark/inverted sections (--podium-cds-color-grey-800)
+- **Deep Charcoal** (`#1F1F21`): Inverse primary background, darkest non-black surface (--podium-cds-color-grey-900)
+- **Dark Hover** (`#39393B`): Hover state on dark backgrounds (--podium-cds-color-grey-700)
+
+### Neutrals & Text
+
+- **Primary Text** (`#111111`): Main body text, headings, nav links (--podium-cds-color-text-primary)
+- **Secondary Text** (`#707072`): Descriptive copy, metadata, timestamps, price labels (--podium-cds-color-text-secondary)
+- **Disabled Text** (`#9E9EA0`): Inactive elements, unavailable options (--podium-cds-color-text-disabled)
+- **Disabled Inverse** (`#4B4B4D`): Disabled text on dark backgrounds (--podium-cds-color-text-disabled-inverse)
+- **Border Primary** (`#707072`): Standard border color, matching secondary text
+- **Border Secondary** (`#CACACB`): Subtle borders, input borders, divider lines (--podium-cds-color-grey-300)
+- **Border Disabled** (`#CACACB`): Inactive border state
+- **Border Active** (`#111111`): Active/focused border, matching primary text
+
+### Semantic & Accent
+
+- **Nike Red** (`#D30005`): Critical errors, sale badges, urgent notifications (--podium-cds-color-red-600)
+- **Bright Red** (`#EE0005`): Red-500, slightly lighter red for emphasis
+- **Nike Orange Badge** (`#D33918`): Badge text, promotional callouts (--podium-cds-color-text-badge)
+- **Orange Flash** (`#FF5000`): Expressive orange accent (--podium-cds-color-orange-400)
+- **Success Green** (`#007D48`): Confirmation, availability, positive states (--podium-cds-color-green-600)
+- **Success Inverse** (`#1EAA52`): Success on dark backgrounds (--podium-cds-color-green-500)
+- **Link Blue** (`#1151FF`): Text links, informational highlights (--podium-cds-color-blue-500)
+- **Info Inverse** (`#1190FF`): Links on dark backgrounds (--podium-cds-color-blue-400)
+- **Warning Yellow** (`#FEDF35`): Warning backgrounds, attention banners (--podium-cds-color-yellow-200)
+- **Focus Ring** (`rgba(39, 93, 197, 1)`): Keyboard focus indicator ring
+
+### Extended Color Spectrum (Podium CDS)
+
+Each color ramp runs 50–900 for expressive use in campaigns and product pages:
+
+- **Red**: `#FFE5E5` → `#EE0005` → `#530300`
+- **Orange**: `#FFE2D6` → `#FF5000` → `#3E1009`
+- **Yellow**: `#FEF087` → `#FCA600` → `#99470A`
+- **Green**: `#DFFFB9` → `#1EAA52` → `#003C2A`
+- **Teal**: `#D4FFFB` → `#008E98` → `#043441`
+- **Blue**: `#D6EEFF` → `#1151FF` → `#020664`
+- **Purple**: `#E4E1FC` → `#6E0FF6` → `#1C0060`
+- **Pink**: `#FFE1F3` → `#ED1AA0` → `#4C012D`
+
+### Gradient System
+
+Nike avoids UI gradients. When gradients appear, they are photographic — applied to product hero backgrounds (e.g., a red shoe on a red-to-deeper-red gradient). The design system itself is flat-color only.
+
+## 3. Typography Rules
+
+### Font Family
+
+**Display:** Nike Futura ND (custom condensed Futura variant exclusive to Nike)
+- Fallbacks: Helvetica Now Text Medium, Helvetica, Arial
+- Used exclusively for large uppercase display headlines
+- Characteristically tight line-height (0.90) and uppercase transform
+
+**Heading:** Helvetica Now Display Medium
+- Fallbacks: Helvetica, Arial
+- Used for section headings and product titles at 24–32px
+
+**Body Medium:** Helvetica Now Text Medium (weight 500)
+- Fallbacks: Helvetica, Arial
+- Used for links, buttons, captions, emphasized body text
+
+**Body:** Helvetica Now Text (weight 400)
+- Fallbacks: Helvetica, Arial
+- Used for standard body copy, descriptions, metadata
+
+**Arabic:** Neue Frutiger Arabic — locale-specific alternative
+
+### Hierarchy
+
+| Role | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|--------|-------------|----------------|-------|
+| Display | 96px | 500 | 0.90 | — | Nike Futura ND, uppercase, hero headlines |
+| Heading 1 | 32px | 500 | 1.20 | — | Helvetica Now Display Medium, section titles |
+| Heading 2 | 24px | 500 | 1.20 | — | Helvetica Now Display Medium, subsections |
+| Heading 3 | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, card titles |
+| Body | 16px | 400 | 1.75 | — | Helvetica Now Text, product descriptions |
+| Body Medium | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, emphasized text |
+| Link | 16px | 500 | 1.75 | — | Helvetica Now Text Medium, navigation links |
+| Link Small | 14px | 500 | 1.86 | — | Helvetica Now Text Medium, footer/utility links |
+| Button | 16px | 500 | 1.50 | — | Helvetica Now Text Medium, CTA text |
+| Button Small | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, secondary buttons |
+| Caption | 14px | 500 | 1.50 | — | Helvetica Now Text Medium, price labels |
+| Small | 12px | 500 | 1.50 | — | Helvetica Now Text Medium, timestamps |
+| Tiny | 12px | 400 | 1.50 | — | Helvetica Now Text, legal text |
+
+### Principles
+
+Nike's typography is a study in tension. The display layer — Nike Futura ND at 96px with a devastating 0.90 line-height — is engineered to feel like a stadium scoreboard: massive, condensed, uppercase, impossible to ignore. It transforms headlines into battle cries. Below the display layer, Helvetica Now provides a clinical counterpoint: Swiss-precision legibility with generous 1.75 line-height for comfortable product browsing. Weight 500 (Medium) dominates throughout the body text, giving Nike's prose a slight assertiveness without the heaviness of bold — every sentence reads like a confident recommendation, not a shout.
+
+## 4. Component Stylings
+
+### Buttons
+
+**Primary**
+- Background: Nike Black (`#111111`)
+- Text: White (`#FFFFFF`), 16px/500, Helvetica Now Text Medium
+- Border: none
+- Border radius: fully rounded pill (30px)
+- Padding: ~12px 24px
+- Hover: background shifts to Grey-500 (`#707072`), text hover color
+- Active: scale(0) ripple effect with opacity 0.5
+- Focus: 2px box-shadow ring in `rgba(39, 93, 197, 1)`
+- Transition: background 200ms ease
+
+**Primary on Dark**
+- Background: White (`#FFFFFF`)
+- Text: Black (`#111111`)
+- Hover: background shifts to Grey-300 (`#CACACB`)
+
+**Secondary (Outlined)**
+- Background: transparent
+- Text: Nike Black (`#111111`)
+- Border: 1.5px solid `#CACACB` (grey-300)
+- Border radius: 30px
+- Hover: border darkens to `#707072`, background to grey-200
+
+**Disabled**
+- Background: Grey-200 (`#E5E5E5`)
+- Text: Grey-400 (`#9E9EA0`)
+- Cursor: not-allowed
+
+**Icon Button**
+- Background: Grey-100 (`#F5F5F5`)
+- Shape: 30px radius (or 50% for circular)
+- Padding: 6px
+- Hover: Grey-500 background
+
+### Cards & Containers
+
+- Background: White (`#FFFFFF`) — no visible card boundary in most cases
+- Border radius: 0px for product image cards (edge-to-edge imagery), 20px for interactive containers
+- Shadow: none — Nike uses no card shadows whatsoever
+- Hover: no lift effect on product cards; underline on text links within cards
+- Product cards: image on top (no radius), text metadata below with 12px gap
+- Category cards: full-bleed photography with text overlay on dark gradient
+- Transition: opacity 200ms ease for image swap on hover
+
+### Inputs & Forms
+
+- Background: Grey-100 (`#F5F5F5`)
+- Border: 1px solid `#CACACB` when visible, or borderless on search
+- Border radius: 24px (search inputs), 8px (form inputs)
+- Font: Helvetica Now Text, 16px
+- Focus: border shifts to `#111111` (border-active), 2px focus ring in `rgba(39, 93, 197, 1)`
+- Error: border `#D30005` (critical)
+- Placeholder: Grey-500 (`#707072`)
+- Transition: border-color 200ms ease
+
+### Navigation
+
+- Background: White (`#FFFFFF`), sticky
+- Height: ~60px desktop
+- Left: Nike Swoosh logo (24x24px SVG)
+- Center: Category links (New & Featured, Men, Women, Kids, Sale) in 16px/500 Helvetica Now Text Medium
+- Right: Search (24px radius input), Favorites, Cart icons
+- Hover: text color shifts to Grey-500 (`#707072`)
+- Mobile: hamburger menu, full-screen overlay
+- Top banner: promotional message bar with dark background (#111111) and white text
+
+### Image Treatment
+
+- Hero images: full-bleed, no border radius, edge-to-edge
+- Product grid: square (1:1) or 4:3 aspect ratio, no border radius
+- Category cards: 16:9 or 4:3, full-bleed with text overlay
+- Image placeholder: Grey-100 (`#F5F5F5`) solid background
+- Lazy loading: native loading="lazy", skeleton uses #F5F5F5 bg
+- Product hover: secondary image swap (front → side view)
+
+### Promotional Banners
+
+- Full-width dark (`#111111`) background with white text
+- Tight padding (8-12px vertical)
+- Centered text, 12px/500 Helvetica Now Text Medium
+- Used for shipping promotions, member benefits, sale announcements
+
+## 5. Layout Principles
+
+### Spacing System
+
+Base unit: 4px (primary grid is 8px multiples)
+
+| Token | Value | Use |
+|-------|-------|-----|
+| space-1 | 4px | Tight icon gaps, inline spacing |
+| space-2 | 8px | Base unit, button icon gaps |
+| space-3 | 12px | Card internal padding, tight margins |
+| space-4 | 16px | Standard padding, nav spacing |
+| space-5 | 20px | Product card gaps |
+| space-6 | 24px | Section internal padding, grid gaps |
+| space-7 | 32px | Section breaks |
+| space-8 | 48px | Major section padding |
+| space-9 | 64px | Hero section padding |
+| space-10 | 80px | Large section spacing |
+
+### Grid & Container
+
+- Max container width: 1920px
+- Standard content width: ~1440px with horizontal padding
+- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile
+- Category grid: 3-column with full-bleed images
+- Grid gap: 4-12px between product cards (intentionally tight)
+- Horizontal padding: 48px desktop, 24px tablet, 16px mobile
+
+### Whitespace Philosophy
+
+Nike's whitespace strategy is deliberately aggressive — not in the luxurious, breathing way of a fashion brand, but in a compressed, high-density way that fills every pixel with either content or intentional absence. Product grids use minimal gaps (4-12px) to create a sense of abundance and choice. Section breaks are generous (48-80px) to separate shopping contexts. The overall effect is a store that feels packed with product while remaining navigable — like a well-organized athletic superstore.
+
+### Border Radius Scale
+
+| Value | Context |
+|-------|---------|
+| 0px | Product images, hero photography (sharp edges) |
+| 8px | Form inputs (non-search) |
+| 18px | Small interactive elements |
+| 20px | Containers, cards with UI content |
+| 24px | Search inputs, medium pills |
+| 30px | Buttons, tags, filters (full pill) |
+| 50% | Circular icon buttons, avatar placeholders |
+
+## 6. Depth & Elevation
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat | No shadow, no border | Default state for everything |
+| Divider | `0px -1px 0px 0px #E5E5E5 inset` | Subtle inset line between sections |
+| Focus | `0 0 0 2px rgba(39, 93, 197, 1)` | Keyboard focus ring |
+| Overlay | Dark scrim over photography | Text-on-image legibility |
+
+Nike's elevation philosophy is radically flat. There are no card shadows, no hover lifts, no floating elements. Depth is communicated exclusively through color — dark sections recede, light sections advance, grey shifts indicate state changes. This flatness reinforces the athletic, no-nonsense brand personality: no visual frills, just direct communication. The only "shadow" in the entire system is a 1px inset divider line and the accessibility-required focus ring.
+
+### Decorative Depth
+
+- **Hero photography overlays**: Dark gradient scrims over full-bleed photography for text readability
+- **Product background gradients**: Colored backgrounds behind hero product shots (e.g., red shoe on red gradient)
+- **Banner bars**: Solid dark (#111111) promotional strips at page top
+
+## 7. Do's and Don'ts
+
+### Do
+
+- Use Nike Black (#111111) for all primary text — never pure #000000
+- Keep buttons pill-shaped (30px radius) and limited to primary/secondary variants
+- Use full-bleed, edge-to-edge photography for hero sections — no border radius on images
+- Let product photography provide all color vibrancy; keep UI monochromatic
+- Use uppercase Nike Futura ND ONLY for display headlines (96px+)
+- Maintain tight product grid gaps (4-12px) for a dense, abundant feel
+- Use Grey-100 (#F5F5F5) for all input and placeholder backgrounds
+- Reserve color exclusively for semantic meaning (red=error, green=success, blue=link)
+- Use weight 500 (Medium) for all interactive text elements
+
+### Don't
+
+- Don't add shadows to cards — Nike's elevation model is entirely flat
+- Don't use border radius on product imagery — only UI elements get rounded corners
+- Don't introduce brand colors beyond the grey scale for UI elements
+- Don't use Nike Futura ND below 24px — it's exclusively a display face
+- Don't add hover lift effects — Nike cards don't animate on hover
+- Don't use regular weight (400) for buttons or links — always use 500
+- Don't place colored backgrounds behind UI elements — color is reserved for product contexts
+- Don't use more than two levels of text hierarchy per card (title + body)
+- Don't add decorative dividers — the 1px inset is the only divider pattern
+- Don't soften the contrast — Nike's design deliberately pushes black-on-white to maximum
+
+## 8. Responsive Behavior
+
+### Breakpoints
+
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | Single column, hamburger nav, display text scales down, tight 16px padding |
+| Small Tablet | 640-768px | 2-column product grid begins, nav still collapsed |
+| Tablet | 768-960px | 2-column grids, category cards scale, horizontal padding 24px |
+| Small Desktop | 960-1024px | Nav expands to full horizontal, 3-column product grid |
+| Desktop | 1024-1440px | Full layout, expanded nav, 3-column grids, 48px padding |
+| Large Desktop | >1440px | Max-width container centered, increased margins, hero images full-bleed |
+
+### Touch Targets
+
+- Minimum touch target: 44x44px (WCAG AAA)
+- Mobile nav icons: 48x48px touch area
+- Product cards: full surface is tappable
+- Filter pills: minimum 36px height with 12px padding
+
+### Collapsing Strategy
+
+- **Navigation**: Full category links → hamburger menu below 960px; search, favorites, cart icons remain visible
+- **Product grids**: 3-col → 2-col at 960px → 1-col at 640px
+- **Hero sections**: Display text scales from 96px → 64px → 48px; hero images remain full-bleed at all sizes
+- **Category cards**: 3-col → 2-col → 1-col with maintained full-bleed imagery
+- **Section padding**: 80px → 48px → 32px → 24px as viewport narrows
+- **Promotional banner**: text wraps or truncates, maintains dark background
+
+### Image Behavior
+
+- Responsive images via Nike CDN (`c.static-nike.com`) with width parameters
+- Product images: srcset with multiple resolutions (w_320, w_640, w_960, w_1920)
+- Hero images: full-bleed at all breakpoints, aspect ratio shifts (16:9 desktop → 4:3 mobile)
+- Lazy loading: native loading="lazy", grey-100 placeholder during load
+- Art direction: hero crops change between desktop and mobile compositions
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+
+- Primary CTA: Nike Black (`#111111`)
+- Background: White (`#FFFFFF`)
+- Secondary surface: Light Gray (`#F5F5F5`)
+- Heading text: Nike Black (`#111111`)
+- Body text / hover: Secondary Text (`#707072`)
+- Border: Border Secondary (`#CACACB`)
+- Error: Nike Red (`#D30005`)
+- Link: Link Blue (`#1151FF`)
+
+### Example Component Prompts
+
+- "Create a product hero section with full-bleed edge-to-edge photography, no border radius, a dark gradient overlay for text, and a massive uppercase 96px/500 headline in Nike Futura style with 0.90 line-height and a Nike Black (#111111) pill button (30px radius)"
+- "Design a 3-column product card grid with square images (no border radius), 4px gap between cards, product name in 16px/500 Nike Black (#111111), price in 14px/500, and secondary text in Grey-500 (#707072)"
+- "Build a sticky white navigation bar with a left-aligned logo, centered category links in 16px/500 (#111111) with hover color #707072, and right-aligned search (24px radius, #F5F5F5 background), favorites, and cart icons"
+- "Create a promotional banner strip with #111111 background, white 12px/500 centered text, and 8px vertical padding — full width, no border radius"
+- "Design a secondary outlined button with transparent background, 1.5px #CACACB border, 30px pill radius, 16px/500 #111111 text, hover border darkening to #707072"
+
+### Iteration Guide
+
+When refining existing screens generated with this design system:
+1. Focus on ONE component at a time
+2. Reference specific color names and hex codes from this document
+3. Remember: product photography is the color — UI stays monochromatic
+4. Use the grey scale for state changes: #F5F5F5 → #E5E5E5 → #CACACB → #707072
+5. If something feels too colorful in the UI, it probably is — Nike keeps UI greyscale
+6. Display type (Nike Futura) should ALWAYS be uppercase and never below 24px
+7. Body type (Helvetica Now) should almost always be weight 500 for interactive elements