CURATED · OPEN · FREE

Swoosh Nike

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

SaaSConsumerPremiumClean

↓ Download design system (16 MB)Open in OpenDesign

Visit: https://www.swoosh.nike

📦 Browse pack contents →

Identity DNA

SneakerDropCultureExclusive

A curated gallery for exclusive sneaker releases

Color

#111111Ink

#707072Ink soft

#F5F5F5BG

#FFFFFFBG soft

#E5E5E5BG quiet

#9E9EA0Muted

rgba(17,17,17,0.1)Line

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

Typography

grotesque-sans

display53px · 500
headline20px · 500
body16px · 500
caption14px · 400
label12px · 500

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

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px-based spacing system with standard increments

Surfaces

sm · 8px

md · 12px

lg · 16px

pill · 999px

Thin 1px borders using rgba(17,17,17,0.1)

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

Layout

1440container

4columns

24pxgutter

768 / 1024breakpoints

4-column grid of image cards with text below

Motion & Interaction

150msmicro

250mssmall

400msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth fade-ins for content loading · Subtle background transitions

Subtle background color change or scale effect · Immediate visual feedback with reduced opacity

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

Voice & Don'ts

Tone Direct, informative, and product-focused
Headlines Bold and concise product names
CTAs Action-oriented buttons like 'Learn More'

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
Avoid: Overly enthusiastic or promotional language
Avoid: Complex technical descriptions
Avoid: Informal slang unless part of product name

Inside the pack — real screenshots

Swoosh Nike — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko