---
version: alpha
name: "Mytheresa"
description: "A Munich-born luxury e-commerce system where a warm white canvas meets an unexpected yellow accent — Avenir's geometric precision at editorial scale anchors a refined, unfussy approach to high-fashion retail."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f9f9f9"             # faint off-white for alternate-section fills /* estimated */
  surface-elevated: "#ffffff"    # pure white for cart drawer and modal panels

  # Ink / text
  ink: "#000000"                 # primary text, logotype, structural elements — absolute black
  ink-secondary: "#666666"       # supporting copy, metadata, subcategory labels /* estimated */
  ink-ghost: "#999999"           # placeholder text, disabled states, fine print

  # Brand accent — Mytheresa's signature warm yellow
  primary: "#ffd200"             # signature Mytheresa yellow — CTA highlight, sale banners, brand moments /* estimated */
  on-primary: "#000000"          # black text on yellow surface
  primary-container: "#fff5b0"   # pale yellow tint for selected states and subtle highlight fills /* estimated */

  # Interactive states (flattened to opaque hex)
  primary-hover: "#e6bd00"       # yellow darkens on hover — was rgba — Google format requires hex /* estimated */
  text-hover: "#000000"          # link hover deepens to absolute black

  # Semantic
  error: "#cc0000"               # form validation, price reduction alerts /* estimated */
  success: "#2e7d32"             # order confirmation, availability badge /* estimated */

  # Borders
  border: "#000000"              # structural rules, primary button outlines
  border-subtle: "#dfdfdf"       # was rgb(223,223,223) from live extraction — hairline input borders, dividers

  # Shadow tints
  shadow-soft: "#cccccc"         # was rgba(0,0,0,0.15) — cart drawer, modal overlays — Google format requires hex /* estimated */

typography:
  display-hero:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.5px
  display:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.3px
  heading-section:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.2px
  heading-sub:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.1px
  body-large:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.28px
  button-ui:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.28px
  caption:
    fontFamily: "AvenirNextLTPro-Medium, Avenir Next, Avenir, Montserrat, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 25px
  xl: 30px
  2xl: 48px
  3xl: 75px

rounded:
  none: 0px
  sm: 2px            # functional controls — close buttons, toggles /* estimated */
  pill: 9999px       # promotional tags, availability chips /* estimated */

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 25px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 1.28px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    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: 12px 25px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 1.28px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 25px
    textTransform: uppercase
    letterSpacing: 1.28px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

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

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

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

  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 8px
    textTransform: uppercase

  badge-neutral:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 8px
    textTransform: uppercase
---

# Mytheresa Design System

## Overview

Mytheresa is the rare luxury e-commerce platform that uses color as a genuine brand argument. Where most high-fashion retailers confine themselves to a black-and-white achromatic register, Mytheresa's signature warm yellow (`{colors.primary}`) appears as a deliberate interruption — on sale banners, in promotional badges, in hover states that shift a black CTA to a flash of gold. The canvas itself is absolute white (`{colors.background}`), immaculate and conventional; it is the yellow that marks Mytheresa as Munich rather than Paris, commercial confidence rather than couture austerity. The effect is precise: luxury with a pulse.

The typographic system is built almost entirely on Avenir Next LT Pro Medium — a geometric humanist sans that walks the line between the rational and the approachable. Where Celine opts for grotesque austerity and The Row for humanist warmth, Mytheresa chooses Avenir's modular precision: consistent stroke widths, geometric circular forms, a mild optical friendliness that never tips into softness. Navigation and button labels run at 14px with 1.28px tracking and uppercase transform, creating the same spaced formality as other luxury interfaces but with the underlying warmth of Avenir's curves rather than Helvetica's rigidity. At 44px with 0.5px tracking for campaign headlines, the weight carries editorial authority without the severity of purely geometric display faces.

The layout and component vocabulary is direct and unfussy. Inputs have a full visible border rather than the underline-only approach favored by European fashion houses — a concession to e-commerce utility over editorial minimalism. Buttons are sharp-cornered (`{rounded.none}`), uppercase-labeled, and transition their fill from black to `{colors.primary}` on hover — a mechanism that introduces brand color precisely at the moment of interaction. The yellow appears in that hover moment, in "SALE" badges, and in editorial campaign banners: never in body copy, never in structural chrome, always in moments that reward attention.

**Key Characteristics:**
- Absolute white canvas (`{colors.background}`) — no tinted sections, no warm ivory deviation
- Single typeface, **AvenirNextLTPro-Medium** (`{typography.display-hero}`), across every typographic role
- Signature warm yellow (`{colors.primary}`) — the system's defining accent, reserved for CTAs on hover, sale indicators, and brand emphasis moments
- Near-zero border-radius (`{rounded.none}` on all primary UI elements) — sharp geometry throughout
- Uppercase navigation and button labels at 1.28px tracking — the formal register of high-fashion e-commerce
- Full-box input borders at `1px solid {colors.border-subtle}` — pragmatic e-commerce utility over editorial underline convention
- Black primary CTA (`{colors.ink}`) transitions to yellow (`{colors.primary}`) on hover — color as reward for engagement
- `{spacing.lg}` (25px) as the dominant mid-range unit — a slightly wide base that gives the interface breathing room without the editorial extremes of European fashion sites
- `{typography.body}` at 15px with 0.5px tracking — legibility optimized for product descriptions at shopping scale
- `fadein` animation (0.5s ease) on page elements — subtle, unhurried, not disruptive
- Yellow `{components.badge}` for sale and promotional tags — consistent application of the brand accent in its most functional role

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The sole page canvas. No deviation, no tinting, no dark-mode presence.
- **Near-White Surface** (`{colors.surface}`): A barely-perceptible step used in alternate section fills and ghost-button hover states.

### Ink / Text
- **Mytheresa Black** (`{colors.ink}`): Absolute black — all primary text, the MYTHERESA wordmark, structural rules, and primary CTA fills.
- **Secondary Ink** (`{colors.ink-secondary}`): Mid-gray for supporting product metadata, subcategory navigation, and captions.
- **Ghost Ink** (`{colors.ink-ghost}`): Lowest tier — placeholder text in form inputs, disabled states, fine print. Extracted from live `#999999` value.

### Brand Accent
- **Mytheresa Yellow** (`{colors.primary}`): The house's chromatic signature. Appears on sale/promotional badges, CTA hover states, campaign banners, and brand emphasis moments. A warm, saturated yellow — assertive enough to read at small sizes in a badge, rich enough to hold against black.
- **Black on Yellow** (`{colors.on-primary}`): The invariable text color on any `{colors.primary}` yellow surface.
- **Pale Yellow Container** (`{colors.primary-container}`): Diluted yellow tint for selected filter states and soft accent fills where full yellow would overpower.

### Text States
- **Hover Darkening** (`{colors.text-hover}`): Navigation link hover resolves to absolute black — a deepening, not a chromatic shift.
- **CTA Hover Yellow** (`{colors.primary-hover}`): Button hover transitions the fill from black to a slightly deepened yellow. The yellow itself is the hover signal.

### Semantic
- **Sale / Error Red** (`{colors.error}`): Form validation, error conditions, and sale price indicators — the system's secondary departure from the achromatic range.
- **Availability Green** (`{colors.success}`): In-stock confirmations, order status — contained to transactional moments.

### Borders
- **Structural Black** (`{colors.border}`): 1px rules on button outlines, focused input borders, and structural dividers.
- **Input Border** (`{colors.border-subtle}`): Extracted at `rgb(223, 223, 223)` from live extraction. Hairline border on resting input states and secondary content rules.

## Typography

### Font Family
- **Primary**: `AvenirNextLTPro-Medium`, with fallbacks: `Avenir Next, Avenir, Montserrat, sans-serif`. The brand's single typographic system — a licensed professional weight of Avenir Next used from the wordmark down to legal captions.
- **Monospace**: None — the system has no code or technical content requiring a monospace face.
- **OpenType Features**: Default in all roles. Character differentiation comes from tracking and case transform, not feature-set manipulation.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 44px — campaign headline, seasonal editorial opener; 0.5px tracking |
| `display` | 32px — secondary editorial moments, category page headings |
| `heading-section` | 20px — main section titles, category filters, editorial subheadings |
| `heading-sub` | 16px — product card names, sub-navigation groups |
| `body-large` | 16px — editorial paragraphs, brand description copy |
| `body` | 15px / 0.5px tracking — product descriptions, form labels, running copy |
| `nav-link` | 14px / uppercase / 1.28px tracking — primary navigation, footer link lists |
| `button-ui` | 14px / uppercase / 1.28px tracking — CTA labels, action text |
| `caption` | 12px — size selectors, badge text, legal fine print |

### Principles
- **Single-face system**: Avenir Next LT Pro Medium covers every typographic role. No secondary serif, no contrasting display face.
- **Tracking as formality signal**: 1.28px on button and navigation labels — wider than body, creating the luxury interface register. Body runs at a more neutral 0.5px for legibility at product-description scale.
- **Uppercase as interface convention**: `{typography.nav-link}` and `{typography.button-ui}` are invariably uppercase. Editorial and body copy stays sentence case.
- **Weight consistency**: The system relies on Medium weight throughout. Bold is not deployed for emphasis — size and tracking differentiate the hierarchy.
- **Scale pragmatism**: The display scale peaks at 44px rather than the 80–100px extremes of pure editorial systems, reflecting Mytheresa's e-commerce purpose — even campaign moments must share the page with product grids.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px, with 25px as the characteristic mid-range unit (drawn from live extraction showing 25px as the most frequent spacing value).

Mytheresa's pages breathe with purpose. The 75px (`{spacing.3xl}`) vertical gaps between major desktop sections keep editorial rhythm without the extreme 110–120px signature of pure fashion-house sites. Product grids stay measured but not cramped — the spacing system serves a dual purpose of prestige and usability.

### Grid & Container
- Max content width: approximately 1440px, with gutters typically at 25–30px
- Desktop product grid: typically 3–4 columns, no card chrome, generous gutter
- Hero sections: full-bleed fashion photography, editorial type overlaid at `{typography.display-hero}`
- Navigation: slim white bar; MYTHERESA wordmark centered or left-aligned; category links in `{typography.nav-link}` with 1.28px tracking; right-side utilities (Search, Account, Cart)

### Whitespace Philosophy
- Whitespace frames luxury product photography rather than competing with it
- Product grid gutters at `{spacing.lg}` (25px) — wider than utility e-commerce, narrower than pure editorial
- No decorative fills or colored section backgrounds — visual rhythm comes from photography and type alone

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All page surfaces — product cards, nav, content sections |
| Hairline (Level 1) | `border: 1px solid {colors.border-subtle}` | Resting input borders, light section rules |
| Input Focus (Level 1) | `border: 1px solid {colors.border}` | Input focus — border darkens to black |
| Button Outline (Level 1) | `1px solid {colors.border}` | Secondary and ghost button borders |
| Drawer / Modal (Level 3) | `box-shadow: 0 8px 40px {colors.shadow-soft}` | Cart drawer, overlay panels |
| Focus Ring | `outline: 2px solid {colors.primary}` | Keyboard focus — yellow focus ring on interactive elements |

**Shadow Philosophy**: Mytheresa keeps the primary surface flat — product cards have no lift, no hover shadow. Shadow appears only on floating layers (cart drawer, search overlay, cookie consent panel) to signal z-level separation. The brand's chosen depth language is the hover color shift — black to yellow — rather than a physical elevation metaphor.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs, modals, image frames — all primary UI |
| `sm` | 2px | Functional toggles, close controls — nearly imperceptible |
| `pill` | 9999px | Promotional tags, availability chips, cookie-consent search |

The shape language is architecturally square. Buttons, cards, and inputs all use `{rounded.none}`. The 2px softening on functional controls is a pixel-rendering concession, not a stylistic language. The system's only rounded forms are full pills on small promotional tags, where the rounded shape signals a different semantic register (label vs interactive element).

## Components

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

### Button variants
- **`button-primary`** — `{colors.ink}` fill (absolute black), `{colors.background}` white text, `{rounded.none}`, 14px Avenir uppercase at 1.28px tracking, `padding: 12px 25px`. Hover transitions fill to `{colors.primary}` (yellow) and text to `{colors.on-primary}` (black) via `0.3s ease` on background-color — the yellow hover is Mytheresa's most characteristic interactive moment.
- **`button-secondary`** — White (`{colors.background}`) fill, `{colors.ink}` text, same geometry and 1px border. Hover fills `{colors.surface}`. Used for secondary actions — "Save to Wishlist", "View More".
- **`button-accent`** — `{colors.primary}` yellow fill, `{colors.on-primary}` black text. Used on sale banners, promotional CTAs, and editorial accent moments. The yellow-fill button is the system's most energetic surface.

### Cards
- **`card`** — Flat white surface, no border, no shadow, `{rounded.none}`. Product photography fills the top edge-to-edge; `{typography.heading-sub}` brand name and product name appear below, followed by `{typography.body}` price. Cards are presentational frames — no chrome container.

### Inputs
- **`input`** — White fill, `1px solid {colors.border-subtle}` full border, `{rounded.none}`. 15px Avenir body text. Padding `12px 15px` (from live extraction). Focus: border darkens to `{colors.border}` (black). No glow, no background change — border weight change is the interaction signal.

### Badges / Tags
- **`badge`** — `{colors.primary}` yellow fill, `{colors.on-primary}` black text, `{rounded.none}`, 12px uppercase Avenir. The yellow badge is the system's most recognizable element — "SALE", "NEW IN", "EXCLUSIVE" all appear in this yellow chip. A neutral `{components.badge-neutral}` exists for "SOLD OUT" and secondary labels.

### Navigation
- **`nav-bar`** — White background, `{colors.ink}` text, `{typography.nav-link}` (14px uppercase 1.28px tracking). MYTHERESA wordmark centered in the bar. Hover transitions color from `{colors.ink}` to `{colors.text-hover}` — minimal, a deepening. No underline animation, no background highlight.

## Do's and Don'ts

### Do
- Use `{colors.primary}` yellow exclusively for brand accent moments — CTA hover, sale/promotional badges, campaign highlights
- Keep all primary UI elements at `{rounded.none}` — buttons, cards, inputs, image frames are all sharp-cornered
- Apply `{typography.button-ui}` (14px uppercase 1.28px tracking) to every action label — never reduce tracking for cramped fits, adjust layout instead
- Transition CTA fill from black to `{colors.primary}` on hover — this yellow reveal is the system's interaction signature
- Use `{components.badge}` (yellow) for "SALE", "NEW IN", "EXCLUSIVE" labels — reserve `{components.badge-neutral}` for "SOLD OUT" and status labels
- Let fashion photography carry visual weight — the canvas exists to frame the image, not compete with it
- Use `{colors.error}` exclusively for form validation and sale price indication — never as a general alert accent
- Animate via color transitions at `0.3s ease` — `fadein` for page elements at 0.5s, color transitions at 0.3s. No transforms or scale lifts.

### Don't
- Don't use `{colors.primary}` yellow as a background color for content sections, page fills, or chrome — it belongs in badges, hovers, and promotional moments only
- Don't introduce a second typeface — Avenir Next LT Pro handles every role; a contrasting serif would conflict with the brand's pragmatic-luxury register
- Don't round primary UI corners — not 4px, not 8px. The sharp geometry is the brand's structural language
- Don't add box-shadows to product cards or page surfaces — depth is communicated by color shift, not physical elevation
- Don't use `{colors.primary-container}` pale yellow as a button fill — it lacks sufficient contrast with `{colors.on-primary}` at small sizes
- Don't reduce `{typography.button-ui}` tracking below 1.28px — the spacing registers as luxury; tighter settings read as generic e-commerce
- Don't introduce hover animations using scale or transform — the yellow-fill reveal is the preferred hover mechanism; physical motion undermines it
- Don't apply yellow to body copy, nav links, or heading text — `{colors.primary}` exists only in filled surfaces and focused interactive states

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 375px | Single-column; hamburger nav; hero type ~24px; condensed spacing |
| Mobile | 375–767px | Single-column product grid; nav collapsed; `{spacing.md}` gutters |
| Tablet | 768–1023px | Two-column product grid; nav collapsed; 768px layout pivot |
| Desktop | 1024–1439px | Full horizontal nav visible; 3-column product grid; `{spacing.lg}` gutters |
| Large Desktop | ≥ 1440px | 4-column grid; max container ~1440px; full 75px vertical section gaps |

### Touch Targets
- Primary buttons use 12px vertical padding — effective tap height approximately 44–48px at button-ui size
- Navigation links on mobile render inside a full-screen drawer with generous line-height
- Product tiles are fully tappable as complete card regions
- Input fields expand to full-width on mobile with a minimum 44px effective height

### Collapsing Strategy
- **Navigation**: full horizontal bar → hamburger drawer on mobile; full-screen overlay with flat uppercase links in `{typography.nav-link}` style
- **Type scale**: `{typography.display-hero}` (44px) scales toward 24–28px on mobile; body and nav hold at their set sizes
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; gutters compress from 25px toward 16px
- **Spacing**: 75px vertical section gaps compress to 40–48px on mobile while preserving editorial rhythm

### Image Behavior
- Campaign photography is always full-bleed at hero scale — no max-width cap on editorial sections
- Product tile images maintain consistent portrait aspect ratio across breakpoints
- Image frames always `{rounded.none}` — no image clips to a rounded container
- White studio and lifestyle photography blends seamlessly into `{colors.background}`, eliminating visible frame edges

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure white
- Primary text: `{colors.ink}` — absolute black
- Brand accent: `{colors.primary}` — Mytheresa yellow
- Secondary text: `{colors.ink-secondary}` — mid-gray
- Border (resting input): `{colors.border-subtle}` — #dfdfdf
- Border (focus / structural): `{colors.border}` — black
- CTA fill: `{colors.ink}` (black), transitions to `{colors.primary}` (yellow) on hover
- Badge / sale accent: `{colors.primary}` yellow

### Example Component Prompts

- "Build a Mytheresa editorial hero on `{colors.background}` white. Full-bleed fashion photography at full viewport height. Overlay `{typography.display-hero}` (44px AvenirNextLTPro-Medium, `letter-spacing: 0.5px`) campaign headline in sentence case, `{colors.ink}`. No image scrim or tint — the image bleeds to page edge. Navigation bar at top: MYTHERESA wordmark centered in spaced `{typography.nav-link}` (14px uppercase 1.28px tracking), category links left and right. Thin `{colors.border-subtle}` bottom-border separates nav from content."

- "Create a Mytheresa primary CTA button: `{colors.ink}` fill (black `#000000`), `{colors.background}` white text, `{typography.button-ui}` (14px AvenirNextLTPro-Medium, `text-transform: uppercase`, `letter-spacing: 1.28px`), `border-radius: 0`, `padding: 12px 25px`, `border: 1px solid {colors.border}`. Hover transitions fill to `{colors.primary}` (#ffd200) and text to `{colors.on-primary}` (black) via `0.3s ease` on background-color and color. No shadow, no scale, no transform."

- "Design a Mytheresa product card: `{colors.background}` white surface, `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge at top. Below: `{typography.caption}` designer name in `{colors.ink-secondary}`, then `{typography.heading-sub}` product name in `{colors.ink}`, then `{typography.body}` price. Optional `{components.badge}` yellow chip top-left corner for 'SALE' or 'NEW IN'. No card chrome — pure frame."

- "Build a Mytheresa desktop navigation bar: `{colors.background}` white, no bottom border or a single `{colors.border-subtle}` hairline. MYTHERESA wordmark centered in `{typography.nav-link}` (14px uppercase 1.28px tracking). Category links left-aligned (Women, Men, Kids, New Arrivals, Sale). Right utilities (Search, Account, Bag). Link hover: color shifts to `{colors.text-hover}` via `0.2s ease`. No underline, no background highlight, no border on hover."

- "Create a Mytheresa sale badge: `{colors.primary}` yellow fill (`#ffd200`), `{colors.on-primary}` black text, `{rounded.none}`, `{typography.caption}` 12px AvenirNextLTPro-Medium uppercase, `padding: 2px 8px`. Absolute-positioned top-left on product card. The yellow fill is the entire brand accent expression — do not soften to `{colors.primary-container}` for this badge."

- "Render a Mytheresa product grid: 4-column desktop layout, `{spacing.lg}` (25px) gutters, `{colors.background}` white throughout. Each tile is a `{components.card}` with designer name in `{typography.caption}` / `{colors.ink-secondary}`, product name in `{typography.heading-sub}`, price in `{typography.body}`. Sale tiles get a `{components.badge}` yellow chip; sold-out tiles get a `{components.badge-neutral}` gray chip. No hover shadow — product image may shift to 0.9 opacity via `0.3s ease` as the only hover signal."

### Iteration Guide

1. Start on absolute white (`{colors.background}`) — no section tints, no warm ivory, no dark-mode variant. If any element carries a non-white background, remove it.
2. Confirm the yellow (`{colors.primary}`) appears only in badge fills, CTA hover states, and promotional surfaces. If yellow is present on any structural chrome, nav text, or body copy, remove it.
3. Set all type in AvenirNextLTPro-Medium. If a second typeface appears, replace it. Avenir handles every role.
4. Apply `border-radius: 0` to every button, card, input, and modal. If any corner is rounded, flatten it — the only permitted rounded forms are full-pill tags.
5. Verify CTAs use `{typography.button-ui}`: 14px uppercase at 1.28px tracking. Confirm the black-to-yellow hover transition fires at `0.3s ease`. If the CTA is yellow-fill at rest, that is `{components.button-accent}` — only appropriate for promotional contexts.
6. Check that `{components.badge}` (yellow) appears on sale, new-in, and exclusive product labels. If neutral gray badges are yellow, swap to `{components.badge-neutral}`.
7. Verify input borders are full-box `1px solid {colors.border-subtle}` at rest, `1px solid {colors.border}` on focus — not underline-only. Mytheresa uses the full-box convention.
8. Confirm section rhythm: major desktop vertical gaps approach `{spacing.3xl}` (75px). If sections feel stacked, add air. If it approaches 120px+, scale back — Mytheresa is editorial but commercially paced.

---

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