← OpenDesign
CURATED · OPEN · FREE
Swoosh Nike
A minimalist, image-first platform for discovering and buying premium sneakers.
SaaS Consumer Premium Clean
01
Identity DNA
Sneaker Drop Culture Exclusive
A curated gallery for exclusive sneaker releases
02
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
03
Typography
grotesque-sans
display 53px · 500headline 20px · 500body 16px · 500caption 14px · 400label 12px · 500Use Helvetica Now Text or equivalent grotesque-sans · Maintain medium weight (500) for primary text · Keep letter-spacing tight for display sizes
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Consistent 4px-based spacing system with standard increments
05
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
06
Layout
1440 container
4 columns
24px gutter
768 / 1024 breakpoints
4-column grid of image cards with text below
07
Motion & Interaction
150ms micro
250ms small
400ms medium
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
08
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
09
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
10
Inside the pack — real screenshots
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 Captured from the live site · real computed styles
11
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.
More from the library
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: Excellent example of premium e-commerce design where restraint and negative space put focus entirely on the product.