---
version: alpha
name: "Marni"
description: "Italian eccentric luxury operating on a black-and-white axis, where Futura PT's geometric geometry and generously pill-radused buttons carry the brand's playful-intellectual character against an almost ostentatiously clean canvas."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f4f4f4"           # light input and section fill — rgb(244,244,244)
  surface-warm: "#ebedf0"      # off-white warm tint used in subtle gradient panels

  # Ink / text
  ink: "#000000"               # primary text, nav links, headlines — pure black
  ink-muted: "#7d7d7d"         # secondary labels, captions, placeholder text — rgb(125,125,125)
  ink-subtle: "#b4b4b4"        # tertiary — accordion inactive labels, muted secondary text
  ink-ghost: "#cccccc"         # disabled state, fine print

  # Accent — Marni CTA is black; no chromatic brand accent on the commerce layer
  primary: "#000000"           # CTA fill, maximum-contrast button
  on-primary: "#ffffff"        # text on black CTA
  primary-hover: "#363638"     # hover softens from pure black — rgb(54,54,56)

  # Interactive / focus
  focus-ring: "#0040dd"        # was rgb(0,64,221) — a11y focus outline; royal blue /* estimated */
  focus-ring-light: "#007aff"  # swiper navigation blue accent — rgb(0,122,255) /* estimated */

  # Borders
  border: "#000000"            # 1px hairline on buttons, section dividers
  border-input: "#cccccc"      # was rgb(204,204,204) — form input border
  border-subtle: "#e5e5e5"     # was rgb(229,229,229) — modal and panel top-rules

  # Shadow
  shadow-soft: "#000000"       # was rgba(0,0,0,0.24) — light drop shadow; Google format requires hex

typography:
  display-hero:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.3px
  display:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0.16px
  heading-section:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.17
    letterSpacing: 0.36px
  heading-sub:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.09px
  body-large:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.3px
  body:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.24px
  nav-link:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.21px
  button-ui:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 2px
  label-uppercase:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.57
    letterSpacing: 0.3px
  caption:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.83
    letterSpacing: 0.3px
  caption-bold:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px
  fine-print:
    fontFamily: "futura-pt, Futura, Century Gothic, Trebuchet MS, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0.3px

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

rounded:
  none: 0px
  xs: 2px        # form inputs — minimal radius
  pill: 9999px   # primary CTA buttons — the dominant shape character
  circle: 90px   # icon buttons and circular UI elements

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 44px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  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.pill}"
    padding: 13px 44px
    border: "1px solid {colors.border}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
    border: "none"
  button-ghost-hover:
    textColor: "{colors.ink-muted}"

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

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 12px 16px
    border: "1px solid {colors.border-input}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"
    outline: "3px solid {colors.focus-ring}"

  input-search:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 46px
    border: "none"
  input-search-focus:
    backgroundColor: "{colors.surface}"
    outline: "3px solid {colors.focus-ring}"

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

  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 0px
---

# Marni Design System

## Overview

Marni's digital presence holds an interesting tension: the house is internationally known for riot of color — geometric patchwork, clashing prints, the kind of artful audacity that turns heads on a runway — yet the website resolves to a near-total black-and-white discipline. The canvas (`{colors.background}`) is pure white and stays white through every commerce section; the ink (`{colors.ink}`) is pure black. There is no chromatic brand accent on the commerce layer. What communicates "Marni" instead is the typography and shape: **Futura PT**, set by Adobe Fonts, runs at weight 400 throughout with generous positive tracking that gives product names and category labels a composed, quiet confidence — and then a pill-shaped CTA (`{rounded.pill}`) appears, generously padded and decidedly un-square, importing a sensibility of softness and play into an otherwise architecturally strict grid.

The typographic palette is, in one sense, a single face: Futura PT carries every role from the 38px hero headline to the 11px fine-print disclaimer. But within that constraint, Marni uses a full dynamic range — at 38px the geometric letters have warmth and openness; at 14px with `letter-spacing: 2px` and uppercase on a CTA, they read as fashion-edit precise; at 12px in a caption they become almost clinical. The breadth of one typeface doing this much is the system's typographic feat. Notably, a trace of Nunito Sans surfaces in a third-party accessibility widget — a non-native import, not a brand choice.

The signature shape move is the **pill button**. While most luxury fashion houses in this space default to sharp corners or minor radii, Marni rounds its primary CTAs to a full pill (`{rounded.pill}`) — a soft oval that sits unexpectedly on the otherwise rectilinear grid. It is the digital cousin of the house's love for organic, biomorphic form: an architectural choice that winks at the runway without importing garish color into the commerce experience.

**Key Characteristics:**
- White canvas (`{colors.background}`) throughout — no seasonal palette swaps, no hero tints, no dark sections
- Single typeface, **Futura PT** (Adobe Fonts), across every typographic role without exception
- Generous positive tracking on `{typography.button-ui}` (`letter-spacing: 2px`) — the type's primary personality mechanism
- **Pill-shaped CTAs** (`{rounded.pill}`) as the dominant shape signature — soft ovals in a rectilinear grid, the system's most distinctive chrome choice
- No chromatic brand accent in the commerce layer; `{colors.primary}` (black) fills every CTA
- Secondary ink tier at `{colors.ink-muted}` for captions, placeholder text, and muted navigation states
- Pill-radused search field (`{rounded.pill}`) echoes the CTA shape language in the header
- Hairline borders (`{colors.border}`) on buttons and `{colors.border-input}` on form inputs — structural, not decorative
- Transitional motion across most UI elements at `0.5s linear` — slower and more deliberate than peers
- Full-bleed editorial photography with zero card chrome; product images as the primary visual material
- 15 breakpoints in the CSS — an unusually granular responsive system for a luxury site

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The unconditional page canvas. Every product tile, navigation bar, and editorial section rests on white — there is no dark mode, no tinted hero band, no seasonal palette applied to the structure.
- **Light Fill** (`{colors.surface}`): A near-white field (`#f4f4f4`) used for the pill-search input and subtle section differentiation — present only in form contexts.
- **Warm Surface** (`{colors.surface-warm}`): A soft off-white gradient end-point (`#ebedf0`) that appears in panel-level background gradients, barely distinguishable from white.

### Ink / Text
- **Pure Black** (`{colors.ink}`): The only primary text color. Applied to navigation links, product names, prices, headlines, and all body copy. No warmer near-black; Marni uses true zero-luminance black.
- **Mid Grey** (`{colors.ink-muted}`): Secondary text — placeholders, captions, accordion inactive labels, sub-navigation items, and the hover destination for ghost links.
- **Subtle Grey** (`{colors.ink-subtle}`): The accordion-label inactive tier — a slightly lighter grey for interface elements in a reduced-attention state.
- **Ghost** (`{colors.ink-ghost}`): Disabled and fine-print tier — the lowest ink level in the hierarchy.

### Brand Accent
- **Primary CTA** (`{colors.primary}`): Black, unconditionally. Marni applies no chromatic brand color to commerce CTAs on the current site. Black closes the sale; the pill shape carries the personality.

### Focus & Accessibility
- **Focus Ring** (`{colors.focus-ring}`): A royal blue (`#0040dd`) outline applied to focused interactive elements via the accessibility layer — present for keyboard navigation but not a brand-visible color in standard browsing.
- **Navigation Blue** (`{colors.focus-ring-light}`): A brighter sky blue (`#007aff`) on carousel navigation controls — an inherited system default, not a curated brand accent.

### Borders
- **Black Hairline** (`{colors.border}`): 1px solid border on CTAs and structural dividers, including the bottom-border underline on underlined nav links.
- **Input Border** (`{colors.border-input}`): A medium grey (`#cccccc`) on form input fields — softer than the CTA border, signals "editable zone" without aggression.
- **Subtle Rule** (`{colors.border-subtle}`): A near-white grey (`#e5e5e5`) for modal top-rules, panel separators, and secondary grid dividers.

## Typography

### Font Family
- **Primary**: `futura-pt`, served via Adobe Fonts (Typekit). Fallback stack: `Futura, Century Gothic, Trebuchet MS, sans-serif`. Active across every type role — display, body, button, caption, nav. Multiple weights deployed: Book (400) for all reading roles, Medium (500) for button labels and selected captions.
- **Third-party accent**: `Nunito Sans` appears in one accessibility widget (weight 400, 12px) — a third-party import not part of the Marni brand system; treat as infrastructure noise.
- **OpenType Features**: Default ligatures. No stylistic alternates. No variable font axis. Tracking handled entirely via `letter-spacing` declarations at each type level.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 38px — campaign hero titles, full-bleed editorial openers |
| `display` | 32px — secondary feature section headings |
| `heading-section` | 24px — category page titles, modal headings |
| `heading-sub` | 18px — editorial sub-headings, filter panel titles |
| `body-large` | 18px / 0.3px tracking — product descriptions, long editorial paragraphs |
| `body` | 16px — product card text, accordion body, inline labels |
| `nav-link` | 14px / 0.21px tracking — top-level navigation links, footer category links |
| `button-ui` | 14px / weight 500 / uppercase / 2px tracking — CTA labels, form submit buttons |
| `label-uppercase` | 14px / 0.3px — product category taxonomy, benefit bar labels |
| `caption` | 12px / 0.3px — color swatch labels, fine-grain product detail |
| `caption-bold` | 12px / weight 500 / 0.5px — price labels, strong secondary identifiers |
| `fine-print` | 11px / 0.3px — legal footnotes, micro-disclosures |

### Principles
- **Single-face austerity**: Futura PT alone across twelve type roles — no contrasting serif, no display-only face, no supplementary grotesque.
- **Tracking as taxonomy**: the letter-spacing escalation from `0.09px` (heading-sub) to `2px` (button-ui) maps precisely to the hierarchy — the wider the tracking, the more "action" the element signals.
- **Uppercase for commerce action only**: `text-transform: uppercase` is reserved for CTA labels and select product taxonomy — never applied to editorial headings or body copy.
- **Weight restraint**: only two weights in deployment — Book (400) for all reading contexts, Medium (500) for button labels and price callouts. No bold weights, no light weights.
- **Geometric without coldness**: Futura PT's round letterforms — the circular `O`, the near-circle `C` — echo the pill-shaped buttons, creating formal coherence between type and component shapes.

## Layout

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

Marni layouts are spacious without being maximally editorial. Product grids breathe with consistent gutters; benefit-bar text has ample horizontal padding; section transitions use generous vertical air. The system is not as extreme in its whitespace as Jacquemus, but it sits well above the density of a typical fashion multi-brand retailer — the space signals object attention, not object abundance.

### Grid & Container
- Max content width: approximately 1440px, content constrained to ~1300px
- Desktop product grid: typically 3-4 columns with consistent equal gutters
- Hero sections: full-bleed editorial photography; campaign type is white on image or black on white
- Navigation: horizontal top bar with the Marni wordmark left-aligned; utility icons (search, account, bag) right-aligned; category links in a centered secondary row
- Benefit bar: a sticky announcement strip above the main nav with benefit messages in `{typography.label-uppercase}`

### Whitespace Philosophy
- Generous vertical section gaps — the page reads at editorial pace rather than catalog density
- Product images are given clear airspace below with caption text set in a small, quiet type
- Navigation items sit within a compressed but not crowded header zone; sub-navigation expands as an overlay panel, not an inline expansion

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product tiles, editorial sections, navigation background |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Section separators, nav bar bottom edge |
| Input (Level 1) | `border: 1px solid {colors.border-input}` | Form fields in default state |
| Button (Level 1) | `border: 1px solid {colors.border}` | CTA outlines — even filled black buttons carry a matching border |
| Drop Shadow (Level 2) | `box-shadow: 0 1px 2px {colors.shadow-soft}` | Modals and overlaid panels — light, nearly imperceptible lift |
| Focus (Level 3) | `outline: 3px solid {colors.focus-ring}` | Keyboard focus indicator — royal blue ring on interactive elements |

**Shadow Philosophy**: Marni is architecturally flat at the product and navigation level. The drop shadow — a 1px/2px blur at near-zero alpha — exists only on modal panels. No product tile lifts on hover. No button casts a shadow. The pill shape is doing the three-dimensional work that other brands assign to elevation.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, product tiles, image frames, modal bodies, section containers |
| `xs` | 2px | Standard text inputs and form fields — minimum softness |
| `pill` | 9999px | All primary and secondary CTA buttons — the dominant brand radius |
| `circle` | 90px | Icon buttons, carousel control circles, circular UI elements |

The system is effectively binary: flat for content containers and editorial frames, full-pill for interactive commerce controls. This binary is unusual in contemporary luxury fashion — most peers default to near-zero radius throughout. Marni's choice to round its buttons all the way to pill while keeping product tiles entirely square creates a legible visual grammar: "if it is oval, you can press it; if it is rectangular, you are looking at it."

## Components

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

### Buttons
- **`button-primary`** — Pure `{colors.primary}` (black) fill, `{colors.on-primary}` white text, 14px Futura PT Medium at uppercase `letter-spacing: 2px`, `{rounded.pill}`, `padding: 13px 44px`, `1px solid {colors.border}`. Hover softens fill to `{colors.primary-hover}`. The system's primary CTA — "Add to bag", "Shop now", "Checkout".
- **`button-secondary`** — `{colors.background}` white fill, `{colors.ink}` black text, same pill geometry and border. Hover fills to `{colors.surface}`. Used for secondary actions — "Save to wishlist", "View size guide".
- **`button-ghost`** — Transparent, `{colors.ink}` text, no border, no radius. Text links in editorial and navigation contexts; hover fades to `{colors.ink-muted}`.

### Cards
- **`card`** — Flat white surface, no border, no shadow, `{rounded.none}`. Product photography runs edge-to-edge; the caption row below holds product name and price in a tight, quiet type stack. Cards are viewing frames, not containers.

### Inputs
- **`input`** — White fill, `1px solid {colors.border-input}` all-around border, `{rounded.xs}` (2px) corners, `16px` Futura PT body. Focus state drops a `3px solid {colors.focus-ring}` outline — the royal blue focus ring is the most visually assertive moment in the system.
- **`input-search`** — `{colors.surface}` (light grey) fill, `{rounded.pill}` — the search bar echoes the CTA shape language, creating family resemblance between the site's two primary interactive shapes.

### Navigation
- **`nav-bar`** — White background, `{colors.ink}` text, `{typography.nav-link}` (14px Futura PT, `0.21px` tracking). Hover transitions text to `{colors.ink-muted}` at `0.5s linear`. The transition is notably slow compared to peers — deliberate, unhurried. Sub-navigation expands as a full-width overlay with category columns and editorial imagery.

### Badges / Labels
- **`badge`** — No fill, `{typography.caption}` in `{colors.ink-muted}`. Product flags ("NEW", "SALE", "LIMITED") are typographic-only markers — no chip background, no border, no color fill beyond the type itself.

## Do's and Don'ts

### Do
- Use `{colors.background}` pure white as the unconditional canvas — no tinted hero bands, no seasonal color applied to navigation or section fills
- Round all CTA buttons to `{rounded.pill}` — the oval is Marni's primary shape signature in the digital layer; do not introduce intermediate radii
- Apply `letter-spacing: 2px` uppercase on all button labels via `{typography.button-ui}` — the wide tracking is non-negotiable for CTA authority
- Set Futura PT as the sole typeface across every role — if a second face appears, it is a third-party intrusion, not a brand choice
- Keep product tiles at `{rounded.none}` — the binary of pill controls and flat containers is the system's legibility grammar
- Allow full-bleed photography to carry visual weight; chrome recedes to hairlines and pill buttons
- Respect the `0.5s linear` transition speed — interactions are deliberate and unhurried, not snappy

### Don't
- Don't introduce a chromatic brand accent into the commerce layer — `{colors.primary}` (black) is the only CTA color regardless of the season or campaign palette
- Don't apply intermediate border-radius (4–20px) to CTAs — the system is binary (`{rounded.none}` for containers, `{rounded.pill}` for buttons)
- Don't use `{colors.focus-ring}` (royal blue) as a brand accent color — it is an accessibility layer, not a curated palette choice
- Don't add card shadows, hover-lift effects, or background tints to product tiles — the system is architecturally flat at the product level
- Don't reduce `letter-spacing` below `0.21px` on nav links or below `2px` on button labels — tracking is the voice
- Don't animate at durations shorter than `0.3s` — Marni's transitions are intentionally slow; fast interactions read as off-brand
- Don't uppercase editorial headings or body copy — uppercase is reserved for CTAs and taxonomy labels only
- Don't import a second typeface for display or editorial use — Futura PT at scale handles every display moment the brand requires

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | < 375px | Single-column grid; all type scales down; full-screen nav overlay |
| Mobile | 375–599px | Single-column product grid; hamburger nav; pill CTAs full-width |
| Tablet S | 600–767px | Two-column product grid; nav condensed |
| Tablet | 768–991px | Two-column grid; secondary nav appears |
| Desktop S | 992–1199px | Full horizontal nav; 3-column product grid |
| Desktop | 1200–1439px | Full horizontal nav; 4-column product grid; hero type at full scale |
| Large | ≥ 1440px | Max container at ~1440px; grid maintains column structure; hero type can exceed 38px |

### Touch Targets
- Pill CTA buttons with `padding: 13px 44px` produce approximately 40–44px touch targets on mobile — at the minimum comfortable threshold
- Search pill in the header spans full available width on mobile for easy tap reach
- Product tiles are fully tappable card regions, not just the title link
- Accordion controls in size/filter panels have generous tap padding

### Collapsing Strategy
- **Navigation**: full horizontal menu with category overlay → hamburger drawer on mobile; slide-in panel with category list at large text; benefit bar collapses to a single-message ticker
- **Type scale**: display hero scales from 38px to approximately 24–28px on mobile; body type holds at 14px minimum; button-ui uppercase tracking is preserved at all breakpoints
- **Product grids**: 4-column desktop → 2-column tablet → 1 or 2-column mobile depending on category density
- **Pill buttons**: become full-width on mobile, maintaining the pill radius at both ends — they expand to fill the container rather than shrinking

### Image Behavior
- Campaign photography is full-bleed at all breakpoints — no max-width cap on hero images
- Product tile images maintain consistent portrait aspect ratios across grid breakpoints
- Image frames are always `{rounded.none}` — photography never clips to a rounded container
- Lazy loading defers off-screen images; aspect ratios are height-reserved to prevent layout shift

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: Pure black (`{colors.ink}`)
- Secondary text: Mid grey (`{colors.ink-muted}`)
- CTA fill: Pure black (`{colors.primary}`)
- CTA text: White (`{colors.on-primary}`)
- Input border: Medium grey (`{colors.border-input}`)
- Hairline dividers: Black (`{colors.border}`)
- Focus ring: Royal blue (`{colors.focus-ring}`)

### Example Component Prompts

- "Create a primary CTA button in Marni's system: `background-color: {colors.primary}` (pure black), `color: {colors.on-primary}` (white), 14px Futura PT weight 500, `text-transform: uppercase`, `letter-spacing: 2px`, `border-radius: 9999px`, `padding: 13px 44px`, `border: 1px solid {colors.border}`. Hover: transition `background-color` to `{colors.primary-hover}` at `0.5s linear` — no shadow, no scale, no outline change."

- "Design a product card in Marni's style: `background: {colors.background}` white, `border-radius: 0`, no shadow, no border. Product photography fills the card top edge-to-edge at a consistent portrait ratio. Below: 16px Futura PT product name in `{colors.ink}` at `letter-spacing: 0.24px`, then price in `{colors.ink-muted}` at same size. Caption row has minimal vertical padding — 8px top, 0 horizontal. On hover: no card lift; only the image may have a subtle scale at `0.5s ease`."

- "Build a Marni navigation bar: `background: {colors.background}`, wordmark left-aligned in `{colors.ink}`. Category links in 14px Futura PT, `letter-spacing: 0.21px`, `color: {colors.ink}`. Hover: transition `color` to `{colors.ink-muted}` at `0.5s linear`. Below the main bar, a benefit announcement strip in `{typography.label-uppercase}` at 14px with `letter-spacing: 0.3px`. Border-bottom: `1px solid {colors.border-subtle}`."

- "Create a Marni search input: `background-color: {colors.surface}` (light grey), `border-radius: 9999px`, `padding: 12px 46px`, no border in default state, 16px Futura PT, `color: {colors.ink-muted}` for placeholder. On focus: `outline: 3px solid {colors.focus-ring}` (royal blue) — the pill shape is preserved at all states."

- "Build a hero editorial section: full-bleed white (`{colors.background}`) canvas. Hero image fills top of section. Below: 38px Futura PT headline in `{colors.ink}` at `letter-spacing: 0.3px`, then an 18px subhead, then a pill CTA — `background: {colors.primary}`, `color: {colors.on-primary}`, `border-radius: 9999px`, `padding: 13px 44px`, uppercase Futura PT Medium at `letter-spacing: 2px`. The CTA sits as a contained element, not full-width, centered below the text."

- "Generate a product badge: `color: {colors.ink-muted}`, 12px Futura PT, `letter-spacing: 0.3px`, no background fill, no border, `padding: 2px 0`. Badge text is in mixed case (not uppercase) for product descriptors — uppercase is reserved for CTAs."

### Iteration Guide

1. Start on pure white (`{colors.background}`) — no tinted section bands, no dark theme. If any element has a non-white background (aside from a product image or the black CTA), remove it.
2. Set every type element in Futura PT. If a second typeface appears, replace it. One face throughout all twelve roles.
3. Apply `border-radius: 9999px` to all interactive buttons and the search field. Apply `border-radius: 0` to all cards, image frames, and section containers. There is no middle value.
4. Set CTA labels to uppercase Futura PT Medium at `letter-spacing: 2px`. If a CTA label lacks this tracking, add it.
5. Replace all hover effects with a simple `color` or `background-color` transition at `0.5s linear`. Marni's interactions are slow and deliberate — do not accelerate them.
6. Remove all card shadows and hover lifts. Product tiles are flat. Only modal panels carry a drop shadow.
7. There is no brand accent color. If you have introduced a hue beyond `{colors.focus-ring}` (which belongs to accessibility only), replace it with `{colors.ink}` or `{colors.primary}`.
8. Check that the pill radius is intact on mobile: buttons should expand to fill available width while keeping the full `border-radius: 9999px` on both ends.

---

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