# Off-White · Design system migration spec

> Source: https://www.off---white.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of high-fashion luxury streetwear web design, showcasing how a minimal color palette and strong photography can create a premium brand identity.

## 1. Identity DNA

The design system for Off-White functions like a high-fashion editorial magazine bound in an urban street-culture binder. It merges the stark, considered minimalism of luxury print with the raw, industrial materiality of its source culture.

**One-liner:** A premium streetwear brand combining industrial aesthetics with high-fashion editorial photography.
**Keywords:** streetwear · luxury · urban · high-fashion · industrial
**Analogy:** A high-fashion editorial magazine meets urban street culture.

## 2. Color

The palette is a study in high-contrast monochrome, relying on a foundational tension between deep ink and off-white canvas. A single, vivid electric blue acts as a precise tool for direction, not decoration.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F5F5` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#6F6F6F` | secondary text |
| `--muted` | `#6F6F6F` | placeholder |
| `--accent` | `#0019E9` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** High-contrast monochrome with a single vivid electric blue accent for CTAs.

This restraint ensures the singular accent retains its imperative power for user actions.

## 3. Typography

Typography is selected for its clean, industrial voice, pairing a geometric sans-serif for impact with a humanist sans-serif for legibility. The occasional monospaced detail nods to technical schematics, reinforcing the brand's structural aesthetic.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.2 | 700 | 0px | Promotional headlines |
| h1 | 16px | 1.2 | 600 | 0px | Navigation links |
| body | 14px | 1.5 | 400 | 0.42px | Main body copy |
| caption | 11px | 1.3 | 400 | 0.48px | Fine print and legal text |

## 4. Spacing

A consistent 4px grid underpins all spacing, creating a palpable rhythm between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 56 px
- **Rhythm:** Consistent 4px grid with tight padding in UI elements and generous gaps in editorial layouts.

## 5. Surfaces

Surface and depth are communicated with minimal means: thin 1px borders define containers, while shadows are reserved exclusively for modal overlays and elevated panels. The effect is architectural, not atmospheric.

- **Radius:** sm 2px · md 8px · lg 20px · pill 999px
- **Shadows:**
  - None: None
  - None: None
- **Borders:** Thin 1px borders using primary ink color.

## 6. Layout

The layout skeleton is often a clean, split-screen composition, dividing photographic editorial from functional UI. Generous whitespace in editorial sections contrasts with tight, efficient padding in interface components.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is employed with clinical precision, favoring subtle fade-ins and smooth opacity changes. Transitions operate on a measured 0.5-second ease-in-out timeline, ensuring feedback is clear but never theatrical.

- **Durations:** micro 200ms · small 500ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.6, 1)`
- **Patterns:**
  - Fade-in for modal overlays and smooth transitions for hover states.

- **Hover:** Subtle color transitions on interactive elements.
- **Click:** Immediate visual feedback on buttons and links.
- **Transition:** Smooth opacity and color changes over 0.5s ease-in-out.
- **Keyboard:** Standard tab navigation for forms and links.

## 8. Voice & Don'ts

The editorial voice is confident, exclusive, and direct, employing uppercase headlines and imperative CTAs. Language is stripped of casual flourish, mirroring the system's visual austerity.

- **Tone:** Confident, exclusive, and minimalist.
- **Headline style:** Direct, uppercase, and punchy (e.g., 'JOIN THE OFF-WHITE™ COMMUNITY').
- **CTA style:** Clear, imperative verbs (e.g., 'Shop now', 'Accept All Cookies').
- **Avoid:** Overly decorative elements / Excessive use of multiple colors / Playful or casual language

### Don'ts
- ❌ 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

The system deliberately rejects playful language, decorative elements, and complex color as antithetical to its premium, industrial identity.

## System Prompt (paste into AI tool)

```
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.
```
