---
title: "Off-White design system"
variant: extended
source: https://off-white.valeriafrancis.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/off-white-valeriafrancis-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Off-White · Design System

> Streetwear history in stark black, white, and green

**Theme:** light · **Industry:** fashion · **Source:** https://off-white.valeriafrancis.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

An editorial brand story that pairs a stark black opening with long white storytelling sections. Acid-green typography and graphic shapes punctuate monochrome fashion photography, creating a collage-like account of Off-White’s origins and identity.

## North star

Build the page as a spacious fashion-editorial collage, using black and white as the canvas and acid green as a sharp, purposeful interruption.

## Overview

The page uses a deliberately stark palette: a full black opening canvas gives way to expansive white editorial sections, while electric green marks key headings, pull quotes, graphic shapes, and directional symbols. Red appears sparingly on selected collaboration links rather than defining the overall identity. The custom Offwhite sans-serif carries both oversized headings and compact explanatory copy; the hierarchy shifts between emphatic display statements and smaller, restrained narrative text. Layout is asymmetrical and collage-like, with offset portraits, cutout product imagery, rotated photographs, and tape-like graphics rather than conventional cards. Generous white space separates story beats, while occasional vivid green bands create abrupt visual anchors. Photography is predominantly monochrome or muted, helping the green graphics and typography remain the strongest colour signals. The page feels flat and poster-like: overlapping assets provide depth without relying on shadows, rounded corners, or decorative borders.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Black | `#000000` | `--color-editorial-black` | surface | Opening full-screen canvas, primary text, and dark blocks anchoring the fashion story. |
| Volt Green | `#00fb34` | `--color-volt-green` | accent | Story headings, prominent links, oversized geometric shapes, quote bands, and directional graphics. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main storytelling canvas and light contrast for black text and monochrome imagery. |
| Alert Red | `#ff0000` | `--color-alert-red` | semantic | Rare collaboration-link accent; keep it isolated rather than using it as a general page colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Editorial Black) · `--color-text` → `#000000` (Editorial Black) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-accent` → `#00fb34` (Volt Green) · `--color-accent-2` → `#ff0000` (Alert Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#00fb34` | `#ffffff` | 1.41:1 | fail |
| `#00fb34` | `#000000` | 14.85:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Offwhite | `--font-body` | webfont | 400, 700, 600 | Site-wide display, headings, narrative copy, captions, and links. | Montserrat |

- **Offwhite:** Use bold display headings, regular narrative text, and semibold links; retain the measured untracked, mixed-case treatment.

### Type scale — Perfect Fourth (ratio ≈ 1.369, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 700 | 1 | 0 | — | Offwhite | Oversized editorial statements and major quote moments. |
| h1 | 72px | 700 | 1 | 0 | — | Offwhite | Primary story titles and strongest section headings. |
| h2 | 42px | 400 | 1.55 | 0 | — | Offwhite | Large supporting headlines and prominent narrative statements. |
| h3 | 38px | 600 | 1.55 | 0 | — | Offwhite | Secondary editorial headings and section introductions. |
| h4 | 36px | 400 | 1.19 | 0 | — | Offwhite | Compact story subsection headings. |
| body | 20px | 400 | 1.55 | 0 | — | Offwhite | Explanatory brand-history paragraphs and supporting copy. |
| caption | 18px | 600 | 1.55 | 0 | — | Offwhite | Short image notes and small emphasized labels. |
| link | 38px | 600 | 1.55 | 0 | — | Offwhite | Large navigation or editorial links, including the ABOUT treatment. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 40, 45, 60, 75, 120 px.
- Section rhythm 60px · element gap — · card padding — · max content width 740px.

Use broad, single-column story bands, with measured content constrained to a 740px maximum width where appropriate. The screenshot shows substantial white space and deliberate offsets rather than a strict, repeated card grid. Combine edge-spanning colour fields with images and text that sit at different alignments; let overlap and asymmetry shape each narrative beat. Keep section transitions distinct, including the long black opening followed by white editorial content. The measured section rhythm uses a 60px section gap and a comfortable density.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The design is predominantly flat: measured data reports no shadows and no radius scale. Separate content through large fields of black, white, and green rather than card borders. Create depth through overlapping, rotated photographs and graphic cutouts, keeping edges crisp and avoiding UI-like containers.

## Imagery

Use fashion and founder photography as editorial cutouts and large monochrome portraits, interspersed with apparel product imagery. Mix isolated objects, angled photo panels, and overlapping assets with bright green graphic backplates and tape-like motifs. Keep photography muted or grayscale where possible so vivid green remains the dominant visual accent.

## Components

### Menu control

A small, unobtrusive three-line control sits at the upper-right of the black opening; retain the high-contrast graphic treatment.

### Editorial links

Large semibold Offwhite links use Volt Green (#00fb34); selected collaboration links use Alert Red (#ff0000).

### Story heading

Use expressive Offwhite sans-serif headings, often in Volt Green, positioned as part of the editorial composition rather than inside cards.

### Pull-quote band

Set centered black quotation text against a full-width Volt Green field for a bold interruption between image-led passages.

### Photo collage

Layer offset monochrome portraits and product cutouts with geometric green backplates; preserve clean, unrounded edges.

### Tape graphic

Use yellow printed-tape imagery as a story-specific graphic motif, not as a core interface colour.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 13.3333px Arial
- **Link** (“ABOUT”): transparent background · text #00fb34 · border 1px solid · radius 0px · padding 0px · 600 38px Offwhite

## Do

- Keep the opening field stark and predominantly black.
- Use #00fb34 for selective emphasis, not for every element.
- Set long-form stories on expansive white space.
- Let photographs and cutouts overlap asymmetrically.
- Mix oversized headings with compact narrative copy.
- Use monochrome imagery to protect the palette’s contrast.

## Don't

- Do not add rounded-card UI or drop shadows.
- Do not turn the layout into a regular card grid.
- Do not use red as a broad background or primary accent.
- Do not crowd the whitespace between story beats.
- Do not make every heading the same size or colour.
- Do not introduce unmeasured colours into the core palette.

## Agent prompt

Create a new fashion-editorial page in Off-White’s visual language. Use Editorial Black (#000000) and Gallery White (#ffffff) as the primary canvases, with Volt Green (#00fb34) reserved for important headings, graphic shapes, links, and quote bands. Apply Alert Red (#ff0000) only to an occasional collaboration-style link. Use a clean sans-serif close to the measured Offwhite font, balancing large bold statements with compact regular body copy. Compose the page as spacious, asymmetrical editorial storytelling rather than a conventional grid: layer monochrome fashion photography, product cutouts, and crisp geometric graphics. Keep surfaces flat, corners square, and separation dependent on colour fields and whitespace rather than shadows or cards. Make every section feel like a distinct poster-like story beat.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A full-screen black opening field with a small menu control at the upper right. | minimal entry point, menu access | black canvas, compact line-menu icon |
| 2 | feature-split | White editorial band with offset fashion imagery, green headings, and scattered text and graphic elements. | scroll-led storytelling, editorial link discovery | green headings, monochrome photos, tape motif, quote band |
| 3 | team | A white biography collage layering founder portraits, tilted images, large green shapes, and scattered copy. | founder biography, visual narrative progression | overlapping portraits, green geometric backplate, large pull quote |
| 4 | timeline | A centered story heading and explanatory copy lead into repeated apparel imagery and a full-width green quote field. | chronological brand story, scroll continuation | centered heading, repeating product cutouts, green quote band |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/off-white-valeriafrancis-com