---
name: Swoosh Nike
description: "Excellent example of premium e-commerce design where restraint and negative space put focus entirely on the product."
version: alpha

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

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 53px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.75
    fontWeight: 500
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  label:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 500
    letterSpacing: "0.5px"

rounded:
  sm: 8px
  md: 12px
  lg: 16px
  pill: 999px

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

---

## Overview

A minimalist, image-first platform for discovering and buying premium sneakers.

*A curated gallery for exclusive sneaker releases*

## Colors

High-contrast black on off-white with brand red used sparingly in imagery

- **Background (`#F5F5F5`)** — uses `bg` token
- **Primary text (`#111111`)** — uses `ink` token
- **Secondary text (`#707072`)** — uses `ink-soft` token
- **Muted (`#9E9EA0`)** — uses `muted` token
- **Borders (`rgba(17,17,17,0.1)`)** — uses `line` token

## Typography

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

- Use Helvetica Now Text or equivalent grotesque-sans
- Maintain medium weight (500) for primary text
- Keep letter-spacing tight for display sizes

## Layout

4-column grid of image cards with text below

*Rhythm:* Consistent 4px-based spacing system with standard increments

## Elevation & Depth

- 0px 4px 8px 0px rgba(17,17,17,0.06)
- 0px 0px 24px 4px rgba(17,17,17,0.03)
- 0px -1px 0px 0px rgb(229,229,229) inset
- Borders: Thin 1px borders using rgba(17,17,17,0.1)

## Shapes

- `sm`: 8px
- `md`: 12px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with black background and white text
- **card:** Image-first cards with rounded corners and product info below
- **chip:** Simple text labels for categorization
- **input:** Clean text inputs with bottom border
- **hero:** Full-width imagery with overlaid text or minimal background

## Do's and Don'ts

**Don't:**
- Don't use gradient backgrounds — screenshot shows solid off-white (#F5F5F5) or white (#FFFFFF) backgrounds
- Don't use decorative serifs — screenshot shows Helvetica Now (grotesque-sans) for all text
- Don't use heavy drop shadows — screenshot shows very subtle shadows (0.06 opacity) or none
- Don't center-align product text — screenshot shows left-aligned product names and descriptions
- Don't use complex card layouts — screenshot shows simple image cards with text below
- Don't use multiple accent colors — screenshot shows neutral palette with brand red only in images

---

## System Prompt (paste into AI agent)

```
Nike SNKRS platform for exclusive sneaker releases. Minimalist design with generous white space and image-first approach. Primary colors: off-white background (#F5F5F5), near-black text (#111111), with brand red appearing only in product imagery. Typography uses Helvetica Now Text (grotesque-sans) at medium weight (500). Layout is a clean 4-column grid with 24px gutters. Critical don'ts: Never use gradient backgrounds, avoid decorative serifs, don't add heavy shadows, keep text left-aligned, maintain simple card layouts, avoid multiple accent colors.
```