---
version: alpha
name: "Frédéric Malle"
description: "Ink-white editorial canvas, stamped-red authority, and Inter's quiet precision in service of perfumery as intellectual art"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f8f8f6"
  surface-dark: "#1a1a1a"

  # Text / ink
  ink: "#0a0a0a"
  ink-secondary: "#4a4a4a"
  ink-muted: "#767676"

  # Brand accent — the signature FM red stamp
  primary: "#c8102e"
  on-primary: "#ffffff"
  primary-container: "#fdf0f2" # was rgba(200,16,46,0.05) — Google format requires hex

  # Interaction states — flattened from near-black hover
  text-hover: "#000000"
  focus-ring: "#c8102e"

  # Semantic
  error: "#c8102e"
  success: "#1a6b3c"
  warning: "#b45309"

  # Structure
  border: "#e2e2e0"
  border-strong: "#c8c8c4"
  shadow-soft: "#d4d4d0" # was rgba(0,0,0,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -2px
  display:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: -1.5px
  heading-section:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.25px
  body-large:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  label-uppercase:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.5px
  nav-link:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.75px
  caption:
    fontFamily: "Inter, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.25px

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

rounded:
  none: 0px
  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.ink}"
    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-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav-item:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  nav-item-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Frédéric Malle Design System

## Overview

Frédéric Malle's digital identity is built on a single audacious premise: perfume as published literature. The "publisher of perfume" concept — in which Malle commissions master perfumers the way a literary editor commissions authors — shapes every design decision. The canvas is pure white ({colors.background}), clean as the unprinted page. Text is near-black ({colors.ink}), dense and considered. And cutting through this editorial restraint is one electrifying accent: the FM red ({colors.primary}), a stamped crimson used on the logo rectangle, primary CTAs, and the hovering editorial marks that signal selection and focus. The system is not luxury in the conventional gilt-and-velvet sense — it is luxury as intellectual authority.

The typographic engine is Inter, self-hosted in four weights (Light 300, Regular 400, Medium 500, Bold 700). At display sizes, Inter runs at weight 300 with aggressive negative tracking — letterforms compressed until they feel as deliberate as type-set metal. At reading sizes, tracking loosens, weight lifts to Regular 400, and the spacing system opens to 1.6 line-height — generous, book-like, allowing the perfumer's brief and the editorial copy to breathe. Inter was not chosen because it is neutral; it was chosen because it can carry enormous personality through weight and tracking alone, without recourse to an expressive serif or a decorative face. The system trusts the writing to do what the typeface refuses to perform.

The signature visual element is editorial silence. No gradients, no shadows, no rounded corners — every surface is flat and sharp. Product photography is centered, isolated on white or off-white grounds, the bottle given the same framing a museum gives a painting. Section transitions happen through typographic scale and spacial rhythm, not through visual ornament. The red mark appears rarely enough that when it does appear, it functions as a stamp of authority: this is the publisher's seal.

**Key Characteristics:**
- Pure white canvas ({colors.background}) — the unprinted page, not a screen
- Inter Light 300 at aggressive negative tracking for all display moments — typographic reduction as luxury
- Single chromatic accent: FM red ({colors.primary}) reserved for the logo stamp, primary CTAs, and focus states
- Off-white panel surface ({colors.surface}) for editorial section breaks — barely perceptible tonal shift
- Sharp 0px border-radius everywhere — ({rounded.none}) is the only radius in the system
- Uppercase spaced labels ({typography.label-uppercase}) at 1.5px tracking for navigation categories and scent families
- No box-shadow for depth — flat surfaces, structural borders, and spatial rhythm are the only separation tools
- Product photography on neutral white grounds, centered, isolated — the bottle as fine-art object
- Author bylines for perfumers — each fragrance attributed to its creator, reinforcing the publisher model
- Hairline borders ({colors.border}) at 1px for structure — present but never loud

## Colors

### Primary
- **White Canvas** (`{colors.background}`): The dominant surface. Every product page, every editorial spread opens here — the brand's choice of pure white over ivory or cream places it closer to a gallery wall than a print journal.
- **Near-Black Ink** (`{colors.ink}`): Primary text at maximum authority. Used for headlines, body copy, and navigation — close to pure black but with a fractional warmth that softens long-form reading.

### Brand Accent
- **FM Red** (`{colors.primary}`): The publisher's stamp. This red appears on the logo rectangle, active navigation marks, primary call-to-action buttons, focus rings, and the hover state of ghost links. Its rarity is its authority — Frédéric Malle uses red the way an editor uses a red pen: sparingly, decisively.
- **Red Container** (`{colors.primary-container}`): A near-white blush tint (opaque approximation of `rgba(200,16,46,0.05)`) used behind badges and status chips where the red chromatic family needs to register without the full stamp weight.

### Secondary Text
- **Editorial Grey** (`{colors.ink-secondary}`): Perfumer attribution lines, supporting copy, and metadata. Never competes with the headline but never disappears either.
- **Muted Stone** (`{colors.ink-muted}`): Captions, pricing subtexts, disabled states. The color of pencil on white paper.

### Surface & Structure
- **Off-White Panel** (`{colors.surface}`): An almost-invisible step off white — used for alternating editorial sections and fragrance family panels. The shift is felt more than seen.
- **Dark Canvas** (`{colors.surface-dark}`): Used for inverted editorial moments — a black-surface section carrying white typography, deployed sparingly for maximum contrast drama.
- **Hairline Border** (`{colors.border}`): 1px structural separators between product grids, navigation items, and section breaks. Present and functional, never decorative.
- **Strong Border** (`{colors.border-strong}`): Used for secondary button outlines and emphasized structural rules on darker surfaces.

## Typography

### Font Family
- **Primary**: Inter, self-hosted in weights 300 (Light), 400 (Regular), 500 (Medium), 700 (Bold). Fallbacks: `ui-sans-serif, system-ui, -apple-system, sans-serif`.
- The system uses no secondary typeface. Inter alone carries every moment from the 72px display title to the 11px uppercase label.
- **OpenType Features**: Standard ligatures active. At display sizes, Inter's tight metrics interact with aggressive `letter-spacing: -2px` to create a compressed, architectural letterform register distinctly different from its utilitarian default.

*Note: For external implementations, Inter is freely available from Google Fonts and rsms.me/inter. The self-hosted weights (Light, Regular, Medium, Bold) are the complete system — no other weights are required.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign headlines, fragrance launch titles — Inter 300, 72px, −2px tracking |
| `display` | Section openers, perfumer feature heads — Inter 300, 48px, −1.5px tracking |
| `heading-section` | Category titles, fragrance family headers — Inter 400, 28px, −0.5px tracking |
| `heading-sub` | Product name headings, editorial subheads — Inter 400, 18px |
| `body-large` | Perfumer introductions, editorial long-form — Inter 400, 17px, 1.6 line-height |
| `body` | Product descriptions, navigation dropdowns, standard copy — Inter 400, 15px |
| `label-uppercase` | Category labels, scent family tags, "New," "Exclusive" badges — Inter 500, 11px, 1.5px tracking, uppercase |
| `nav-link` | Primary navigation items — Inter 400, 13px, 0.5px tracking |
| `button-ui` | All button labels — Inter 500, 13px, 0.75px tracking |
| `caption` | Pricing, volume details, ingredient footnotes — Inter 400, 12px |

### Principles
- **Weight as voice**: Light 300 speaks at display scale (the intellectual register), Medium 500 acts at UI scale (buttons, labels), Regular 400 reads everywhere else. Bold 700 appears only for exceptional editorial moments.
- **Tracking as compression**: Display sizes use aggressively negative tracking (−2px, −1.5px) — Inter's letterforms become architectural, reduced to essential geometry. Labels flip to positive tracking (0.75–1.5px) for legibility at 11–13px.
- **No uppercase for running text**: Only {typography.label-uppercase} tokens are uppercased — category markers and badge labels. Navigation and body copy remain sentence case, reinforcing the literary register.
- **Reading rhythm over size**: Line-height of 1.6 for body sizes creates generous inter-line space that rewards close reading. The perfumer's language is precise and dense; the spacing ensures it is never claustrophobic.
- **Inter as chameleon**: At 300/−2px, Inter reads as architectural luxury. At 400/0px/1.6lh, it reads as a fine literary journal. At 500/0.75px, it reads as precise editorial UI. The same typeface, three entirely different voices.

## Layout

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

Frédéric Malle's spacing is editorial: generous at macro scale, precise at micro scale. Section-level vertical rhythm runs at 96–128px. Product grid gutters sit at 40px. Component internal padding rarely exceeds 32px. The white space itself communicates the brand — abundance of negative space signals that what appears in that space has been curated.

### Grid & Container
- Max content width: 1280px centered, with 64px horizontal gutters at full desktop
- Product grid: 3-column on desktop, 2-column on tablet, 1-column on mobile — with 40px gutters, no card borders
- Editorial spreads: single-column centered, max ~720px for reading copy
- Photography sections: full-bleed or centered at 60–70% viewport width with generous surrounding white space

### Whitespace Philosophy
- **Breath is currency**: negative space signals editorial intentionality — every isolated product photograph sits within 80–128px of white above and below
- **Typographic pacing**: section headings carry 64px above them and 32px below before the first content unit
- **No visual noise in the gutter**: grid columns are delineated purely by spacing, never by rules or background tints

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All default surfaces — page canvas, product cards, editorial panels |
| Hairline (Level 1) | `1px solid {colors.border}` | Section dividers, product grid separators, navigation bottom border |
| Strong Rule (Level 2) | `1px solid {colors.border-strong}` | Secondary button outlines, emphasized editorial dividers |
| Tonal Shift (Level 3) | Background changes from `{colors.background}` to `{colors.surface}` | Editorial section alternation — barely perceptible tonal step |
| Dark Inversion (Level 4) | `{colors.surface-dark}` full-width panel | Rare dramatic section reversal — white type on near-black |
| Focus Ring | `2px solid {colors.primary}` | All interactive focus states — the red stamp appears here too |

**Shadow Philosophy**: Frédéric Malle uses no box-shadow. None. This is the publishing-house principle applied to interfaces: words on paper do not cast shadows, and neither do the elements on this page. Depth is expressed through editorial rhythm — the position, scale, and isolation of elements communicates hierarchy, not their z-axis relationship to each other. Product bottles do not hover; they stand.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses two values:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — buttons, inputs, cards, modals, product tiles, navigation items. The entire system. |
| `pill` | 9999px | Reserved for the rarest badge use case, when a category chip needs to differentiate from a primary label |

Frédéric Malle's geometry is rectilinear without exception. The reasoning is the same as Aesop's or Le Labo's but arrived at from a different direction: not apothecary pragmatism, but publishing-house architecture. Books have right angles. Printing presses have right angles. The stamp that appears on every Malle label is a rectangle. Rounded corners would introduce a friendliness that conflicts with the brand's editorial authority.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — FM red ({colors.primary}) background with white text at 14px × 32px padding, sharp corners ({rounded.none}). This is the publisher's seal applied to an action. Use for "Add to bag," "Discover," "Reserve."
- **`button-primary-hover`** — shifts to near-black ({colors.ink}) background — the red cedes authority to definitiveness.
- **`button-secondary`** — white background, strong border ({colors.border-strong}), near-black text. Used for secondary purchase actions and "Learn more" moments where the red stamp would overreach.
- **`button-secondary-hover`** — inverts: near-black fill, white text — decisive on hover.
- **`button-ghost`** — no background, no border, near-black label. In-body editorial links and tertiary navigation actions.
- **`button-ghost-hover`** — label shifts to FM red ({colors.primary}) — a minimal stamp gesture.

### Cards

Product cards have no chrome — no border, no shadow, no background change. The card IS the photograph plus its typography below: fragrance name in {typography.heading-sub}, perfumer attribution in {typography.caption} at {colors.ink-secondary}, volume and price in {typography.caption}. Separation comes from grid spacing alone. When a surface is needed (for featured editorial panels), `{components.card-surface}` provides the off-white backing.

### Inputs

Inputs are sharp rectangles ({rounded.none}) with a hairline {colors.border} at rest. On focus, the border shifts to FM red ({colors.primary}) — the only moment the accent color enters a form. Labels sit above the field in {typography.label-uppercase}: small, spaced, authoritative. Placeholder text at {colors.ink-muted} is precise and instructive, never playful.

### Badges / Tags

Badges carry category context — "New," "Exclusive," "Limited Edition," scent family markers. They render in {typography.label-uppercase} (11px, 1.5px tracking, uppercase, weight 500) against the blush {colors.primary-container} background with {colors.primary} text. The typography does the categorical work; the color echoes the brand stamp without fully deploying it.

### Navigation

The primary navigation is horizontal on desktop, a single row of {typography.nav-link} items — sentence case, 13px Inter Regular. Active and hover states shift the link to FM red ({colors.primary}). Below the wordmark, the navigation sits at full viewport width with 64px side gutters. On scroll, the bar gains a hairline bottom border ({colors.border}) to separate it from content but never adds a shadow. Mobile: hamburger collapses to a full-screen white overlay with vertically stacked navigation links at {typography.heading-sub} scale.

## Do's and Don'ts

### Do
- Use Inter Light 300 with `letter-spacing: -2px` at display sizes — compression is the brand's intellectual register
- Reserve FM red ({colors.primary}) for the logo stamp, primary CTAs, focus rings, and active navigation marks only — its rarity is its authority
- Set all interactive focus states with `2px solid {colors.primary}` — the red appears here too, consistent with the stamp gesture
- Use {typography.label-uppercase} (11px, 1.5px tracking, uppercase) for all scent family and category labels
- Keep border-radius at {rounded.none} throughout — every shape in this system is rectilinear
- Use 1px hairline borders ({colors.border}) as the only structural separation tool — no shadows, no fills
- Apply editorial whitespace generously: 96–128px between major sections, 40px between grid items
- Attribute perfumes to their creators in {typography.caption} at {colors.ink-secondary} — the publisher model requires the author line
- Center product photography with abundant negative space — the bottle as museum object, not e-commerce product

### Don't
- Don't introduce a second typeface — Inter is the entire typographic system; resist the temptation to add an editorial serif even for display moments
- Don't add box-shadow to any element — depth is spatial, never simulated
- Don't use FM red ({colors.primary}) decoratively — every red instance must be the publisher's mark on a specific act (action, selection, error, focus)
- Don't round corners — {rounded.none} is the only radius; introducing even 2px of softness breaks the printing-press geometry
- Don't uppercase body copy or navigation — sentence case is the literary register; caps are reserved for {typography.label-uppercase} badge tokens only
- Don't crop product photography into circles, squares, or non-rectangular crops — bottles are shot full on neutral grounds and shown complete
- Don't use gradients on any surface — the system is flat solid tints, never rendered
- Don't crowd the grid — gutters at 40px minimum are not optional; a product catalog this curated cannot be compressed
- Don't introduce a tertiary accent color — the system is black, white, off-white, and one red; any addition dilutes the publisher's authority

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column product grid, hamburger nav full-screen overlay, display-hero drops to 48px |
| Tablet | 640–1024px | 2-column product grid, navigation condensed to icon + wordmark, section padding reduces to 64px |
| Desktop | 1024–1280px | 3-column product grid, full horizontal navigation, 96px section padding |
| Large Desktop | >1280px | Max 1280px content container, generous 64px+ side gutters preserved |

### Touch Targets
- Primary buttons: minimum 44px height via 14px vertical padding × 2 plus 13px line-height
- Navigation links: 48px touch zone via expanded tap area, even if visual text is 13px
- Product tiles: entire tile (image + typography block) is tappable

### Collapsing Strategy
- **Navigation**: Full horizontal nav collapses to hamburger at <1024px. Mobile overlay is full-screen white ({colors.background}) with links at {typography.heading-sub} scale, stacked vertically, FM red active mark
- **Typography**: display-hero drops from 72px to 48px on mobile; body and caption sizes stay fixed — Malle does not bump reading sizes
- **Grid**: 3-col to 2-col to 1-col, gutters compress from 40px to 24px on mobile
- **Spacing**: section-level 96–128px compresses to 48–64px on mobile, preserving the breathing rhythm at reduced scale
- **Photography**: product images scale proportionally; full-bleed editorial photography maintains `object-fit: cover`

### Image Behavior
- Product photography maintains portrait aspect ratio (3:4 or 4:5) across all breakpoints
- Editorial photography scales as full-bleed with centered subject — `object-position: center center`
- The wordmark never simplifies to an icon — "Frédéric Malle" renders in full at every breakpoint
- High-resolution images served at 2× density; no art-direction switching (single composition per image)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white canvas)
- Primary Text: `{colors.ink}` (near-black)
- Secondary Text: `{colors.ink-secondary}` (editorial grey)
- Brand Accent: `{colors.primary}` (FM red stamp)
- Off-White Panel: `{colors.surface}`
- Hairline: `{colors.border}` at 1px
- Focus Ring: `2px solid {colors.primary}`

### Example Component Prompts

- "Build a Frédéric Malle fragrance product card on `{colors.background}`. No shadow, no border, no border-radius. Top: centered product photograph (portrait 3:4 ratio) on white ground with 24px space below. Middle: fragrance name in Inter 400 18px `{colors.ink}` letter-spacing −0.25px. Below name: perfumer attribution 'by [Name]' in Inter 400 12px `{colors.ink-secondary}`. Bottom: volume + price in Inter 400 12px `{colors.ink-muted}`. Touch target: entire tile."
- "Create a primary CTA button: background `{colors.primary}`, text `{colors.on-primary}`, font Inter 500 13px letter-spacing 0.75px uppercase transform NONE (sentence case), padding 14px 32px, border-radius 0. Hover: background shifts to `{colors.ink}`, text stays white."
- "Design a Frédéric Malle editorial hero on `{colors.background}`. Large centered heading: Inter 300 72px letter-spacing −2px `{colors.ink}`. Below at 32px gap: body paragraph Inter 400 17px line-height 1.6 max-width 640px centered. Below at 40px gap: primary button ({components.button-primary}). No decorative elements. White space above heading: 128px. Section bottom: 128px."
- "Build a fragrance category navigation bar on `{colors.background}`. Height 64px. Items: Inter 400 13px `{colors.ink}` letter-spacing 0.5px, 24px horizontal padding between items. Active/hover state: color shifts to `{colors.primary}`. Border-bottom: `1px solid {colors.border}` at page scroll only. No shadow."
- "Create a form input for an email address: sharp rectangle ({rounded.none}), border `1px solid {colors.border}` at rest, border `1px solid {colors.primary}` on focus (no glow), background `{colors.background}`, text `{colors.ink}` Inter 400 15px, padding 12px 16px. Label above: Inter 500 11px `{colors.ink}` letter-spacing 1.5px text-transform uppercase."
- "Design a scent family badge: background `{colors.primary-container}`, text `{colors.primary}`, font Inter 500 11px letter-spacing 1.5px text-transform uppercase, padding 4px 8px, border-radius 0. Use for 'Woody,' 'Oriental,' 'Floral' category markers."

### Iteration Guide

1. Begin with the white canvas ({colors.background}) — the editorial silence is the first design decision
2. Typography at display scale: Inter 300, aggressive negative tracking (−2px). Reduce weight and tracking together as text scale decreases toward body
3. FM red ({colors.primary}) appears last — reserve it for the one action the page needs the user to take, and for focus states
4. Replace shadow instincts with spatial rhythm — increase vertical spacing before adding any visual separation
5. Uppercase only appears in badge labels and category chips ({typography.label-uppercase}) — all other text is sentence case
6. Product photography needs 80px+ surrounding white space — isolation is the luxury signal
7. Every interactive border-radius is 0 — resist adding softness as the layout develops
8. Perfumer attribution is mandatory on every fragrance tile — it is not optional metadata, it is the publisher's contract

---

## 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 Frédéric Malle. Brand names and trademarks belong to their respective owners.