---
version: alpha
name: "Maison Francis Kurkdjian"
description: "Token-first design system for Maison Francis Kurkdjian — a Parisian haute parfumerie defined by luminous ivory canvases, restrained gold accents, refined serif typography, and couture-caliber negative space."

colors:
  # Surface / canvas
  background: "#faf9f7"  # warm ivory — never clinical white /* estimated */
  surface: "#f4f2ee"     # cream panel — like heavy laid paper /* estimated */
  surface-elevated: "#ffffff"  # pure white for modal overlays /* estimated */

  # Text / ink
  ink: "#1a1714"         # near-black with warm undertone — deep ink /* estimated */
  ink-secondary: "#5c5752"   # warm stone grey for captions and secondary copy /* estimated */
  on-background: "#1a1714"
  on-surface: "#1a1714"

  # Brand accent — gold
  primary: "#b5924a"     # refined gold — never garish, always muted /* estimated */
  on-primary: "#faf9f7"  # ivory text on gold surfaces /* estimated */
  primary-container: "#f0e8d5"  # pale gold tint — hover surfaces, badge fills /* estimated */

  # State / interaction
  text-hover: "#b5924a"  # ink shifts to gold on hover (nav links, anchor text) /* estimated */
  focus-ring: "#b5924a"  # gold focus outline /* estimated */

  # Borders
  border: "#ddd8d0"      # hairline warm grey — almost invisible structure /* estimated */
  border-strong: "#b5924a"  # gold border for selected states and editorial frames /* estimated */

  # Shadow tints
  shadow-soft: "#e8e3db"  # warm ivory shadow base /* estimated */

typography:
  display-hero:
    fontFamily: "IM Fell English, Georgia, 'Times New Roman', serif"  # closest Google Font to MFK's custom transitional serif /* estimated */
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1px
  display:
    fontFamily: "IM Fell English, Georgia, 'Times New Roman', serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "IM Fell English, Georgia, 'Times New Roman', serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "IM Fell English, Georgia, 'Times New Roman', serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.5px
  eyebrow:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 3px
  body-large:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.2px
  body:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.75
    letterSpacing: 0.15px
  nav-link:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  button-ui:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 3px
  caption:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 1px
  price:
    fontFamily: "Cormorant Garamond, Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 32px
  xl: 64px
  2xl: 96px
  3xl: 160px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
    textTransform: uppercase
    letterSpacing: 3px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"
    borderWidth: 1px
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 36px
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    borderWidth: 1px
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 36px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0px
    textTransform: uppercase
    letterSpacing: 2px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-editorial:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 48px
  input:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    borderWidth: 1px
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
  input-focus:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    borderWidth: 1px
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
    textTransform: uppercase
    letterSpacing: 2px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    textTransform: uppercase
    borderBottom: 1px solid {colors.border}
  nav-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
    textTransform: uppercase
---

# Maison Francis Kurkdjian Design System

## Overview

Maison Francis Kurkdjian operates at the absolute apex of Parisian haute parfumerie, and its visual design system is the faithful translation of that position into pixels. The house was founded in 2009 by perfumer Francis Kurkdjian — creator of Jean Paul Gaultier's Le Mâle, Narciso Rodriguez For Her, and dozens of other landmark fragrances — and its brand identity carries all the restraint, confidence, and precision that implies. The canvas is a warm ivory (`{colors.background}`), biased toward the yellow warmth of heavy cotton paper rather than the sterile cool of a gallery wall. Against it, the typographic hierarchy is set in what reads as a refined transitional serif — a letterform family that suggests the craft of an earlier century without tipping into pastiche. This is not nostalgia. This is a house that understands that the most enduring luxury cue is time.

The accent system is built entirely around a single muted gold (`{colors.primary}`). It is never rendered as a gradient, never metallic-textured, never stacked against a dark field for maximum drama. Instead it surfaces as hairline borders on selected states, as the hover transformation of navigation links, and as the occasional tonal fill behind a badge or editor's callout. Its restraint is the point: when gold appears in this system, it reads as a signature — the wax seal on the envelope — not as decoration. Secondary ink is a warm stone (`{colors.ink-secondary}`) for captions and supporting copy, maintaining the sepia warmth of the entire palette and preventing any surface from reading cold.

The spatial language of the site is defined by extreme generosity. Section padding reaches `{spacing.3xl}` at full desktop scale; hero sequences occupy entire viewport heights; product photography floats in fields of ivory that are themselves the design. The typographic scale is unusually restrained at the top — display headings rarely exceed 80px, and even there they carry almost no weight variation or tracking. Every element breathes. The experience of navigating Maison Francis Kurkdjian's digital presence reads less like a homepage and more like the considered silence before the first note of a perfume announces itself.

**Key Characteristics:**
- Warm ivory canvas (`{colors.background}`) with near-black ink (`{colors.ink}`) — warm polarity throughout, never cold or clinical
- Single gold accent (`{colors.primary}`) used as a signature, not decoration — hairlines, hover states, selected borders
- Refined transitional serif for display and editorial copy — calligraphic authority without historical pastiche
- Uppercase letter-spaced small text (`{typography.button-ui}`, `{typography.nav-link}`) as the exclusive UI register — never mixed-case for chrome elements
- Zero border-radius on all interactive elements — `{rounded.none}` for buttons, inputs, cards; sharpness is the brand's spatial handwriting
- Extreme negative space — section padding at `{spacing.3xl}` ensures pages feel like couture, not catalog
- Campaign photography presented without chrome, card lift, or shadow — images rest on the ivory field as objects
- No gradients, no shadows on content surfaces — depth through tone shift (`{colors.background}` to `{colors.surface}`)
- Hairline rules (`{colors.border}`) in place of any structural decoration — the thinnest possible visible line
- Perfume names presented as proper nouns with editorial gravitas — uppercase serif at display scale

## Colors

### Primary
- **Maison Ivory** (`{colors.background}`): The page canvas — a warm ivory white with a faint yellow bias. Reads as heavy laid paper, never as digital white. Applied to all primary page surfaces, the navigation, and inline content zones.
- **Laid Paper** (`{colors.surface}`): A half-step deeper than the canvas, used for editorial section backgrounds, alternating content bands, and panel surfaces. The relationship between these two tones defines the system's only "depth" — no shadows required.

### Brand Accent
- **Maison Gold** (`{colors.primary}`): The house accent. A muted antique gold — not bright, not warm-orange, not metallic. It appears as navigation hover states, border-strong on selected card frames, focus rings, and the rare filled badge. Its restraint is its authority.
- **Pale Gold Tint** (`{colors.primary-container}`): The gold's diluted field — used as badge fills, hover surfaces on ghost buttons, and the softest selection indicator. Barely visible until it needs to be.

### Text States
- **Deep Ink** (`{colors.ink}`): Near-black with a warm undertone, applied to all primary text, headings, and the default button surface. Deliberately not pure `#000000` — the warmth maintains the paper metaphor.
- **Stone Secondary** (`{colors.ink-secondary}`): Warm medium grey for captions, supporting copy, metadata, and placeholder text. Reads as quieter ink, not disabled grey.
- **Gold Hover** (`{colors.text-hover}`): Navigation links and anchor text shift to gold on hover — the only chromatic event in typical text rendering.

### Borders & Dividers
- **Warm Hairline** (`{colors.border}`): The system's invisible structure. A barely-there warm grey used for input borders, section dividers, and card separators. At rest, it registers as texture rather than boundary.
- **Gold Border** (`{colors.border-strong}`): The strong version — a full-saturation gold hairline used on selected states, editorial frame moments, and the secondary button outline.

## Typography

### Font Family
- **Display / Editorial**: `IM Fell English` (closest Google Font to MFK's refined transitional serif), fallbacks `Georgia, 'Times New Roman', serif`. Applied to every display moment — hero titles, section headings, product names at editorial scale. The letterforms carry calligraphic detail: fine hairline strokes, bracketed serifs, slight variation in stroke contrast. This is the brand voice rendered typographically.
- **Body / UI**: `Cormorant Garamond` (a refined Garamond variant with optical elegance), fallbacks `Georgia, serif`. Used for body copy, navigation, buttons, captions, and all UI text. At small sizes with generous letter-spacing, it achieves a quiet authority appropriate for luxury commerce.
- **OpenType Features**: At display sizes, optical sizing and discretionary ligatures enhance the editorial serif. No features are applied to UI text — Cormorant Garamond's default set carries the work.

*Note: MFK's website uses proprietary licensed typefaces. The tokens above declare the closest Google Font equivalents for external implementation. If licensing is available, substitute the brand's actual commissioned serif.*

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Full-viewport hero title — perfume collection names at maximum impact |
| `display` | Section-opener headlines — campaign text, editorial titles |
| `heading-section` | Content section heads — fragrance family names, ingredient stories |
| `heading-sub` | Sub-section headings, product page section breaks |
| `eyebrow` | Uppercase letter-spaced labels above titles — "New Arrival", "Limited Edition", "Exclusive" |
| `body-large` | Lead paragraph and editorial copy — fragrance descriptions and brand narrative |
| `body` | Standard product copy, ingredient lists, FAQ, support text |
| `nav-link` | Top navigation links — uppercase tracked, small size |
| `button-ui` | All button labels and CTA text — uppercase, widely tracked |
| `caption` | Image captions, metadata, legal copy |
| `price` | Product pricing — slightly larger than body for visual anchoring |

### Principles
- **Serif throughout**: Unlike most luxury fragrance brands that split between a display serif and a sans for UI, MFK runs an all-serif system — both display and interface share the same family DNA. The UI distinction is achieved through size, weight (single weight: 400), and letter-spacing alone.
- **Uppercase for chrome, mixed-case for prose**: All navigation links, button labels, eyebrows, and badges are uppercase — typically with `2–3px` letter-spacing. All editorial text (headings, body, product descriptions) is mixed-case. The rule is consistent and legible.
- **Weight discipline**: The entire system runs at a single weight: 400. There is no bold, no medium, no semibold. Hierarchy is achieved through scale, case, and spacing — never through weight escalation.
- **Letter-spacing as a status signal**: Button-ui and eyebrow tokens carry `3px` tracking. Caption carries `1px`. Display headings carry slightly negative tracking (`-0.5px` to `-1px`). This compression-at-large / expansion-at-small convention matches the optical behavior of fine typography.
- **No italic**: The system does not use italic as an emphasis register. When a fragrance name or ingredient needs distinction, scale and the serif's own letterform variation carry it.

## Layout

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

The spacing personality is unusually generous — MFK's layout rhythm is couture, not catalog. The jump from `{spacing.xl}` to `{spacing.2xl}` to `{spacing.3xl}` is large and deliberate: these values create section separation that reads as page chapters rather than stacked components. At `{spacing.3xl}` (160px), a section break conveys the same pause as white space in a luxury print campaign.

### Grid & Container
- Max content width: 1400px for editorial sections, 1200px for product grids
- Navigation: full-width header bar, content centered within max-width container
- Hero: full-viewport-height compositions — centered or asymmetric editorial layouts
- Product grids: 3-column on desktop, 2-column on tablet, 1-column on mobile with generous gutters
- Editorial prose columns: max 700px reading width, centered — never full-width body text

### Whitespace Philosophy
- **Negative space is the design**: Between sections, around photography, inside the navigation — emptiness is not waste, it is the primary aesthetic medium
- **Centered editorial composition**: Hero titles, editorial paragraphs, and single-product features default to centered alignment. Grid content aligns left within its cell.
- **Photography isolation**: Campaign images and product shots are presented without borders, shadows, or card frames. They float on the ivory field as autonomous objects.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default canvas and editorial surfaces — the workhorse state |
| Hairline (Level 1) | `1px solid {colors.border}` | Input borders, section rules, card separators |
| Gold Hairline (Level 2) | `1px solid {colors.border-strong}` | Selected product cards, active input focus, editorial frame accents |
| Surface Shift | Background: `{colors.background}` → `{colors.surface}` | Section alternation — the system's only depth signal |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus indicator — gold ring at 2px offset |

**Shadow Philosophy**: Maison Francis Kurkdjian does not use box-shadow on any content surface. The design system achieves separation through two mechanisms only: hairline borders at near-invisible weight, and surface tone shifts between `{colors.background}` and `{colors.surface}`. Photography needs no lift — the ivory field is its natural stage. UI surfaces need no drama — the gold accent provides all the hierarchy signal required. Shadows belong to another register of luxury, one that implies architectural weight. MFK's register is the perfumer's: invisible precision, felt rather than seen.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All interactive elements — buttons, inputs, cards, modals, image frames |
| `pill` | 9999px | Promotional callout bubbles and loyalty tier indicators only |

The border-radius philosophy is binary and uncompromising. Sharp rectangular forms convey the precision of the atelier. Every button, every input field, every card container meets its neighbour at a clean 90-degree corner. The only exception is the rare circular badge used for promotional callouts — and even there, the circular form references the wax seal rather than any modern softness convention.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button variants

- **`button-primary`** — Near-black surface (`{colors.ink}`), ivory label, uppercase tracked sans-serif, sharp `{rounded.none}` corners, 14px 36px padding. The primary purchase action. Hover transitions to gold (`{colors.primary}`). This button is a stamp.
- **`button-secondary`** — Transparent background with a `{colors.border-strong}` gold hairline outline, uppercase tracked label in `{colors.ink}`. Used for editorial CTAs ("Discover the Collection", "Read More"). Hover shifts outline and text to gold, fills with the pale gold tint.
- **`button-ghost`** — No background, no border. Uppercase caption-weight text in `{colors.ink-secondary}`, used for tertiary actions (filter toggles, "View All" links). Hover reveals gold text. Minimal footprint.

### Cards

Product cards carry zero chrome — no border, no shadow, no background fill at the card level. The product image sits at full width, aspect ratio 3:4 (portrait). Below it: an eyebrow line (fragrance family or format), the product name in `{typography.heading-sub}`, the price in `{typography.price}`. Spacing between these elements is handled by the containing grid's row gap. The card IS the product.

Editorial cards (`card-editorial`) add a `{colors.surface}` background and generous `48px` padding for brand story moments, ingredient callouts, and long-form marketing copy.

### Inputs

Form inputs present with a `1px solid {colors.border}` warm hairline at rest — the border is barely visible against the ivory surface. On focus, the border shifts to `{colors.focus-ring}` gold and a `2px` gold ring wraps the field. No fill change, no background shift, no glow. The focus treatment is economical and distinctive. Labels sit above the field in `{typography.caption}` uppercase with `2px` letter-spacing, maintaining the system's chrome convention.

### Badges / Tags

Badges appear in `{colors.primary-container}` (pale gold) with `{colors.primary}` (gold) text — a subtle tonal combination rather than a high-contrast stamp. Applied to "New Arrival", "Limited Edition", "Exclusive", and "Best Seller" tags. Never used for category taxonomy (those use `{typography.eyebrow}` in plain ink above titles).

### Navigation

The top navigation is a full-width bar on the ivory canvas, with the MFK wordmark centered and the navigation links arranged symmetrically. Links render in `{typography.nav-link}` — uppercase, `2px` letter-spacing, 12px — in `{colors.ink}`. On hover, links transition to `{colors.text-hover}` gold. The active link carries a `1px` gold underline at a `2px` offset. The bar carries a `{colors.border}` bottom hairline. On scroll, the bar becomes opaque ivory (no transparency) and stays pinned.

## Do's and Don'ts

### Do
- Use `{colors.background}` (warm ivory) as the page canvas — pure white reads too clinical for this house
- Reserve `{colors.primary}` gold for hover states, selected borders, focus rings, and rare badge fills — its value is its rarity
- Apply uppercase with `3px` letter-spacing to all button labels, eyebrows, and navigation links (`{typography.button-ui}`, `{typography.nav-link}`)
- Keep `{rounded.none}` on every interactive element — sharpness is the system's spatial handwriting
- Use `{spacing.3xl}` (160px) between major editorial sections — the breathing room IS the luxury cue
- Let product photography float on the ivory field without borders, cards, or lift — the stage is the design
- Use the single weight 400 throughout — hierarchy comes from scale, case, and tracking, never from bold
- Alternate `{colors.background}` and `{colors.surface}` for section depth — these two tones are the entire elevation system
- Maintain `{typography.body}` at a generous `1.75` line-height — MFK copy invites close reading, not skimming

### Don't
- Don't use gradients on any surface, button, or accent element — every fill is flat
- Don't add box-shadow to cards, modals, or product tiles — the system has no shadow register
- Don't introduce mid-range border-radius (4–16px) — the system is binary (`{rounded.none}` or `{rounded.pill}` for the rare exception)
- Don't use more than one chromatic accent — `{colors.primary}` gold is the sole hue in the system
- Don't uppercase editorial prose — mixed-case headings and body are mandatory; uppercase is reserved for chrome only
- Don't add bold or semibold text weights — the system runs at 400 only, across every role
- Don't use italic for emphasis — scale, case, and spacing carry distinction; slant does not exist here
- Don't crowd imagery with card chrome — no border, no shadow, no `border-radius` on product photography
- Don't use `{colors.ink-secondary}` for primary navigation or headlines — stone grey is a support color, not a headline color
- Don't introduce a second accent color — not coral, not navy, not sage. The gold is singular by design.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, minimum typography 15px body, stacked hero |
| Mobile | 375–767px | Single-column, hamburger nav, full-width product tiles |
| Tablet | 768–1023px | 2-column product grid, condensed nav, hero typography scales down |
| Desktop | 1024–1399px | Full horizontal nav, 3-column product grid, editorial sections restored |
| Large Desktop | ≥1400px | Maximum content width locked, most generous spacing tier |

### Touch Targets
- All primary buttons: minimum 48px height via `14px 36px` padding plus `{typography.button-ui}` line-height
- Navigation links: minimum 44px tap zone via generous vertical padding in the nav bar
- Product tiles: entire tile area is tappable — not just the title or image
- Input fields: minimum 48px height with `14px` vertical padding

### Collapsing Strategy
- **Navigation**: Horizontal nav collapses to a hamburger drawer on mobile and tablet. Drawer opens as a full-overlay ivory panel with uppercase stacked nav links in `{typography.heading-sub}`. The MFK wordmark stays centered at the top of the drawer.
- **Hero**: Full-viewport heroes reformat to approximately 70vh on tablet and natural document flow on mobile. Typography scales proportionally but never drops below `{typography.heading-section}` for the smallest hero role.
- **Product grids**: 3-up desktop → 2-up tablet → 1-up mobile. Gutter spacing tightens proportionally while maintaining the uncrowded feel.
- **Spacing**: `{spacing.3xl}` section margins compress to `{spacing.2xl}` on tablet and `{spacing.xl}` on mobile, preserving breathing room at every viewport.
- **Editorial text columns**: Max-width 700px centered column stays centered on tablet; on mobile it becomes full-width with `{spacing.md}` horizontal margin.

### Image Behavior
- Product photography maintains 3:4 portrait aspect ratio across all breakpoints
- Campaign editorial imagery is full-bleed on mobile, max 50vw on desktop for asymmetric hero layouts
- No art direction image swaps — the same photograph serves all viewports, cropped via CSS `object-fit: cover` where needed
- Images never acquire rounded corners at any breakpoint

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — warm ivory page canvas
- Text: `{colors.ink}` — near-black with warm undertone
- Secondary text: `{colors.ink-secondary}` — warm stone grey
- Gold accent: `{colors.primary}` — muted antique gold
- Panel: `{colors.surface}` — laid paper cream
- Border: `{colors.border}` — barely-visible warm hairline
- Gold border: `{colors.border-strong}` — gold hairline for selected/active states
- CTA surface: `{colors.ink}` — primary button background

### Example Component Prompts

- "Build a hero section on `{colors.background}` (ivory). Centered composition: an eyebrow in `{typography.eyebrow}` uppercase (e.g., 'New Collection') in `{colors.ink-secondary}`, then a display title in `{typography.display-hero}` at 80px, then a `{typography.body-large}` paragraph at max 580px wide. Below: a primary button — `{colors.ink}` background, `{colors.background}` text, `{typography.button-ui}` uppercase 11px tracked 3px, `{rounded.none}`, padding 14px 36px. Full-viewport height with `{spacing.3xl}` vertical centering padding."
- "Create a product card on `{colors.background}`. No border, no shadow, no card background. Portrait image 3:4 ratio at top. Below: `{typography.eyebrow}` eyebrow ('Eau de Parfum') in `{colors.ink-secondary}` uppercase tracked 3px, then product name in `{typography.heading-sub}` 22px `{colors.ink}` mixed-case, then price in `{typography.price}` 16px `{colors.ink}`. `{spacing.sm}` gap between each text element. No `border-radius` on image or any element."
- "Design a secondary button: transparent background, `1px solid {colors.border-strong}` border (gold), label in `{typography.button-ui}` uppercase 11px tracked 3px, color `{colors.ink}`, padding 13px 36px, `{rounded.none}`. Hover: `{colors.primary-container}` fill, text and border shift to `{colors.primary}` gold."
- "Build a navigation bar on `{colors.background}`. Full width, `1px solid {colors.border}` bottom hairline. MFK wordmark centered (use heading-sub serif at 18px, tracked 4px, uppercase). Left cluster and right cluster of navigation links in `{typography.nav-link}` 12px uppercase tracked 2px `{colors.ink}`. Hover state: text color `{colors.text-hover}` gold. Fixed position on scroll."
- "Create an editorial section on `{colors.surface}` with `{spacing.3xl}` top and bottom padding. Section heading in `{typography.heading-section}` 32px centered, then `{typography.body-large}` paragraph at 700px max-width centered, line-height 1.7, color `{colors.ink}`. One ghost button below: no background, no border, `{typography.caption}` uppercase 11px tracked 2px `{colors.ink-secondary}`, underline on hover."
- "Design a 'New Arrival' badge: `{colors.primary-container}` background (pale gold), `{colors.primary}` text, `{typography.caption}` 11px uppercase tracked 2px, padding 4px 12px, `{rounded.none}`. Position as an overlay at the top-left corner of a product card image."

### Iteration Guide

1. Start with `{colors.background}` — the entire system is built on warm ivory, not white. Every surface relationship flows from this baseline.
2. Gold (`{colors.primary}`) is earned, not sprinkled. It should appear in hover states, one border, one badge fill. If it appears in more than three places on a screen, something is wrong.
3. All button labels, navigation text, eyebrow copy: uppercase, `{typography.button-ui}` or `{typography.nav-link}`, tracked 2–3px. This rule has no exceptions.
4. Border-radius is `{rounded.none}` everywhere. If you are about to type `border-radius: 4px`, stop.
5. Typography is all weight 400. Hierarchy comes from scale and case. No bold, no medium.
6. Elevation comes from `{colors.surface}` alternation and `{colors.border}` hairlines only. No box-shadow.
7. Let photography breathe — no card frame, no shadow, no rounded crop. Product images are objects on paper, not digital cards.
8. Spacing between major sections: `{spacing.3xl}`. This is non-negotiable — the negative space is the luxury signal.
9. Editorial prose: centered column, max 700px, `{typography.body-large}`, line-height 1.7. Long-form copy earns its real estate here.
10. The system has one accent color. Only one. Do not introduce another.

---

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