---
version: alpha
name: "Net-a-Porter"
description: "A prestige fashion retail system built on a black canvas with white editorial typography — ink-reversed luxury where darkness signals exclusivity and every interaction is as considered as a couture edit."

colors:
  # Surface / canvas
  background: "#000000"             # primary black canvas — the house signature
  surface: "#1a1a1a"                # slightly lifted surface for panels, hover zones
  surface-raised: "#222222"         # card and product tile background /* estimated */

  # Ink / text
  ink: "#ffffff"                    # primary text on black canvas — absolute white
  ink-secondary: "#b0b0b0"          # supporting labels, muted nav items, captions /* estimated */
  ink-ghost: "#666666"              # placeholder text, disabled states, fine print /* estimated */

  # Brand accent — NAP uses white and a warm off-white/gold as editorial accent
  primary: "#ffffff"                # primary CTA on black — white fill or white text
  on-primary: "#000000"             # text on white CTA surface
  accent-gold: "#c9a96e"            # warm gold used in THE EDIT editorial, special callouts /* estimated */

  # Interactive states (all rgba flattened to opaque hex)
  primary-hover: "#e0e0e0"          # was rgba(255,255,255,0.87) — Google format requires hex
  text-hover: "#ffffff"             # link hover on black — maintains white, no new chroma
  surface-hover: "#2a2a2a"          # was rgba(255,255,255,0.06) — hover on surface tiles

  # Semantic
  error: "#d0021b"                  # form validation, out-of-stock indicators
  success: "#2e7d32"                # order confirmation, availability indicator /* estimated */

  # Borders
  border: "#ffffff"                 # 1px structural rules, button outlines — white on black
  border-subtle: "#333333"          # light dividers between sections, resting input underlines

  # Shadow tints
  shadow-soft: "#000000"            # was rgba(0,0,0,0.6) — elevated overlays, modals

typography:
  display-hero:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0.15em
  display:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: 0.12em
  heading-section:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2em
  heading-sub:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.15em
  body-large:
    fontFamily: "Georgia, Times New Roman, Times, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.01em
  body:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.05em
  nav-link:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.2em
  button-ui:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.2em
  caption:
    fontFamily: "Josefin Sans, Futura, Century Gothic, sans-serif"
    fontSize: 10px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.1em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 72px
  3xl: 120px

rounded:
  none: 0px
  pill: 9999px     # search bar and newsletter input — rare but present

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 0.2em
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 0.2em
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  input-focus:
    borderBottom: "1px solid {colors.border}"
    outline: "1px solid {colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 32px
    borderBottom: "1px solid {colors.border-subtle}"

  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 6px
    border: "1px solid {colors.border-subtle}"
    textTransform: uppercase
---

# Net-a-Porter Design System

## Overview

Net-a-Porter invented the concept of luxury fashion retail on the internet by making one defining choice that has remained unchanged for over two decades: the canvas is black. At a moment when digital commerce defaulted to white backgrounds and primary-color CTAs, NAP opened on `{colors.background}` — absolute black — and positioned that darkness as the digital equivalent of stepping into a luxury boutique at night. The white text and white product photography against black create an inversion of conventional e-commerce; the darkness signals curation, scarcity, and the velvet of the brand's iconic packaging. Every page opens like a fashion editorial rather than a shop floor.

The typographic identity is built on a geometric sans-serif tradition — Josefin Sans, a typeface that echoes the 1930s advertising grotesque of trade-gothic lineage — used in light and regular weights with substantial letter-spacing. At `{typography.display-hero}` scale (72px, weight 300, `letter-spacing: 0.15em`), campaign copy spreads across the black canvas with the unhurried confidence of a Vogue cover line. Navigation and interface labels operate at 11px with 0.2em tracking — not quite as extreme as Celine's 0.3em but unmistakably in the luxury-digital register. The headline weight of 300 is deliberate: authority through refinement, not mass.

Color is used with surgical precision. `{colors.ink}` white is the only text and structural color against the black ground; `{colors.accent-gold}` appears in THE EDIT editorial contexts and special callouts — a warm champagne that functions as a chromatic reward, signifying that one has arrived at content rather than commerce. Every CTA is white-on-black or black-on-white: the brand trusts its own palette entirely and introduces no seasonal hue, no trend-responsive accent, no popup color strategy. The palette is a statement of permanent authority.

**Key Characteristics:**
- Absolute black canvas (`{colors.background}`) — the defining NAP signature, the digital equivalent of their iconic black matte packaging
- Reversed-ink layout: `{colors.ink}` white text on `{colors.background}` black — every surface is the inverse of conventional luxury e-commerce
- Josefin Sans at weight 300 for display text — geometric sans with a 1930s elegance, generous letter-spacing at `{typography.display-hero}` scale
- Near-zero border-radius: `{rounded.none}` on all UI elements — sharp corners reinforce the editorial, magazine-layout character
- White-on-black CTAs (`{components.button-primary}`) and black-on-white inverted variant — the system needs no other button palette
- Warm gold accent (`{colors.accent-gold}`) used sparingly in THE EDIT and Porter magazine moments — chromatic reward, not ambient presence
- Full-bleed fashion photography shot against white or seamless backdrops — the white of the image stands against the black page, creating a luminous frame
- `{spacing.3xl}` (120px) vertical section gaps — the same editorial breathing room as high-fashion print
- Shadow-free product surfaces — depth is created by the contrast between `{colors.background}` and photography, not by drop shadows
- Uppercase interface labels throughout (`{typography.nav-link}`, `{typography.button-ui}`) with tracked spacing — 0.2em at every UI role
- Photography-led merchandising: the product image commands the hierarchy; price and brand name arrive below in compressed type
- Two-typeface system: geometric sans (Josefin Sans) for all structural/UI roles; serif (Georgia) for extended editorial reading in THE EDIT

## Colors

### Surface & Canvas
- **NAP Black** (`{colors.background}`): The brand's most recognizable design decision — the sole page background across all views, contexts, and breakpoints. No section alternates to white; the black is invariable.
- **Lifted Surface** (`{colors.surface}`): A slightly elevated dark panel used in hover states, side drawers, and secondary content panels — a near-invisible step from the black canvas.
- **Product Tile** (`{colors.surface-raised}`): A marginally warmer dark tone used for product card backgrounds, distinguishing the tile from the raw page.

### Ink / Text
- **White** (`{colors.ink}`): Primary text — all body copy, product names, prices, navigation links, and headlines. The reversed-ink discipline means white carries every role that black ink performs elsewhere.
- **Silver Secondary** (`{colors.ink-secondary}`): Mid-tone silver for supporting metadata, captions, and muted navigation states on hover or inactive.
- **Ghost** (`{colors.ink-ghost}`): Lowest contrast tier on the black canvas — placeholder text, disabled states, legal fine print.

### Brand Accent
- **White CTA** (`{colors.primary}`): Primary button fill and the system's primary interactive color. White on black is the NAP CTA paradigm.
- **Black on White** (`{colors.on-primary}`): Text on the white primary fill — absolute black, completing the binary reversal.
- **Editorial Gold** (`{colors.accent-gold}`): Warm champagne tone that appears in THE EDIT magazine, Porter branding, and premium callouts. A chromatic reward that marks the step from shop to editorial.

### Text States
- **Hover White** (`{colors.primary-hover}`): On button hover, white softens slightly — the most subtle possible motion on an already-white surface.
- **Text Hover** (`{colors.text-hover}`): Navigation links maintain white on hover — the system does not introduce new chroma for interaction.
- **Surface Hover** (`{colors.surface-hover}`): Tile background lifts fractionally on hover — dark-to-dark, sensed rather than seen.

### Semantic
- **Error Red** (`{colors.error}`): Form validation, out-of-stock states, and alert indicators. The system's only warm-chroma departure outside the editorial gold.

### Borders
- **White Rule** (`{colors.border}`): 1px structural borders for button outlines and focus rings on the black canvas.
- **Subtle Dark** (`{colors.border-subtle}`): Near-invisible dividers for section partitions, resting input underlines, and content rules.

## Typography

### Font Family
- **Primary**: `Josefin Sans`, with fallbacks: `Futura, Century Gothic, sans-serif`. A geometric sans-serif with art-deco roots — all-caps display at weight 300 is the brand's typographic identity. Used for every UI role: navigation, buttons, captions, product copy.
- **Editorial serif**: `Georgia`, with fallbacks: `Times New Roman, Times, serif`. Used in THE EDIT and Porter magazine extended reading — editorial paragraphs where rhythm matters over scan-ability.
- **OpenType Features**: Default; Josefin Sans in light weight with wide tracking carries the entire expressive register without feature-set manipulation.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px / weight 300 — campaign headlines, seasonal openers, full-bleed editorial statements |
| `display` | 40px / weight 300 — secondary feature moments, category page headers |
| `heading-section` | 14px / 0.2em tracking — section labels, filter category headings |
| `heading-sub` | 11px / 0.15em tracking — product brand names, card sub-labels |
| `body-large` | 18px serif — editorial paragraphs in THE EDIT, extended campaign copy |
| `body` | 12px / weight 300 — product descriptions, form labels, utility copy |
| `nav-link` | 11px / uppercase / 0.2em — primary navigation, footer links |
| `button-ui` | 11px / uppercase / 0.2em — all CTA labels, action text |
| `caption` | 10px / weight 300 — size indicators, color swatch labels, legal text |

### Principles
- **Light weight as luxury**: Josefin Sans at 300 weight — never 700, rarely 400. On a black canvas, fine strokes create elegance; bold would read as aggressive.
- **Letter-spacing as editorial pace**: 0.2em on navigation and CTAs, 0.15em on headings, 0.12em on display. Tracking communicates that reading this interface is worth the time.
- **Uppercase throughout the interface**: `{typography.nav-link}`, `{typography.button-ui}`, `{typography.heading-section}` — uppercase is invariable. Body and editorial copy uses sentence case.
- **Serif for reading, geometric sans for interaction**: Georgia handles extended editorial content; Josefin Sans handles everything the user acts upon.
- **Size restraint on the black canvas**: large white text on black is legible at smaller sizes — 11px at weight 300 with 0.2em tracking holds well. Size hierarchy is established by tracking, not scale.

## Layout

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

Net-a-Porter's pages are fashion magazine layouts transposed to a scrolling canvas. Campaign sections breathe at 120px (`{spacing.3xl}`) on desktop — the spacing communicates that each editorial moment deserves its own stage. The product grid maintains measured gutters that echo the negative space of a spread in i-D or Vogue.

### Grid & Container
- Max content width: approximately 1440px, with interior gutters around 32–40px
- Desktop product grid: 4-column at standard desktop, 3-column at mid-range, with a flush-edge feel
- Hero sections: full-bleed photography at full viewport height, campaign text overlaid in `{typography.display-hero}`
- Navigation: slim bar in `{colors.background}` black; NAP logo left or centered; top categories (Clothing, Bags, Shoes, etc.) and utilities (Search, Wishlist, Bag) separated

### Whitespace Philosophy
- Darkness IS the whitespace — the black canvas between elements creates separation without adding color
- Photography-led: fashion images occupy the full viewport at hero level; UI lives at the margins
- No decorative fills or tinted bands — the section rhythm is achieved by vertical space alone

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every product surface — the black canvas creates depth through contrast alone |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting input underlines, section rules on the black ground |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` + `outline: 1px solid {colors.border}` | Input focus state — white rule intensifies |
| Button Outline (Level 1) | `1px solid {colors.border}` | White CTA outline on black canvas |
| Drawer / Modal (Level 3) | Dark overlay with opacity | Cart drawer, filter panels — use `{colors.surface}` as the elevated surface |

**Shadow Philosophy**: Net-a-Porter uses no box-shadows. The black canvas is its own depth — photography glows against the dark ground without needing artificial lift. The contrast between the pure-white studio imagery and `{colors.background}` creates more perceived depth than any drop-shadow system could. Floating drawers use a darker `{colors.surface}` background, not shadow, to distinguish themselves from the page.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All UI elements — buttons, cards, inputs, panels, image frames |
| `pill` | 9999px | Search bar and newsletter email input only — functional affordance, not stylistic |

The system is almost entirely square. Sharp corners on the black canvas reinforce the architectural quality of the brand's visual identity — the same sensibility that produces their matte-black box packaging. The pill radius appears only on a few input contexts as a legibility concession. Every deliberate UI element is a rectangle.

## Components

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

### Button variants
- **`button-primary`** — `{colors.primary}` white fill, `{colors.on-primary}` black text, `{rounded.none}`, 11px Josefin Sans uppercase at 0.2em tracking, `padding: 14px 28px`, `1px solid {colors.border}` outline. Hover softens white slightly via `{colors.primary-hover}`. Used for "Add to Bag", "Proceed to Checkout".
- **`button-secondary`** — `{colors.background}` black fill, `{colors.ink}` white text, identical geometry, `1px solid {colors.border}` border. Hover lifts background to `{colors.surface}`. Used for "Save to Wishlist", "Continue Shopping".

### Cards
- **`card`** — `{colors.surface-raised}` dark fill, `{rounded.none}`, no shadow, no border. Product photography is edge-to-edge; `{typography.heading-sub}` brand name in `{colors.ink-secondary}` and product name + `{typography.body}` price in `{colors.ink}` appear below. Cards present with no chrome — the black tile recedes and the white photography glows.

### Inputs
- **`input`** — `{colors.background}` fill (black), `border-bottom: 1px solid {colors.border-subtle}` only, `{rounded.none}`. 12px Josefin Sans weight 300. Focus: underline intensifies to `1px solid {colors.border}` (white) and adds outline. No background change.

### Badges / Tags
- **`badge`** — Black fill, `{colors.ink-secondary}` silver text, 10px uppercase Josefin Sans, `1px solid {colors.border-subtle}` outline. Used for "NEW SEASON", "EXCLUSIVE", "JUST IN" — typographic labels, no colored chips.

### Navigation
- **`nav-bar`** — `{colors.background}` black, `{colors.ink}` white text, `{typography.nav-link}` (11px uppercase 0.2em tracking). NAP logo in white. `border-bottom: 1px solid {colors.border-subtle}` separates nav from page. Link hover: opacity or subtle color shift — no underline animation, no background highlight.

## Do's and Don'ts

### Do
- Keep `{colors.background}` absolute black as the only canvas — every page context, every breakpoint, no exception
- Use `{colors.ink}` white text on the black canvas; never introduce dark text on a black background
- Apply `{rounded.none}` to every UI element — sharp corners are the system's geometric signature on the dark canvas
- Uppercase all interface labels with `{typography.nav-link}` (0.2em tracking) — the letter-spacing is as important as the weight
- Let fashion photography create the luminous contrast against `{colors.background}` — white-seamless studio shots glow on black without any frame or lift
- Reserve `{colors.accent-gold}` for THE EDIT editorial and premium callouts — it signals a shift from commerce to content
- Use weight 300 for `{typography.display-hero}` and most UI roles — lightness on black signals refinement
- Animate via `opacity` and `color` transitions at `0.2s ease` only — no transforms, no scale lifts

### Don't
- Don't introduce white or light backgrounds in any section — the black canvas is not a toggle, it is the system
- Don't add warm tones, brand reds, or seasonal colors to interactive elements — `{colors.primary}` white is the only CTA color
- Don't use bold weights (700+) for display type — weight 400 maximum on the black canvas; 300 preferred for display
- Don't round button or card corners — `{rounded.none}` is invariable; pill radius is only for search/newsletter inputs
- Don't add box-shadows — the `{colors.background}`-to-photography contrast IS the depth system; shadows add visual noise on a dark ground
- Don't reduce letter-spacing below 0.1em for any uppercase interface label — compressed tracking loses the editorial register
- Don't apply `{colors.accent-gold}` to interactive states or CTAs — it belongs only to editorial and print-adjacent moments
- Don't use Georgia (`{typography.body-large}`) for navigation, buttons, or product labels — serif is for extended reading in editorial mode only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 375px | Single-column; hamburger nav; `{typography.display-hero}` scales to ~32px; bottom utilities |
| Mobile | 375–767px | Single-column product grid; nav collapsed to drawer; spacing compressed ~40% |
| Tablet | 768–1023px | Two-column product grid; nav still collapsed; wider margins; hero type ~48px |
| Desktop | 1024–1439px | Full horizontal nav; 4-column product grid; full section rhythm |
| Large Desktop | ≥ 1440px | Max container ~1440px; full 120px vertical section gaps; 4-column grid maintained |

### Touch Targets
- Primary buttons use 14px vertical padding — effective tap height approximately 44–48px
- Navigation links on mobile render inside a full-screen dark drawer with generous line-height
- Product tiles are fully tappable card regions — tap target is the entire tile, not just text
- Inputs expand to full-width on mobile with minimum 44px effective height

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger drawer on mobile; full-screen black overlay with flat uppercase links in `{typography.nav-link}` weight
- **Type scale**: `{typography.display-hero}` (72px) scales toward 32–36px on mobile; interface labels hold at their small sizes
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; equal gutters maintained proportionally
- **Spacing**: 120px vertical section gaps compress to 60px on mobile while maintaining the editorial pace

### Image Behavior
- Campaign photography is always full-bleed — no max-width cap on hero images
- Product tile images maintain consistent portrait aspect ratio across breakpoints
- Image frames are always `{rounded.none}` — white-seamless studio photography against the black canvas needs no frame
- Light-seamless studio images create natural luminous frames against `{colors.background}` — the white of the product photograph bleeds into the dark page as a glow

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — absolute black
- Primary text: `{colors.ink}` — white
- CTA fill: `{colors.primary}` — white
- CTA text: `{colors.on-primary}` — black
- Secondary text: `{colors.ink-secondary}` — silver
- Section divider: `{colors.border-subtle}`
- Input underline resting: `{colors.border-subtle}`
- Input underline focus: `{colors.border}`
- Editorial accent: `{colors.accent-gold}`

### Example Component Prompts

- "Build a full-bleed campaign hero for Net-a-Porter on `{colors.background}` absolute black. Fill the viewport with a fashion photograph — model on white seamless backdrop, the white glowing against the black page. Position `{typography.display-hero}` (72px Josefin Sans, weight 300, `letter-spacing: 0.15em`, uppercase) campaign headline in `{colors.ink}` white. Navigation floats at top: NAP logo white-left, categories center in `{typography.nav-link}` (11px uppercase 0.2em), utilities right. `border-bottom: 1px solid {colors.border-subtle}` separates nav from hero."

- "Create a primary CTA button for Net-a-Porter: `{colors.primary}` white fill, `{colors.on-primary}` black text, `{typography.button-ui}` (11px Josefin Sans, `text-transform: uppercase`, `letter-spacing: 0.2em`), `border-radius: 0`, `padding: 14px 28px`, `border: 1px solid {colors.border}`. Hover transitions fill to `{colors.primary-hover}` via `0.2s ease` on background-color. No scale, no lift, no shadow."

- "Design a product card for Net-a-Porter on the black canvas: `{colors.surface-raised}` dark tile, `border-radius: 0`, no shadow, no border. Full-width portrait studio photograph at top — white seamless photography glows against the dark surface. Below image: brand name in `{typography.heading-sub}` (11px uppercase 0.15em) in `{colors.ink-secondary}`, product name and price in `{typography.body}` (12px weight 300) in `{colors.ink}` white."

- "Build a desktop navigation bar for Net-a-Porter: `{colors.background}` black, `border-bottom: 1px solid {colors.border-subtle}`. NAP logomark white left-aligned. Primary categories (Clothing, Bags, Shoes, Jewellery, Beauty, Sale) centered in `{typography.nav-link}` (11px Josefin Sans, uppercase, `letter-spacing: 0.2em`, `{colors.ink}` white). Search, Wishlist, Bag as right utilities. Link hover: `{colors.ink-secondary}` via `0.2s ease` on color — no underline, no background change."

- "Create a newsletter subscription row for Net-a-Porter: `{colors.background}` black fill, `border-bottom: 1px solid {colors.border-subtle}` underline-only input, `border-radius: 0`, `{typography.body}` 12px Josefin Sans weight 300, `{colors.ink}` white text, `{colors.ink-ghost}` placeholder ('YOUR EMAIL ADDRESS' in uppercase). Focus: underline updates to `1px solid {colors.border}` (white) with `outline: 1px solid {colors.border}`. Pair with `{components.button-primary}` 'SUBSCRIBE' CTA."

- "Render a Net-a-Porter product grid on `{colors.background}` black: 4-column layout at desktop, `{spacing.md}` gutters. Each tile is a `{components.card}` on `{colors.surface-raised}` — zero chrome, portrait studio image top, brand name in `{typography.heading-sub}` silver and product title + price in `{typography.body}` white below. On hover, product image shifts to 0.85 opacity via `0.2s ease` — no lift, no shadow, no card border change."

### Iteration Guide

1. Start on absolute black (`{colors.background}`) — if any element has a white, cream, or light background, remove it. The black canvas is non-negotiable.
2. Set all text in `{colors.ink}` white. If any dark text appears on a dark surface, check contrast and ensure the background uses `{colors.surface}` or `{colors.surface-raised}` for separation.
3. Set all interface labels in Josefin Sans at weight 300 or 400, uppercase, with minimum 0.15em tracking. If any label is sentence-case in a navigation or button role, convert it.
4. Apply `border-radius: 0` to every element. If any corner is rounded on a button, card, or input (outside search/newsletter), flatten it.
5. Verify no box-shadows exist on product cards or content panels. If present, remove. The photography-on-black contrast is the depth system.
6. Confirm `{colors.accent-gold}` appears only in editorial/THE EDIT contexts. If it appears in navigation, buttons, or product commerce, remove it.
7. Limit motion to `transition: color 0.2s ease, opacity 0.2s ease, background-color 0.2s ease`. Remove transforms, scale, and parallax.
8. Verify section rhythm: desktop vertical gaps between major sections should approach `{spacing.3xl}` (120px). If content feels stacked on the dark canvas, add air — darkness needs space to read as luxury, not absence.

---

## 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 Net-a-Porter. Brand names and trademarks belong to their respective owners.