---
version: alpha
name: "Byredo"
description: "Token-first design system reference for Byredo — Stockholm perfume house built on stark black-and-white contrast, cinematic photography, and a bespoke sans that weaponizes negative space."

colors:
  background: "#ffffff"
  surface: "#f5f5f5"
  surface-warm: "#000000"
  ink: "#000000"
  ink-muted: "#767676"
  on-background: "#000000"
  on-surface: "#000000"
  primary: "#000000"
  on-primary: "#ffffff"
  primary-container: "#1a1a1a"
  text-hover: "#1883fd"  # was rgb(24,131,253) — Google format requires hex
  focus-ring: "#000000"
  border: "#e5e7eb"
  border-dark: "#000000"
  shadow-soft: "#808080"  # was rgb(128,128,128) — Google format requires hex
  error: "#ef4444"
  overlay-scrim: "#000000"  # was rgba(0,0,0,0.76) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2.4px
  heading-section:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 2.2
    letterSpacing: 0.17px
  body:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.35px
  nav-link:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.6px
  button-ui:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.6px
  caption:
    fontFamily: "DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.0
    letterSpacing: 0.25px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 108px

rounded:
  none: 0px
  xs: 2px
  sm: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
  nav-item-hover:
    textColor: "{colors.ink-muted}"
    typography: "{typography.nav-link}"
    padding: 8px 12px
---

# Byredo Design System

## Overview

Byredo's web presence is a film still paused at the precise moment before the light changes. The canvas opens on full-bleed atmospheric photography — candlelight warming lacquered wood, amber perfume bottles against linen shelves, black glass vessels arrayed like instruments in a still-life composition. Against these scenes, the white wordmark "BYREDO" floats in a bespoke grotesque: wide-spaced, even-weighted, almost typeset rather than designed. The entire visual contract is established in the first viewport: black and white are the only brand colors, and photography does the emotional work that most luxury brands assign to illustration and gradient.

The typographic system mirrors that restraint. The proprietary `byredoSans` (closest public substitute: DM Sans) runs at ultra-small sizes — 12px for navigation, 10–12px for captions — all-caps with generous tracking (`0.6px` at 12px is `0.05em`, calibrated for pharmaceutical-label legibility). This creates a deliberate counterpoint to the scale of the photography: the type is a label, not a headline. Display moments use uppercase tracking at `2.4px` on 24px bodies, giving section titles the character of rubber-stamped identifiers rather than editorial copy. The effect reads simultaneously minimal and precise — a chemistry lab meets a hotel corridor in 1973.

What defines Byredo apart from every other monochrome luxury brand is the **still-life grammar**: products are never held, worn, or used. They sit in compositions — candles on bookshelves, perfume bottles on oak surfaces, creams arranged as architectural objects. The UI never competes with these images; navigation is a thin white bar with zero chrome, product tiles are pure white cards with no shadow or border, and the only motion is a 200ms ease on image transitions. The shopping cart appears as a barely-visible popover in the bottom-right corner. The brand's editorial logic says: the image is the product.

**Key Characteristics:**
- Pure black (`{colors.primary}`) and white (`{colors.background}`) palette — no midtones, no warmth in the UI layer itself
- Bespoke `byredoSans` (a custom grotesque) used for all text — even product names, navigation, and CTAs
- 12px uppercase tracking navigation with `{typography.nav-link}` letter-spacing — reads as a stamp, not a label
- Full-bleed hero photography as the primary design element — UI chrome is suppressed so images lead
- Zero border-radius on all functional components — buttons, inputs, and cards are perfectly rectangular (`{rounded.none}`)
- Image-anchored scrim (`rgba(0,0,0,0.76)` flattened to `{colors.overlay-scrim}`) used only to protect the wordmark over photography
- Product tiles: white surface, no shadow, no border — depth comes from whitespace between cards, not elevation
- Small-caps navigation tracking creates a pharmaceutical-label precision that reads as clinical luxury
- 200ms ease transitions on media and card interactions — unhurried but present
- Cart and utility interactions stay in the periphery — center stage is always the image

## Colors

### Primary
- **Byredo Black** (`{colors.primary}`): The system's absolute anchor — used for all text, primary buttons, navigation links, and the wordmark on light surfaces. Never substituted or softened.
- **Byredo White** (`{colors.background}`): The page canvas, all product cards, and the default surface for every transactional moment. Clinical, empty, neutral.

### Surfaces
- **Light Surface** (`{colors.surface}`): `#f5f5f5` — a barely-there warm grey used for search inputs, hover fills, and background alternation. Appears so rarely it reads as a state, not a brand color.
- **Dark Surface** (`{colors.surface-warm}`): Full black — used in the cart popover panel and promotional overlay moments. The dark-mode equivalent, not a separate mode.

### Text & Muted States
- **Ink** (`{colors.ink}`): Full black `#000` — primary text color across all contexts.
- **Ink Muted** (`{colors.ink-muted}`): `#767676` — secondary text, metadata, nav sub-labels, and disabled states. The single grey in a binary system.

### Borders & Rings
- **Border** (`{colors.border}`): `#e5e7eb` — a pale neutral hairline for form fields and structural separators. Uses Tailwind's default grey-200 — barely visible on white.
- **Border Dark** (`{colors.border-dark}`): Pure black `#000` — used for secondary button outlines and aggressive structural moments.
- **Focus Ring** (`{colors.focus-ring}`): `#000000` — 1px solid black outline on focus, consistent with the brand's hard-edge philosophy.

### Photography & Overlay
- **Overlay Scrim** (`{colors.overlay-scrim}`): Rendered as solid black in the token system, applied at 76% opacity in CSS (`rgba(0,0,0,0.76)`) for hero image text protection. The only "transparency" in the system, and it's purely functional.

### Semantic
- **Error** (`{colors.error}`): Standard `#ef4444` — appears in form validation only. Not a brand accent; a system warning.

## Typography

### Font Family
- **Primary**: `byredoSans` — a proprietary grotesque with even stroke weight and wide-spaced tracking. For external implementations, **DM Sans** matches the optical feel: geometric, low contrast, with a neutral warmth that reads precision without coldness. Full fallback: `DM Sans, Helvetica Neue, Arial, sans-serif`.
- The brand uses **no secondary typeface** — byredoSans handles every context from wordmark to footnote.

*Note: `byredoSans` is a commissioned custom typeface. The fallback `byredoSans Fallback` detected by dembrandt is a metric-compatible system substitute Byredo bundles. For external implementations, DM Sans (Google Fonts) is the closest publicly available match.*

### Hierarchy

| Token | Size | Weight | Transform | Tracking | Use |
|---|---|---|---|---|---|
| `display-hero` | 64px | 300 | — | -0.5px | Editorial editorial hero serif moments (rare) |
| `display` | 24px | 400 | UPPERCASE | 2.4px | Section titles, product category headers |
| `heading-section` | 21px | 700 | UPPERCASE | 0px | Promotional callouts, section breaks |
| `heading-sub` | 19px | 400 | — | 0px | Product names in detail view, subheaders |
| `body-large` | 17px | 400 | — | 0.17px | Body copy with 2.2 line-height (editorial breathing) |
| `body` | 14px | 400 | — | 0.35px | Default product descriptions, form copy |
| `nav-link` | 12px | 400 | UPPERCASE | 0.6px | Navigation items, utility links, filter labels |
| `button-ui` | 12px | 400 | UPPERCASE | 0.6px | All button labels — matching nav tracking |
| `caption` | 10px | 400 | — | 0.25px | Product metadata, size labels, fine print |

### Principles
- **One typeface, full range**: byredoSans adapts from wordmark to footnote by weight, size, and transform alone. No secondary face is introduced for editorial moments — the system is intentionally monotonal.
- **Small base type**: 14px body (`{typography.body}`) with 1.43 line-height reads compact and precise. 10–12px captions push toward the limit of legibility, deliberately so — Byredo's visual language rewards close attention.
- **Uppercase as identity**: Navigation, buttons, and captions use `text-transform: uppercase` with calibrated tracking (`0.6px` at 12px). This is not decorative; it's the brand's primary typographic gesture — a label-press signature on every interactive element.
- **Weight restraint**: The system rarely exceeds `700`. Most text runs at `400` — product names, body, nav — with `700` appearing only in promotional headers. The brand communicates authority through size and spacing, not weight.
- **Letter-spacing as breath**: At 12px, `0.6px` tracking opens characters enough to preserve legibility at uppercase. At 14px body, `0.35px` is almost imperceptible — a whisper of air that keeps reading smooth.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Byredo's spacing reads generous at the section level (48–108px between major content blocks) and precise at the component level (8–16px within tiles and cards). The contrast between expansive negative space and tightly contained component padding is the layout signature.

### Grid & Container
- Max content width: ~1280px for product grids, full-bleed for photography sections
- Product grid: 4-column on large desktop, 3-column tablet, 2-column mobile — tightly controlled gutters, no gutter variation
- Hero: full viewport width, height 80–100vh — product photography crops to fill without letterboxing
- Cart popover: fixed bottom-right, narrow panel (~320px), z-indexed above product content
- Utility navigation: thin strip at very top (12px type, `{spacing.sm}` vertical padding), main nav below

### Whitespace Philosophy
- **Photography-first paging**: Each section gives the image maximum real estate. UI components collapse to the minimum footprint needed to complete a transaction.
- **Negative space as luxury cue**: Product tiles sit with substantial whitespace between them. The blank space signals that nothing competes for attention.
- **Tight component padding, open section margins**: Internal component padding runs 10–20px; section-to-section spacing expands to 48–108px. This compression-expansion rhythm creates a pace like turning pages in a high-production catalog.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default state — cards, page canvas, navigation bar |
| Hairline (Level 1) | `1px solid {colors.border}` | Form field borders, thin structural separators |
| Dark Outline (Level 2) | `1px solid {colors.border-dark}` | Secondary button stroke, aggressive framing |
| Scrim (Level 3) | `rgba(0,0,0,0.76)` gradient overlay | Photography text protection on hero images |
| Panel Elevation (Level 4) | `box-shadow: rgb(128,128,128) 0px 0px 5px 0px` | Cart panel, modal overlays — low-key presence |
| Focus Ring | `outline: 1px solid {colors.focus-ring}` | All interactive elements on keyboard focus |

**Shadow Philosophy**: Byredo's default state is flat. Product cards have no shadow; navigation has no shadow; nothing floats. The single detectable shadow — a barely visible `5px` grey ring on the cart panel — exists to separate a floating layer from the page without breaking the illusion of a clean plane. This is a brand that believes luxury is not weightless floating UI but rather the photograph on the page, and the page itself, lying flat.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system is near-binary:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, inputs, product cards, modal containers — the dominant rule |
| `xs` | 2px | Badge labels, cookie consent chips — functional micro-rounding only |
| `sm` | 6px | Icon buttons (close, cart open) — a single functional exception to keep small circular targets accessible |
| `pill` | 9999px | Circular avatar or icon containers when needed |

The near-zero radius philosophy is absolute for all transactional surfaces. Byredo does not soften its edges.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Solid black fill (`{colors.primary}`), white label (`{colors.on-primary}`), 12px uppercase byredoSans with `{typography.button-ui}` tracking, sharp rectangular shape. Used for "ADD TO CART", "CHECKOUT", "SHOP NOW". Hover deepens marginally to `{colors.primary-container}` (`#1a1a1a`).
- **`button-secondary`** — White fill with 1px black border, black label, same typography and padding as primary. Used for "SAVE TO WISHLIST", "CONTINUE SHOPPING". Hover inverts: black fill, white label.
- **Ghost / Link style** — No fill, no border, underlined text at `{typography.body}` size — used for inline tertiary actions and "VIEW ALL" links.

### Cards

Product tiles are white surfaces (`{colors.background}`) with no border, no shadow, and no radius. A product image fills the top portion (typically 4:5 ratio), followed by product name in `{typography.heading-sub}`, volume or variant in `{typography.caption}`, and price in `{typography.body}`. Cards acquire a `{colors.surface}` background on hover via `{components.card-hover}` with 200ms ease — the only animation on the tile itself.

### Inputs

Search input: `{colors.surface}` background at rest, black border and focus outline on focus (`{components.input-focus}`), no radius, 12px uppercase placeholder. Form fields follow `{components.input}` exactly. No glow, no color shift — structure communicates state.

### Badges / Labels

Product badges (`{components.badge}`) sit as small black rectangles with white 10px uppercase text — appearing on "NEW", "BESTSELLER", and promotion callouts. The 2px radius is the only exception to the hard-edge rule, a concession for legibility at small sizes.

### Navigation

The navigation is two-tier: a utility strip at the very top (12px, `{typography.nav-link}` — locale, stores, account) and the main navigation below the centred BYREDO wordmark (also 12px uppercase, same tracking). All links are black on white at rest, text-decoration-free. The nav carries no background shadow on scroll — it simply becomes opaque white. Mobile nav collapses to a hamburger with full-screen overlay.

## Do's and Don'ts

### Do
- Use `{colors.primary}` for all text and primary CTAs — there is no secondary brand color in the UI
- Apply `{typography.nav-link}` tracking (`0.6px` at 12px, uppercase) to every navigation and button label — this tracking IS the brand's typographic signature
- Keep all button and input radius at `{rounded.none}` — rectangular edges are non-negotiable
- Use full-bleed photography as the primary design element; let it breathe at 80–100vh before any content appears
- Set `{spacing.2xl}` to `{spacing.4xl}` between major content sections — the generous spacing is the luxury, not decoration
- Restrict the functional UI to a minimal visual footprint — nav, buttons, and inputs should feel secondary to imagery
- Use `{colors.overlay-scrim}` (`rgba(0,0,0,0.76)` in CSS) only when the wordmark or text sits directly over a photograph
- Trust `{typography.body}` at 14px and `{typography.caption}` at 10px — resist scaling up for "readability"; precision at small sizes is the brand register

### Don't
- Don't introduce border-radius beyond `{rounded.xs}` (2px) on any functional component — pill buttons or rounded cards break the clinical-luxury aesthetic
- Don't add box-shadow to product cards or page sections — the system is flat by philosophy, not by accident
- Don't use `{colors.ink-muted}` (`#767676`) for anything other than secondary metadata — it is a recessive tone, not a brand color
- Don't uppercase body copy — only navigation, buttons, captions, and section titles receive `text-transform: uppercase`
- Don't add decorative gradients or color washes — the only gradient in the system is the black scrim protecting text over photography
- Don't crowd the navigation — 8px component padding and 0.6px tracking at 12px requires breathing room horizontally
- Don't introduce a second typeface — byredoSans (or DM Sans substitute) handles every context, including display-scale moments
- Don't place product photography inside cards with borders or rounded containers — images should feel like photographs on a table, not assets inside frames
- Don't use `{colors.text-hover}` (`#1883fd`) in production UI — this blue is a Tailwind ring artefact, not a Byredo brand color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single-column layout, full-width buttons, 14px body remains unchanged |
| Mobile | 390–767px | Product grid 2-up, navigation collapses to hamburger overlay |
| Tablet | 768–1023px | 3-column product grid begins, utility nav persists |
| Desktop | 1024–1280px | Full horizontal nav, 4-column grid, max content width reached |
| Large Desktop | >1280px | Content locks at ~1280px, photography remains full-bleed in hero |

### Touch Targets
- Primary buttons: minimum 44px tap height via `14px` vertical padding + font line-height
- Navigation links: `{spacing.sm}` vertical padding — sufficient for thumb reach on the main horizontal strip
- Product tiles: entire card surface is tappable — no isolated link target
- Icon buttons (cart open, close): `{rounded.sm}` radius, minimum 40×40px footprint

### Collapsing Strategy
- **Nav**: Full horizontal nav collapses below 1024px to a hamburger; full-screen white overlay reveals stacked uppercase links at 16–21px — the nav font scales up on mobile to maintain touch-friendly density
- **Hero**: Full-bleed photography preserves aspect ratio via `object-fit: cover`; wordmark scales proportionally; any overlay text column centers and narrows
- **Product grid**: 4-up → 3-up (tablet) → 2-up (mobile small) — gutter remains constant, tile padding compresses
- **Cart panel**: Transitions from corner popover on desktop to full-width bottom sheet on mobile

### Image Behavior
- All hero images use `object-fit: cover` at 80–100vh — no letterboxing, no white bars
- Product photography maintains 4:5 or 1:1 aspect ratio via `padding-bottom` percentage containers
- The BYREDO wordmark never simplifies to a monogram or icon — the full logotype renders at all breakpoints

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — `#ffffff`
- Primary text and buttons: `{colors.primary}` — `#000000`
- Button label: `{colors.on-primary}` — `#ffffff`
- Secondary text / metadata: `{colors.ink-muted}` — `#767676`
- Hairline border: `{colors.border}` — `#e5e7eb`
- Dark border / button outline: `{colors.border-dark}` — `#000000`
- Focus ring: `{colors.focus-ring}` — `#000000`
- Subtle surface: `{colors.surface}` — `#f5f5f5`

### Example Component Prompts

- "Create a full-bleed hero for Byredo: viewport-height atmospheric photography (warm amber tones, black product vessels on wood surface). Centered white SVG wordmark 'BYREDO' in byredoSans / DM Sans, weight 400, letter-spacing 4px, ~380px wide at desktop. No gradient scrim unless text appears over a dark area — if needed, `background: linear-gradient(rgba(0,0,0,0.76) 0%, transparent 172px, transparent 85%, rgba(0,0,0,0.76) 100%)`. Utility nav strip above at 12px uppercase byredoSans, `letter-spacing: 0.6px`, color `{colors.on-primary}` on the dark photograph."

- "Design a Byredo product tile: white background `{colors.background}`, no border, no shadow, no border-radius. Top: 4:5 ratio product image (black glass vessel on white). Below image: product name in 19px DM Sans weight 400 color `{colors.ink}`, line-height 1.3. Volume/variant in 10px DM Sans, `letter-spacing: 0.25px`, color `{colors.ink-muted}`. Price in 14px DM Sans, color `{colors.ink}`. 20px padding on all sides. Hover: background transitions to `{colors.surface}` at 200ms ease."

- "Build a primary CTA button for Byredo: background `{colors.primary}`, color `{colors.on-primary}`, font DM Sans 12px weight 400, `text-transform: uppercase`, `letter-spacing: 0.6px`, padding `14px 32px`, `border-radius: 0`. Label: 'ADD TO CART'. Hover: background shifts to `#1a1a1a`. Width: 100% on mobile, `min-width: 200px` on desktop."

- "Design a secondary outline button for Byredo: background `{colors.background}`, border `1px solid {colors.border-dark}`, color `{colors.ink}`, same typography and padding as primary. Hover: background fills to `{colors.ink}`, color inverts to `{colors.on-primary}`. No border-radius."

- "Create the Byredo navigation bar: white background, zero shadow, zero border. Left: locale selector in 12px uppercase DM Sans, `letter-spacing: 0.6px`. Center: BYREDO wordmark SVG at ~240px. Right: STORES · ACCOUNT · CART in same 12px uppercase treatment. Main nav below the wordmark (centered horizontal row): PERFUME · BODY · HAIR · MAKEUP · HOME · GIFTS · COLLABORATE — all 12px uppercase DM Sans, `letter-spacing: 0.6px`, black, no underline, 8px vertical padding. Hover: color fades to `{colors.ink-muted}`."

- "Build a Byredo form field: white background, `border: 1px solid {colors.border}`, `border-radius: 0`, padding `12px 16px`, font DM Sans 14px color `{colors.ink}`, placeholder color `{colors.ink-muted}`. Label above: 12px uppercase DM Sans, `letter-spacing: 0.6px`, color `{colors.ink}`. Focus: `outline: 1px solid {colors.focus-ring}`, border becomes `{colors.border-dark}`. No glow."

### Iteration Guide

1. Start with the white canvas (`{colors.background}`) and introduce full-bleed photography immediately — the image is the first brand statement, not the logo
2. Apply the wordmark in white DM Sans (byredoSans substitute) at center with generous letter-spacing — never in black, never with a background pill
3. Typography is one typeface at two sizes: 12px uppercase tracked for all interactive chrome (`{typography.button-ui}`, `{typography.nav-link}`), 14–19px for reading and product content (`{typography.body}`, `{typography.heading-sub}`)
4. All interactive elements — buttons, inputs, cards — use `{rounded.none}`. The only exception is the 2px badge; everything else is perfectly rectangular
5. Elevation strategy: no shadows on content layers, a single near-invisible `5px` grey ring for floating panels, and a black scrim over photography only when needed for text contrast
6. Color hierarchy: black for everything active, `{colors.ink-muted}` for everything recessive, white for reversed surfaces and button labels only
7. Section spacing expands generously between blocks (`{spacing.2xl}` minimum, `{spacing.4xl}` for hero transitions) — the whitespace is the luxury signal, not ornamentation

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Byredo. Brand names and trademarks belong to their respective owners.