---
version: alpha
name: "Maison Margiela"
description: "A deconstructionist atelier system grounded in near-black canvas, two bespoke typefaces (Margiela Serif and Margiela Sans), and a deliberate rawness that turns anti-fashion into a visual language as precise as any luxury house."

colors:
  # Surface / canvas — dark atelier ground
  background: "#121212"          # primary near-black canvas (rgb 18, 18, 18)
  surface: "#1a1a1a"             # slightly lifted surface for modals and card fills
  surface-light: "#f7f7f2"       # warm off-white — used for inverted (light) sections and modal chrome
  surface-invert: "#ffffff"      # absolute white for cookie modal, form fields

  # Ink / text
  ink: "#f7f7f2"                 # primary text on dark ground — warm off-white, not pure
  ink-secondary: "#484847"       # muted text on light surfaces (rgb 72, 72, 71)
  ink-ghost: "#767674"           # was rgb(118, 118, 116) — placeholders, disabled, fine print
  on-light: "#121212"            # primary text on light/inverted sections

  # Brand accent — Margiela has no chromatic hue; contrast is the entire strategy
  primary: "#121212"             # dark-ground CTA fill
  on-primary: "#f7f7f2"          # off-white text on dark CTA
  primary-light: "#1a1a1a"       # dark CTA on inverted/light panels — near-black

  # Interactive
  primary-hover: "#161616"       # button hover deepens further from near-black
  text-hover: "#000000"          # was rgb(0,0,0) — link hover on light surfaces deepens to absolute black

  # Borders
  border: "#1a1a1a"              # structural border on dark surfaces — rgb(26, 26, 26)
  border-subtle: "#e0e0e0"       # was rgba(224, 224, 224, 0.5) — light hairline on dark — Google format requires hex
  border-dark: "#1a1a1a"         # was rgba(26, 26, 26, 0.14) — divider on dark contexts — Google format requires hex

  # Shadow tints
  shadow-soft: "#000000"         # was rgba(0, 0, 0, 0.2) — floating layer shadow — Google format requires hex
  focus-ring: "#3278c0"          # was rgba(18, 18, 18, 0.06) 0px 0px 0px 4px — focus ring tint — Google format requires hex

typography:
  display-hero:
    fontFamily: "Margiela Serif, Georgia, Times, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.10
    letterSpacing: -0.05px
  display:
    fontFamily: "Margiela Serif, Georgia, Times, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -0.05px
  heading-section:
    fontFamily: "Margiela Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 2px
  heading-sub:
    fontFamily: "Margiela Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.21
    letterSpacing: 1px
  body-large:
    fontFamily: "Margiela Serif, Georgia, Times, serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: -0.05px
  body:
    fontFamily: "Margiela Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Margiela Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 1px
  button-ui:
    fontFamily: "Margiela Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 1px
  caption:
    fontFamily: "Margiela Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 1px
  mono:
    fontFamily: "Margiela Mono, Courier New, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px

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

rounded:
  none: 0px
  md: 12px          # dialog and modal containers only
  pill: 9999px      # radio buttons and pill inputs

components:
  button-primary:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.on-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 19px
    border: "2px solid transparent"
    textTransform: uppercase
    letterSpacing: 1px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-light}"
    border: "2px solid transparent"

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 26px
    border: "2px solid transparent"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface-invert}"
    textColor: "{colors.on-light}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 16px
    border: "1px solid {colors.border-subtle}"
  input-focus:
    border: "2px solid {colors.on-light}"
    boxShadow: "0px 0px 0px 4px {colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 0px

  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 0px 16px
    textTransform: uppercase

  dialog:
    backgroundColor: "{colors.surface-invert}"
    textColor: "{colors.on-light}"
    rounded: "{rounded.md}"
    padding: 32px
---

# Maison Margiela Design System

## Overview

Maison Margiela's digital presence is structured around the same deconstruction that defines the house's clothing: you see the seams, the labels on the outside, the raw construction before the couture finish. The canvas is near-black (`{colors.background}` at `#121212`) — not a fashion cliché of dark luxury, but the specific near-black of an atelier after hours, of a white coat worn in a studio with inadequate lighting. Against this ground, fashion photography is presented at high contrast, and the house wordmark sits centered in the navigation in exactly the kind of plain register that only works when every detail is deliberate.

The dual typeface system is the technical signature. Margiela Serif (self-hosted, fallbacks to Georgia and Times) carries editorial weight — product descriptions, campaign copy, the long-form prose of a brand that publishes as much as it sells. Margiela Sans (self-hosted in Regular, Medium, Text, SemiBold, and Bold) handles navigation, UI labels, and structural elements. The two faces are used without hierarchy theatrics: serif for reading, sans for interface, with the same 400-weight regularity. Where Jacquemus deploys extreme tracking as personality, Margiela uses sparse 1px letter-spacing on uppercase labels and near-zero spacing on running text — the difference between a shout and a stencil.

The system's most distinctive behavior is the inverted zone. The main canvas is dark (`{colors.background}`), but key transactional and editorial moments — cookie modals, product panels, form fields — flip to the warm off-white `{colors.surface-light}` (`#f7f7f2`). These inversions are not decorative; they signal "you are now in an interface context, not a campaign context." The focus ring (`{colors.focus-ring}`) is a calibrated blue — borrowed from a browser default, kept because it is accessible against both grounds, and never styled away to satisfy aesthetics. This is a brand that deconstructs pretension, including the pretension of custom focus states.

**Key Characteristics:**
- Near-black canvas (`{colors.background}` `#121212`) — Margiela's atelier dark, not fashion-cliché black-site
- Warm off-white `{colors.surface-light}` (`#f7f7f2`) for inverted/transactional zones — tinted, never pure white
- Two bespoke self-hosted typefaces: **Margiela Serif** (editorial reading) and **Margiela Sans** (UI and labels)
- A third face, **Margiela Mono**, present in the font stack — suggests code-adjacent or label-printing contexts
- Uppercase sans labels at `{typography.button-ui}` (15px, weight 700, 1px tracking) — stencil-quality authority
- Serif at 20px with a -0.05px tight optical kern (`{typography.body-large}`) — press-set precision, not web default
- Zero border-radius on all UI elements except dialogs (`{rounded.md}` 12px) and pill inputs — almost entirely square
- Shadows used sparingly: `rgba(0,0,0,0.2)` floating layer for overlays, transparent `0px 0px 0px 4px` as the resting focus slot
- Transitions at 0.3s ease-out on buttons, 0.6s `cubic-bezier(0.16, 1, 0.3, 1)` on link transforms — measured, never rushed
- The 0–23 numerical grid of the original garment labels has no direct digital counterpart; the absence is the statement
- Navigation: full horizontal bar with categories left, MAISON MARGIELA centered, utilities (Search, Account, Wishlist, Bag) right
- No chromatic accent — contrast alone (dark ground / light text, light ground / dark text) carries every interactive moment

## Colors

### Surface & Canvas
- **Atelier Dark** (`{colors.background}`): The primary canvas. `#121212` — 18, 18, 18 in RGB, close enough to black to read as black in photography context but warm enough to avoid the glossy-website aesthetic. Used beneath all campaign imagery and running navigation.
- **Deep Surface** (`{colors.surface}`): A slightly lifted `#1a1a1a` for card fills, drawers, and overlays that need to separate from the main canvas without leaving the dark system.
- **Warm Off-White** (`{colors.surface-light}`): `#f7f7f2` — the house's light-surface color. Used in inverted editorial sections, modal chrome, and anywhere a transactional context demands legibility reversal. Neither neutral gray nor pure white.
- **Absolute White** (`{colors.surface-invert}`): Form fields and cookie modal inset panels. The only pure white in the system — reserved for input contexts where maximum contrast on a value is needed.

### Ink / Text
- **Atelier Off-White** (`{colors.ink}`): `#f7f7f2` — primary text on the dark canvas. Warmer than pure white; warmer than neutral; reads as the light inside the atelier.
- **Secondary Ink** (`{colors.ink-secondary}`): `#484847` — muted text on light surfaces, sub-navigation, captions in inverted sections.
- **Ghost Ink** (`{colors.ink-ghost}`): `#767674` — placeholder text, disabled states, fine legal print.
- **On-Light Text** (`{colors.on-light}`): `#121212` — near-black ink for text on `{colors.surface-light}` and `{colors.surface-invert}` backgrounds.

### Accent
- **Dark CTA Fill** (`{colors.primary}`): `#121212` — in inverted-zone contexts, the CTA inverts to near-black on an off-white surface. No chromatic hue exists in the palette.
- **CTA Text** (`{colors.on-primary}`): `{colors.ink}` off-white on dark CTAs.

### Borders
- **Structural Dark** (`{colors.border}`): `#1a1a1a` — border on dark surfaces, barely visible, more texture than division.
- **Light Hairline** (`{colors.border-subtle}`): `#e0e0e0` — was `rgba(224, 224, 224, 0.5)` — rendered on dark or semi-dark backgrounds, this is the lightest structural line.

### Shadow & Focus
- **Shadow Soft** (`{colors.shadow-soft}`): Flattened from `rgba(0,0,0,0.2)` — used for modal and overlay drop shadows at 10px blur.
- **Focus Ring** (`{colors.focus-ring}`): `#3278c0` — browser-native blue, kept deliberately unrestyled. Appears as a 4px ring on all interactive elements.

## Typography

### Font Family
- **Primary Serif**: `Margiela Serif`, with fallbacks: `Georgia, Times, serif`. Self-hosted as `MargielaSerif-Regular.woff2` and `.woff`. Used for editorial body, campaign copy, and display-level text — reads like press-set type.
- **Primary Sans**: `Margiela Sans`, with fallbacks: `Helvetica Neue, Arial, sans-serif`. Self-hosted in five weights: Regular, Medium, Text (a lighter Text optical variant), SemiBold, and Bold. Handles all UI labels, navigation, captions, and button text.
- **Monospace**: `Margiela Mono`, with fallbacks: `Courier New, monospace`. Self-hosted as `MargielaMono-Regular.woff2`. Present in the site's font stack — potentially used for label-printing, care instructions, or garment code contexts consistent with the house's archival numbering tradition.
- **OpenType Features**: Margiela Sans carries `"liga" 0` on mid-weight link styles — ligatures explicitly disabled to preserve the stencil-like word spacing. No stylistic alternates tracked in the extracted CSS.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 60px Margiela Serif — campaign openers, collection title frames |
| `display` | 40px Margiela Serif — secondary editorial headers, lookbook section titles |
| `heading-section` | 20px Margiela Sans, 1px spacing — structural section headings, panel headers |
| `heading-sub` | 15px Margiela Sans Bold uppercase, 1px spacing — subheadings, list group labels |
| `body-large` | 20px Margiela Serif — product description prose, editorial running copy |
| `body` | 14px Margiela Sans — secondary descriptions, form labels, utility text |
| `nav-link` | 14px Margiela Sans, 1px tracking — desktop navigation, footer links |
| `button-ui` | 15px Margiela Sans Bold uppercase, 1px tracking — CTA labels, action labels |
| `caption` | 11px Margiela Sans Bold uppercase, 1px tracking — product flag labels, small metadata |
| `mono` | 13px Margiela Mono — label printing contexts, garment numbering, code-adjacent content |

### Principles
- **Serif for content, sans for interface**: Margiela Serif carries all reading contexts; Margiela Sans handles all functional UI. The distinction is functional, not decorative.
- **Sparse tracking on uppercase only**: 1px letter-spacing applied to all uppercase sans elements — a stencil register, not fashion-magazine wide-spacing.
- **No tracking inflation on running text**: Serif body and sans body both run at 0px or near-zero letter-spacing. Density is intentional — Margiela reads like a printed garment label, not a display ad.
- **Weight as role signal**: Regular (400) for reading, Bold (700) for UI labels and action text. Medium (475/500) appears at mid-level utility labels. SemiBold as transition weight.
- **Optical precision in serif**: The -0.05px optical kern on Margiela Serif at body scale is a micro-correction for screen rendering — consistent with a house that treats print craft as a reference point.

## Layout

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

Margiela's pages use an 8px-grid-aligned spacing system, but the dense navigation and compressed product data at 14px create a more stacked, information-rich rhythm than a Jacquemus or The Row. Campaign sections breathe; product category pages are efficient. The `{spacing.3xl}` (64px) gap marks major section boundaries; within sections, 8–16px increments govern component-level breathing.

### Grid & Container
- Max content width: 1440–1920px responsive, with breakpoints at every 100–200px increment from 389px through 1920px (14 defined breakpoints total)
- Desktop: center-weighted layout, navigation full-horizontal; product grids multi-column with clean equal gutters
- Campaign sections: full-bleed photography edge-to-edge, type overlaid or adjacent, never competing with the image
- Navigation: centered MAISON MARGIELA wordmark; left nav (Women, Men, Boys, Menswear) and right utilities (Search, Account, Wishlist, Bag)

### Whitespace Philosophy
- The dark canvas absorbs dead space — what would read as airy on white reads as immersive on `{colors.background}`
- Campaign photography fills the frame; UI floats at the perimeter
- Inverted zones (the warm off-white `{colors.surface-light}`) create rhythm by contrast, not by extra spacing

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All product content and editorial surfaces |
| Resting Focus Slot | `box-shadow: rgba(0,0,0,0) 0px 0px 0px 4px` | Default state of all buttons — transparent 4px ring pre-allocated |
| Overlay (Level 2) | `box-shadow: rgba(0,0,0,0.2) 0px 10px 24px 0px` | Floating panels, drawers, modals above the dark canvas |
| Dialog (Level 3) | White surface on dark: `{colors.surface-invert}` on `{colors.background}` | Cookie consent modal, product panels in light mode |
| Focus Active | `box-shadow: rgba(18,18,18,0.06) 0px 0px 0px 4px` — blue ring via `{colors.focus-ring}` | Active keyboard focus state |

**Shadow Philosophy**: The dark canvas means shadows are nearly invisible unless the floating element is significantly lighter. The system front-loads shadows via the resting transparent 4px ring so focus activation never causes layout shift. Modal panels flip to `{colors.surface-light}` ground precisely because a dark dialog on a dark page would lose depth cues entirely — the elevation is expressed through inversion, not shadow value.

## Shapes

The complete radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs (except pill), navigation panels, image frames — all primary UI |
| `md` | 12px | Dialog containers (`dialog` element) — the only designed rounded container in the system |
| `pill` | 9999px | Radio button states, search inputs, circular AI chat button |

Margiela's shape language is nearly square — as radical as Jacquemus in that respect, though the dark canvas makes sharp corners feel less graphic and more architectural. The 12px dialog radius is the system's single intentional rounding: it softens the modal's appearance against the dark ground, making the white panel read as a physical object (a card, a label, a garment hang tag) rather than a raw geometric crop.

## Components

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

### Button Variants
- **`button-primary`** — `{colors.surface-light}` (warm off-white) fill, `{colors.on-light}` near-black text, `{typography.button-ui}` (15px Margiela Sans Bold, uppercase, 1px tracking), `{rounded.none}`, `padding: 0px 19px`, transparent 2px border. Hover darkens fill. Used on dark-canvas pages where the CTA must invert to remain readable.
- **`button-secondary`** — Transparent fill, `{colors.ink}` off-white text, same typography and geometry. Used for secondary actions in dark contexts — "Continue without accepting", ghost-style actions.

### Cards
- **`card`** — Near-black `{colors.surface}` fill, no border, no shadow, `{rounded.none}`. Product photography edge-to-edge; Margiela Serif product name below. Cards are presentation frames, not chrome containers.

### Inputs
- **`input`** — White `{colors.surface-invert}` fill, `{colors.on-light}` near-black text, 14px Margiela Sans, `border-radius: 0`, `padding: 0px 16px`, `1px solid {colors.border-subtle}` outline. Focus: `2px solid {colors.on-light}` border plus `{colors.focus-ring}` 4px outer ring. The white field against the dark canvas is deliberately jarring — it signals "this is data entry, not editorial."

### Dialogs
- **`dialog`** — White `{colors.surface-invert}` or warm off-white `{colors.surface-light}` panel, `{rounded.md}` (12px), `padding: 32px`. Sits above the dark canvas as a physical object — hang-tag white against atelier black.

### Badges / Labels
- **`badge`** — Transparent fill, uppercase `{typography.caption}` (11px Margiela Sans Bold, 1px tracking), `{colors.ink}` text. Used for navigation menu items rendered as non-interactive labels — stencil quality, no chip background.

### Navigation
- **`nav-bar`** — `{colors.background}` fill, `{colors.ink}` off-white text, `{typography.nav-link}` (14px Margiela Sans, 1px tracking). MAISON MARGIELA wordmark centered in SVG. Link hover triggers a 0.3s ease-out transition; transform-based link animations at 0.6s via `cubic-bezier(0.16, 1, 0.3, 1)`.

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#121212`) as the persistent dark canvas — this is an atelier, not a showroom
- Deploy Margiela Serif for all editorial reading (product copy, campaign prose, collection descriptions)
- Use Margiela Sans Bold uppercase at 1px tracking for every CTA and structural label — the stencil is non-negotiable
- Invert to `{colors.surface-light}` (`#f7f7f2`) for transactional contexts (forms, modals, panels) — never fight the dark canvas with a dark dialog
- Keep all product card borders and button outlines at `{rounded.none}` — squareness is architecture here
- Reserve `{rounded.md}` (12px) exclusively for dialog containers — the only softened shape in the system
- Allow the pre-allocated transparent 4px focus ring to persist in resting state — it prevents layout shift on keyboard focus
- Use Margiela Mono for any code, label-printing, size chart, or garment-numbering context — the house's numbering tradition has a dedicated face

### Don't
- Don't introduce a chromatic brand accent — the entire palette is achromatic; contrast does every accent job
- Don't use pure black (`#000000`) as the canvas — `{colors.background}` (`#121212`) is warmer and distinctively Margiela
- Don't put a dark dialog on the dark canvas — depth comes from inversion, not shadow depth
- Don't use wide positive tracking (0.1em+) on running text — that is a different brand's voice; Margiela's is sparse
- Don't round buttons or product cards — only dialogs carry `{rounded.md}` by design intent
- Don't use `{colors.ink-ghost}` for interactive text — `#767674` is reserved for placeholders and disabled fine print
- Don't animate at speeds above 0.6s or below 0.3s — the 0.3s ease-out (buttons) and 0.6s cubic-bezier (link transforms) bracket defines the motion range
- Don't strip the focus ring blue (`{colors.focus-ring}`) — accessibility on dark backgrounds requires the browser-native ring, not a custom dark treatment

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | < 389px | Single-column; hamburger nav; hero type ~32px; stacked utility links |
| Mobile | 389–640px | Single-column; nav collapsed; typography scale reduces |
| Tablet Small | 640–767px | Two-column product grid begins; nav still collapsed |
| Tablet | 768–1023px | Nav may appear; wider grid gutters; editorial sections expand |
| Desktop | 1024–1199px | Full horizontal nav; 3-column product grid; Margiela Serif display at full scale |
| Desktop Wide | 1200–1439px | 4-column grid; max editorial measure applied; section gaps full |
| Large Desktop | 1440–1920px | Max container expands; hero photography fills wider viewport; 3xl spacing active |

### Touch Targets
- CTA buttons use at minimum 19px horizontal padding — rendered height from font-size plus padding meets 44px minimum
- Navigation links on mobile have sufficient vertical tap zones; full-width tappable regions for hamburger menu items
- Product tiles are fully tappable card regions
- Dialog controls (Accept All, Preferences) rendered at readable 14px minimum with adequate padding

### Collapsing Strategy
- **Navigation**: full horizontal MAISON MARGIELA centered bar → hamburger icon on mobile; panel slides in with flat `{typography.nav-link}` links, dark background maintained
- **Type scale**: display-hero scales from 60px toward 32–36px on mobile; Margiela Serif body holds at 18–20px; button-ui stays at 15px
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; gutters proportional
- **Spacing**: `{spacing.3xl}` (64px) major gaps compress to 32–40px on mobile; dark canvas continuity maintained across breakpoints

### Image Behavior
- Campaign photography is always full-bleed — no max-width cap on hero images; the dark frame extends to viewport edges
- Product tile images maintain portrait aspect ratio across breakpoints
- Image frames are always `{rounded.none}` — photography never clips to a rounded container
- The near-black canvas backgrounds allow images with dark edges to bleed seamlessly — the image and the page share the same dark ground

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark canvas): `{colors.background}` — `#121212`
- Primary text (on dark): `{colors.ink}` — `#f7f7f2` warm off-white
- Inverted zone background: `{colors.surface-light}` — `#f7f7f2`
- Text on inverted zone: `{colors.on-light}` — `#121212`
- CTA fill (on light): `{colors.primary}` (near-black)
- CTA text (on light): `{colors.on-primary}` (off-white)
- Structural border: `{colors.border}` — `#1a1a1a`
- Light hairline on dark: `{colors.border-subtle}` — `#e0e0e0`
- Focus ring: `{colors.focus-ring}` — `#3278c0`

### Example Component Prompts

- "Build a full-bleed campaign hero on `{colors.background}` (`#121212`). Let fashion photography fill the viewport; the dark canvas bleeds into the image's dark edges. Position the MAISON MARGIELA wordmark centered at the top in `{typography.nav-link}` (14px Margiela Sans, `letter-spacing: 1px`) in `{colors.ink}` (`#f7f7f2`). No overlay tint on the image — the photograph and the canvas share the same dark ground."

- "Create a primary CTA button for a light-zone panel: `{colors.surface-light}` fill (`#f7f7f2`), `{colors.on-light}` near-black text, `{typography.button-ui}` (15px Margiela Sans Bold, `text-transform: uppercase`, `letter-spacing: 1px`), `border-radius: 0`, `padding: 0px 19px`, `border: 2px solid transparent`. Hover darkens the fill slightly. Pre-allocate a `box-shadow: rgba(0,0,0,0) 0px 0px 0px 4px` at rest so focus ring activation (`{colors.focus-ring}`) doesn't shift layout."

- "Design a product card on the dark canvas: `{colors.surface}` (`#1a1a1a`) fill, `border-radius: 0`, no shadow, no border. Full portrait product image edge-to-edge at top. Below: `{typography.body-large}` (20px Margiela Serif) product name in `{colors.ink}`, then `{typography.body}` (14px Margiela Sans) price. No card chrome — the dark surface is the frame."

- "Build a cookie consent modal (dialog): white `{colors.surface-invert}` panel, `{rounded.md}` (12px), `padding: 32px`. Position centered above the dark `{colors.background}` canvas with `box-shadow: rgba(0,0,0,0.2) 0px 10px 24px 0px` to separate from the dark ground. Inside: `{typography.heading-section}` (20px Margiela Sans, uppercase, 1px tracking) for the heading in `{colors.on-light}`. Primary button: `{colors.on-light}` fill with `{colors.surface-invert}` text. Secondary: outline style."

- "Create a text input for a light-zone form: white `{colors.surface-invert}` fill, `{colors.on-light}` near-black text, `{typography.body}` (14px Margiela Sans), `border-radius: 0`, `padding: 0px 16px`, `border: 1px solid {colors.border-subtle}`. Focus state: `border: 2px solid {colors.on-light}` plus outer `box-shadow: rgba(18,18,18,0.06) 0px 0px 0px 4px` in `{colors.focus-ring}` blue. The white field against any surrounding dark surface signals input context without any additional affordance."

- "Construct a desktop navigation bar: `{colors.background}` fill, MAISON MARGIELA SVG wordmark centered in `{colors.ink}`. Left links (Women, Men, Boys, Menswear) and right utilities (Search, Account, Wishlist, Bag) in `{typography.nav-link}` (14px Margiela Sans, 1px tracking, `{colors.ink}`). Hover: `0.3s ease-out` transition on text or `0.6s cubic-bezier(0.16, 1, 0.3, 1)` on transform-based link animations. No underline grow (Margiela vs. Jacquemus); the transition is on opacity or color."

### Iteration Guide

1. Start with the dark canvas: `{colors.background}` (`#121212`) everywhere — not pure black, not `#000`. If any section has a white or tinted background, it must be an intentional inverted zone (`{colors.surface-light}`) or a dialog.
2. Set editorial text in Margiela Serif, UI labels in Margiela Sans. If both typefaces are absent, use `Georgia` and `Helvetica Neue` respectively as fallbacks — but never mix them casually; the distinction between reading and interface must be preserved.
3. Apply `letter-spacing: 1px` to all uppercase Margiela Sans labels. Never widen this further for effect — 1px is the stencil calibration.
4. Keep all border-radius at `{rounded.none}` except dialogs (`{rounded.md}` 12px). If a component is rounded and it is not a dialog, modal, or radio button, flatten it.
5. For inverted zones (forms, modals, product panels on light ground): flip to `{colors.surface-light}` background and `{colors.on-light}` text. CTAs invert to near-black fill. Maintain this inversion — do not mix dark-canvas tokens on light zones.
6. Pre-allocate the transparent focus ring (`box-shadow: rgba(0,0,0,0) 0px 0px 0px 4px`) on every interactive element so `{colors.focus-ring}` activation causes no layout shift.
7. Motion: buttons at `0.3s ease-out`, link transforms at `0.6s cubic-bezier(0.16, 1, 0.3, 1)`, nav height at `0.5s` same cubic-bezier. Never faster than 0.3s, never slower than 0.6s.
8. There is no brand color. The sole chromatic element in the system is `{colors.focus-ring}` blue — it is an accessibility marker, not a brand choice. If you added a hue, remove it.

---

## 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 Maison Margiela. Brand names and trademarks belong to their respective owners.