CURATED · OPEN · FREE

Off-White

A premium streetwear brand combining industrial aesthetics with high-fashion editorial photography.

fashionstreetwear

↓ Download design system (13 MB)Open in OpenDesign

Visit: https://www.off---white.com

📦 Browse pack contents →

Identity DNA

streetwearluxuryurbanhigh-fashionindustrial

A high-fashion editorial magazine meets urban street culture.

Color

#0019E9Accent

#000000Ink

#6F6F6FInk soft

#F5F5F5BG

rgba(0,0,0,1)Line

High-contrast monochrome with a single vivid electric blue accent for CTAs.

Typography

geometric-sans · humanist-sans · monospaced

display24px · 700
h116px · 600
body14px · 400
caption11px · 400

Spacing

4px

8px

12px

16px

20px

24px

32px

56px

Consistent 4px grid with tight padding in UI elements and generous gaps in editorial layouts.

Surfaces

sm · 2px

md · 8px

lg · 20px

pill · 999px

Thin 1px borders using primary ink color.

None: None · None: None

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A split-screen layout for newsletter modals: 50% photographic editorial, 50% clean form UI.

Motion & Interaction

200msmicro

500mssmall

500msmedium

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

Fade-in for modal overlays and smooth transitions for hover states.

Subtle color transitions on interactive elements. · Immediate visual feedback on buttons and links.

Components

button Solid electric blue background (#0019E9) with white text for primary actions; white background with blue text for secondary actions.
card Simple containers with thin borders and sharp corners.
chip Radio buttons with circular outlines and text labels.
input Minimalist text inputs with only a bottom border.
hero Large, high-resolution editorial photography.

Voice & Don'ts

Tone Confident, exclusive, and minimalist.
Headlines Direct, uppercase, and punchy (e.g., 'JOIN THE OFF-WHITE™ COMMUNITY').
CTAs Clear, imperative verbs (e.g., 'Shop now', 'Accept All Cookies').

don't use rounded corners — screenshot shows sharp, minimal radii (2px) on most elements
don't use playful or casual fonts — screenshot uses clean sans-serifs and monospaced fonts
don't use a complex color palette — screenshot relies on black, white, and a single electric blue
don't use drop shadows on every element — screenshot only applies them to modals and overlays
don't use centered text for long paragraphs — screenshot uses left-aligned and centered text sparingly
don't use multi-column layouts for text-heavy sections — screenshot favors clean, single-column readability in modals
Avoid: Overly decorative elements
Avoid: Excessive use of multiple colors
Avoid: Playful or casual language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

This site is a premium streetwear fashion brand website featuring a minimalist, high-contrast aesthetic. The design is dominated by a monochrome palette of black (#000000) and off-white (#F5F5F5), with a single vibrant electric blue (#0019E9) used as a high-chroma accent for call-to-action buttons and links. Typography is primarily a clean, humanist sans-serif for body text and a geometric sans-serif for display, with occasional use of a monospaced font for technical or structural details. Key design features include split-screen editorial modals, large high-resolution photography, and thin 1px borders. Critical design constraints: avoid rounded corners on buttons, never use more than one accent color, and maintain the stark, industrial-modern feel. The layout is built on a strict grid with tight spacing in UI elements and generous whitespace in editorial compositions.

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