Extreme editorial restraint — a gallery wall where the photography is the content and the interface is a label standing beside it. The palette is pure #ffffff and #000000 with a thin grey ladder and a muted sage pair (#4d564f, #151a16) for headings, and there is no accent colour at all: any colour on the page comes from the imagery, including the hero wordmark, which is tinted from the photograph behind it. The remarkable finding is that this site has NO display type whatsoever — the largest character anywhere is 16px, and the entire scale lives between 12 and 16px, set in one custom face at a flat weight 400, all UPPERCASE, with positive tracking scaled to size from +0.3px at 12 up to +0.6px on buttons. Full-bleed campaign photography and video carry the whole hierarchy instead. Its signature background device is a DUAL-ENDED scrim — dark at both the top and bottom with a clear centre — so floating 12px labels stay legible at either edge while the photograph reads untouched through the middle. Buttons are small near-square rectangles at 2px radius, 38-40px tall, in strict black and white inverse pairs, becoming translucent white fills over media; the 9999px pill radius is reserved for carousel dots. Depth is 1px borders alone, motion is deliberately sparse, and the responsive ladder is unusually device-targeted, tuning crops at literal handset and tablet widths.
Browse Byredo in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: byredo.com/us_en (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. 75 :root vars, mostly layout; §2 read from computed fills/text. The#28cb1a,#3860be,#32ae88,#f9fffaand#f9f9fcvalues are third-party widget chrome (OneTrust consent, Swiper, a validation control) — excluded as not-brand. The green in the hero wordmark is sampled from the campaign photography, not a fixed token. Reality check: the hint is accurate and the sharpening is dramatic. "Stark minimal monochrome" is exactly right — pure #ffffff / #000000 with a grey ladder. What no hint could convey: there is no display type on this site at all. The largest text anywhere is 16px. Every heading, nav item, button and label sits at 12–16px, UPPERCASE, with positive tracking — the imagery carries the entire visual hierarchy on its own.
Extreme editorial restraint. The page is pure white and pure black with a thin grey ladder between, and it contains no large type whatsoever — the biggest character on the page is 16px. Everything is set UPPERCASE in a single custom sans at 12–16px with open tracking, so the interface reads as a set of quiet captions arranged around full-bleed campaign photography and video. The brand wordmark appears overlaid on the imagery, coloured from the photograph rather than from a palette. The result is a gallery wall: the pictures are the content and the UI is a label beside them. Feels: austere, editorial, gallery-quiet, uncompromising.
| Token | Hex / value | Role / usage |
|---|---|---|
| black | #000000 | primary text, buttons, borders (572 uses) |
| near-black | #0a0a0a | rare deeper black |
| white | #ffffff | canvas, text over photography |
| grey | #767676 | secondary text + fill |
| grey-2 | #707070 | border grey |
| ink-grey | #555555 | body secondary |
| surface | #f5f5f5 | light surface |
| surface-2 | #f4f4f4 | alt light surface |
| border-light | #dddddd | hairline |
| sage | #4d564f | muted heading / label tint |
| sage-dark | #151a16 | dark sage text |
| scrim-75 | rgba(0,0,0,.75) | image scrim |
| scrim-50 | rgba(0,0,0,.5) | lighter scrim |
| white-20 | rgba(255,255,255,.2) | translucent control on media |
| white-50 | rgba(255,255,255,.5) | translucent control on media |
Rules: the palette is monochrome plus a sage-grey pair (#4d564f / #151a16) used for muted labels. There is no accent colour. Any colour visible on the page comes from the photography — including the hero wordmark, which is tinted from the image behind it.
One custom family, byredoSans, and it never gets large. The type scale spans just 12px to 16px — nav, headings, buttons, body and captions all live inside that four-pixel range — and everything is UPPERCASE with positive tracking that scales with size (+0.3px at 12, +0.35px at 14, +0.4px at 16, +0.6px on buttons). Weight is a flat 400 throughout; there is no bold, no display cut and no second family.
Specimen substitution: previews load Inter as the open stand-in; the site
ships the licensed byredoSans. Note that Byredo's real face is slightly
narrower, so the specimen runs marginally wide.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Largest on page (h4) | byredoSans | 16/22.4 | 400 | +0.4px, UPPERCASE |
| Body / default | byredoSans | 14 | 400 | +0.35px |
| Section head (h2) | byredoSans | 12/28 | 400 | +0.3px, UPPERCASE |
| Nav | byredoSans | 12/16 | 400 | +0.3px, UPPERCASE |
| Caption / label | byredoSans | 12/16 | 400 | +0.3px, UPPERCASE |
| Button | byredoSans | 12/12 | 400 | +0.6px, UPPERCASE |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.