Design System
Analysis of Off-White™

A stark gallery-white canvas wired with monospaced IBM Plex type and crisp black hairlines, punctuated by a single electric cobalt blue — industrial, uppercase, and almost entirely square.

01 — Foundations

Colour Palette

02 — Foundations

Typography

One monospaced family (IBM Plex Mono) sets nearly everything in uppercase; a literary serif — Off-White's proprietary "Bookish", shown here as its nearest Google substitute Spectral — is rationed to prices and status tags.

03 — Components

Button Variants

button-primary
Cobalt #0019e9 fill, white uppercase mono, 2px corners — the community / sign-up action.
button-dark
Pure-black fill: the primary commerce action on every product page.
button-secondary
White with a 1px black rule — the quiet companion to the solid actions.
button-pill
Sunken warm-grey chip for filters and toggles — the one place a softer 20px radius appears.
04 — Components

Cards & Surfaces

Product cards are flat and borderless — a square image, a monospace title, and a serif price. Hover lifts only a tight contact glow.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

A tight ~4px-based scale; 12px is the canonical field padding and list rhythm.

07 — Foundations

Border Radius

Effectively square. 2px dominates by roughly 10×, and nothing on the page exceeds a 20px pill.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default; separation comes from rules and whitespace, not shadow.
Level 1 — a tight contact glow on hovered media and floating UI.
Level 2 — detached overlays only: mini-cart and dropdowns.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxGrid collapses to 1–2 columns; mega-nav becomes a drawer; 14px mono body holds.
Tablet768–1023pxFour-up product grid drops to two-up; side gutters tighten.
Laptop1024–1279pxFour-up catalog grid; full uppercase navigation bar.
Desktop≥ 1280pxCentered max-width shell with generous gutters; full-bleed editorial media.

Type sizes hold near-constant across breakpoints — the catalog keeps its utilitarian 14px monospace body rather than fluidly scaling, preserving the industrial feel on mobile.

Membership Tiers

Off-White™ has no paid tiers; this demonstrates the plan/card pattern in brand dress — flat panels, a black "most-popular" inversion, cobalt bullet dots.

General
Free
Browse the full catalogue and save to your wishlist.
  • Full catalogue access
  • Wishlist & saved items
  • Order tracking
Member● Most popular
Free
Early access to drops, saved checkout, members-only editorial.
  • Everything in General
  • Early access to drops
  • Saved checkout
  • Members-only editorial
Insider
Invite
Private sales, exclusive capsules, and priority support.
  • Everything in Member
  • Private sales
  • Exclusive capsules
  • Priority support

Data Table

The table pattern in brand dress: uppercase mono headers, hairline rows, square status chips, serif pricing.

IDItemSizeStatusWhen
#OW-4821Soccer '26 Tech T-ShirtMShipped2d ago
#OW-4790Arrow Skate T-ShirtLShipped5d ago
#OW-4755Diag Tab HoodieMProcessing1w ago
#OW-4712Industrial Belt 35mmOSPacking1w ago
#OW-4688Out Of Office Sneaker43Delivered2w ago
1–5 of 412
123

Auth Forms

Sign-in and create-account in the system's flat, square, monospace dress.

Sign in

Welcome Back

OR
Create account

Join Off-White™

OR