# Byredo — Marketing site Design Spec

> 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`, `#f9fffa` and `#f9f9fc` values 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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

## 3. Typography Rules

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 |

## 4. Component Stylings

Buttons are small rectangles at a near-square **2px** radius, 38–40px tall with
`12px 10px` padding and 12px UPPERCASE labels at +0.6px tracking, in a strict
inverse pair: solid black with white text, or white with a 1px black border. Over
imagery, controls become translucent `rgba(255,255,255,.2)` / `.5` fills. The
9999px pill radius (19 uses) belongs to carousel dots and small indicators, not
to buttons.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary | #000000, #fff, 2px, 38px, UPPER +0.6px | 0.2s ease-in | `focus-visible` sets `outline-offset: 2px` | — | bg → #000000 |
| Secondary | #ffffff, #000, 2px, 1px #000 border | 0.2s ease-in | as above | — | — |
| On-media control | rgba(255,255,255,.2 / .5) | 0.3s opacity | as above | — | — |
| Input | 1px #dddddd / #707070 | — | as above | — | `opacity: 1` (kept legible) |

Focus note: the site keeps a real `:focus-visible` path and sets
`outline-offset: 2px` — it relies on the browser's default outline for the ring
itself rather than suppressing it, which is acceptable. Specifying an explicit
colour would be an improvement. Note also `input:disabled { opacity: 1 }` — a
deliberate choice to keep disabled fields readable rather than faded.

## 5. Layout Principles

There is effectively no chrome bar: `MENU` sits top-left and `CART (0)` top-right
as 12px uppercase labels floating directly on the media, with the wordmark
centred over the image. Below, content is full-bleed photographic and video
panels stacked edge to edge with small caption blocks. Margins are tight; the
imagery is the layout.

## 6. Depth & Elevation

Radius: **9999px** (19 uses — carousel dots and indicators), **2px** (15 uses —
buttons), 3px, 4px, 6px, 20px, 50px, 50%. Shadows are essentially absent from the
brand surface: the six recorded are all third-party widget chrome (a transparent
placeholder, a Stripe-style layered shadow, grey glows from an embedded control).
Borders carry structure — **1px #000000** (5 uses), 1px #dddddd, 1px #707070. One
`backdrop-filter: blur(20px)` on a floating overlay.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| transform, top | 0.2s | ease | nav/sticky elements (dominant, 6x) |
| opacity | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | image and panel fades |
| all | 0.2s | ease-in | buttons |
| all | 0.1s | ease | fast micro-interactions |
| all | 0.3s | cubic-bezier(0.4, 0, 0.2, 1) | larger surfaces |

House feel: **very sparse**. The transition census is small (single-digit counts
across the board) which matches the brand's stillness — this is a site that
deliberately does not move much. `@keyframes` are all functional: `progress-grow`
and `line` (carousel progress), `stroke-loader-circular`, `spin`, `pulse`,
`slide-down-custom`, plus `onetrust-fade-in` from the consent widget. A **Swiper**
carousel is present (its easing var appears in the sheet). No animation library
otherwise. **No `prefers-reduced-motion` block** (`reducedMotionBlocks:0`) —
worth adding for the autoplaying hero video.

## 8. Backgrounds, Effects & WebGL

One gradient, and it is a signature framing device rather than decoration: a
**dual-ended scrim**
`linear-gradient(rgba(0,0,0,.76) 0%, transparent 172px, transparent 85%, rgba(0,0,0,.76) 100%)`
— dark at both the top *and* bottom with a clear middle, so the floating 12px
labels stay legible at either edge while the photograph reads untouched through
the centre. One `backdrop-filter: blur(20px)`. 1 video, 2 raster layers. No
canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Keep the entire type scale between 12 and 16px — resist adding a display size.
- Set everything UPPERCASE at weight 400 with tracking scaled to size (+0.3 to +0.6px).
- Let full-bleed photography and video carry the whole hierarchy.
- Use the dual-ended scrim (dark top and bottom, clear centre) to float labels over media.
- Keep buttons small and near-square at 2px radius, in black/white inverse pairs.
- Reserve 9999px for carousel dots, never for buttons.
- Tint the overlaid wordmark from the photograph rather than from a palette.

### Don't
- Don't introduce a display size or a bold weight — there is neither.
- Don't add an accent colour; the only colour is in the imagery.
- Don't put shadows on brand surfaces; the ones present are third-party.
- Don't set running text in sentence case.
- Don't ship without a reduced-motion block given the autoplaying hero.

## 10. Responsive Behavior

An unusually **device-targeted** ladder — 40 steps, and many are literal handset
and tablet viewport widths rather than abstract tiers (344, 390, 412, 414, 430,
820, 854, 912), which suggests per-device tuning of the photographic crops:

| Breakpoint | What changes |
|---|---|
| max 320 / 344 / 360px | smallest handsets |
| 376 / 390 / 412 / 414 / 430px | individual phone widths |
| 768px | tablet |
| 820 / 854 / 912px | individual tablet widths |
| 1024 / 1025px | desktop |
| 1280 / 1441 / 1536 / 1921px | wide and ultra-wide |

No dark-scheme blocks (`darkSchemeBlocks:0`), no container queries, no
reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Ink `#000000` · Muted `#767676` / `#555555` · Sage label `#4d564f` · Border `1px #000000` / `#dddddd` · **No accent colour**
- Font: byredoSans (Inter stand-in) · **Entire scale 12–16px, UPPERCASE, weight 400**, tracking +0.3 to +0.6px · Radius: **2px** buttons / 9999px dots · Control height: 38–40px
- Focus: `focus-visible` + `outline-offset: 2px` (browser default ring) · Scrim: dual-ended `rgba(0,0,0,.76)` top and bottom · Motion: sparse, 0.2s ease

<byredo_design_language>
Extreme editorial restraint — a gallery wall where the photography is the content
and the UI is a label beside it. Pure #ffffff canvas and #000000 ink with a thin
grey ladder (#767676, #707070, #555555, #dddddd, #f5f5f5) and a muted sage pair
(#4d564f, #151a16) for labels. There is NO accent colour and, more unusually, NO
display type at all: the largest text anywhere on the page is 16px, and the entire
scale lives between 12 and 16px. Everything is set in one custom face (byredoSans;
stand-in Inter) at a flat weight 400, UPPERCASE, with positive tracking scaled to
size — +0.3px at 12, +0.35px at 14, +0.4px at 16, +0.6px on buttons. Buttons are
small near-square rectangles at 2px radius, 38-40px tall with 12px 10px padding,
in strict black/white inverse pairs; 9999px is reserved for carousel dots, never
buttons. Over media, controls become translucent rgba(255,255,255,.2/.5). Depth is
1px borders only — the shadows present all belong to third-party widgets — with
one backdrop blur(20px). The signature background device is a DUAL-ENDED scrim,
linear-gradient(rgba(0,0,0,.76) 0%, transparent 172px, transparent 85%,
rgba(0,0,0,.76) 100%), dark at top and bottom with a clear centre so floating
12px labels stay legible while the photograph reads untouched. Motion is
deliberately sparse (0.2s ease, single-digit transition counts). Feels: austere,
editorial, gallery-quiet. Avoid: adding a display size or bold weight, any accent
colour, shadows on brand surfaces, sentence-case running text.
</byredo_design_language>