---
version: alpha
name: "Loewe"
description: "Spanish craft luxury rendered in a proprietary serif, a signature cyan wordmark, and editorial restraint — full-bleed photography on white with near-zero UI chrome."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f5f2"           # faint warm off-white for alternate section tints

  # Ink / text
  ink: "#000000"               # primary text, navigation links, body — pure black
  ink-muted: "#333333"         # secondary text, captions, muted labels
  ink-ghost: "#999999"         # disabled state, placeholder, legal fine print

  # Brand accent — the cyan wordmark and interactive highlight
  primary: "#00adef"           # signature Loewe cyan: logo, hover underlines, focus rings
  on-primary: "#ffffff"        # white text on cyan fills
  primary-hover: "#0099d4"     # one step deeper for interactive states

  # Semantic
  error: "#ae3433"             # --lw-color-utility-negative from CSS variables

  # Borders & structural lines
  border: "#000000"            # 1px rules on buttons, inputs, dividers
  border-muted: "#333333"      # bottom-border underlines on active nav items; also link hover stroke

  # Shadow tints (elevation table)
  shadow-near: "#222222"       # was rgb(34,34,34) — Google format requires hex; 7px soft glow
  shadow-far: "#000000"        # was rgba(0,0,0,0.35) — Google format requires hex; 30px overlay

typography:
  display-hero:
    fontFamily: "Loewe, Georgia, Times New Roman, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -1px
  display:
    fontFamily: "Loewe, Georgia, Times New Roman, serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.63px
  heading-section:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.05em
  caption:
    fontFamily: "Avus Pro, Avus, Georgia, serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  label-ui:
    fontFamily: "Lato, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.04em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px
  5xl: 96px

rounded:
  none: 0px
  xs: 2px            # video player and slider elements only
  sm: 4px            # utility UI — tooltips, dropdowns
  pill: 9999px       # circular icon buttons, avatar elements

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    border: "1px solid {colors.border}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 0px
    borderBottom: "1px solid {colors.border}"
  button-ghost-hover:
    textColor: "{colors.primary}"
    borderBottom: "1px solid {colors.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 16px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.border}"
    outline: "2px solid {colors.primary}"

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

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# Loewe Design System

## Overview

Loewe arrives on screen as it does in the world — through confidence rather than announcement. The page opens to a pure white canvas (`{colors.background}`) and a full-bleed editorial photograph that immediately occupies nearly the entire viewport. Above the image, in a size that makes every other luxury brand's wordmark seem tentative, the Loewe logotype is set in its proprietary custom serif in a vivid, unmistakable cyan (`{colors.primary}`). This is the one chromatic gesture in an otherwise achromatic system, and it does an enormous amount of work: it marks the brand as artful and unexpected, borrowing from the tradition of Catalan modernism and Balenciaga-era boldness, while the white space and restrained typographic palette around it signal that this is serious luxury, not commercial spectacle.

The typographic foundation rests on two proprietary typefaces. The Loewe display face — a high-contrast serif with calligraphic influence, drawn for the brand — appears in editorial headlines at sizes up to 72px. It carries the warmth of the house's craft heritage, the feeling of something made by hand. Below the display scale, Avus Pro (a roman-influenced geometric serif) handles navigation, product names, body copy, prices, and UI labels. Its weight sits at 400 everywhere — Loewe does not shout through font weight. A small presence of Lato appears for certain utility UI moments, at medium weight and loose tracking, providing a clean system-sans legibility counterpoint when absolute neutrality is needed. The result is a typographic system with genuine depth: display moments feel editorial and authored; functional moments feel precise and considered.

The design's restraint in chrome is total. There are no card shadows except for a focused overlay; no decorative gradients; no saturated accent colours beyond the signature cyan reserved for the wordmark and select interactive states. Navigation links hover from black to underline with no colour shift. Cards are frameless. Product photography sits at the edge of the grid with zero border-radius and zero chrome. The signature interaction is quiet: animated underlines grow across nav links at `0.3s ease-out` as though drawn by a careful hand. Loewe's digital presence is that of a gallery showing extraordinary objects — the room recedes entirely.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) — no section tints, no dark-mode alternative in the primary flow
- Signature cyan wordmark (`{colors.primary}` `#00adef`) — the single chromatic constant; appears only on the logo and select interactive states
- Proprietary display serif (Loewe typeface) for campaign headlines at 42–72px with slight negative tracking
- Avus Pro (a roman-influenced serif) at weight 400 for all functional typographic roles
- Near-total absence of border-radius — buttons, cards, inputs, and image frames are uniformly sharp
- Full-bleed editorial photography as the primary design material — chrome disappears, imagery takes the entire stage
- Underline-grow hover animation on nav links and text CTAs at `0.3s cubic-bezier(0, 0, 0.3, 1)`
- Black-on-white button inversion as the primary hover state — fills and outlines swap on interaction
- Responsive breakpoints at 480px, 600px, 768px, 1024px, 1440px, 1600px and 1920px — an unusually granular scale for full-viewport editorial compositions
- The anagram mark (Loewe's woven-circle logo) appears as the favicon and brand stamp — a secondary identity element distinct from the wordmark
- Functional typography (`{typography.body}`) stays at 14px — more generous than Jacquemus or Aesop, prioritising comfortable reading on product pages
- Motion anchored at `0.3s` with `cubic-bezier(0, 0, 0.3, 1)` deceleration — subtle, always decelerating toward rest

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The absolute page surface. Loewe never shifts the canvas with tinted bands, dark hero sections, or textured fills. White is the gallery wall.
- **Warm Off-White** (`{colors.surface}`): A barely perceptible warm step used for alternate section treatments and subtle product tile groupings. Almost invisible in isolation.

### Ink / Text
- **Loewe Black** (`{colors.ink}`): All primary text, navigation, product names, prices, button labels, and the primary interactive surface. Pure `#000000`, consistent throughout.
- **Muted Ink** (`{colors.ink-muted}`): Secondary text — captions, supporting product information, breadcrumbs, legal fine print. A soft `#333333` for reduced visual weight without full greying.
- **Ghost Ink** (`{colors.ink-ghost}`): Disabled states, placeholder text, and decorative fine-print lines at the lowest legibility tier.

### Brand Accent
- **Loewe Cyan** (`{colors.primary}`): The brand's single chromatic signature. Used exclusively for the wordmark, select interactive highlights, and focus rings. Its vivid, process-cyan quality — midway between Yves Klein blue and a CMYK registration mark — is immediately recognisable and never diluted by overuse.
- **Cyan Deep** (`{colors.primary-hover}`): A one-step darker value for hover transitions on interactive elements where cyan is the active state.
- **White on Cyan** (`{colors.on-primary}`): Button labels and text appearing on cyan fill surfaces.

### Semantic
- **Error Red** (`{colors.error}`): Form validation errors and alert states — derived from the `--lw-color-utility-negative` CSS custom property. The one warm hue in the system after cyan.

### Borders & Structure
- **Black Rule** (`{colors.border}`): 1px strokes on buttons, inputs, and horizontal section dividers. Pure black for maximum contrast and precision.
- **Charcoal Underline** (`{colors.border-muted}`): Active nav underlines and link hover strokes where slight softening from pure black reduces visual weight.

## Typography

### Font Family
- **Display**: `Loewe` — a bespoke high-contrast serif drawn for the house. Self-hosted (`Loewe.woff2`). Used exclusively for editorial headlines and campaign titles. Not used for body copy or UI.
- **Primary UI**: `Avus Pro` — a roman-influenced geometric serif by the same name as the broader Avus family. Self-hosted in two weights: Regular (`AvusPro.woff2`) and Medium (`AvusProMedium.woff2`). Handles navigation, body copy, product names, prices, captions, and button labels.
- **Utility Sans**: `Lato` — a Google-accessible humanist sans at weight 500 for select utility UI moments (chat, utility labels, promotional banners). Provides clean legibility contrast against the serif stack.
- **OpenType Features**: Default ligatures. Avus Pro carries no ornamental features; Loewe display face uses its drawn character set at face value.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px — full-bleed campaign titles, seasonal collection openers |
| `display` | 42px — section editorial headlines, lookbook captions, editorial features |
| `heading-section` | 22px — primary category titles, feature section headings |
| `heading-sub` | 18px — product grouping headings, sub-category labels |
| `body-large` | 18px — editorial descriptions, brand story paragraphs |
| `body` | 14px — product descriptions, navigation links, standard UI copy |
| `nav-link` | 14px — desktop top navigation, sub-nav items |
| `button-ui` | 14px / 0.05em tracking — CTA labels at light-positive tracking |
| `caption` | 12px — product tile supplementary labels, size guides, fine print |
| `label-ui` | 12px Lato weight 500 / 0.04em — utility badges, banners, promo labels |

### Principles
- **Two-typeface editorial structure**: Loewe display serif for campaign moments; Avus Pro for every functional role. The display face sets the house's artistic register; Avus Pro does the commerce.
- **Weight restraint**: Avus Pro at 400 everywhere in the primary reading tier. The heaviest weight used in the system is Avus Pro Medium (500) for accent UI moments. No bold weights.
- **No uppercase convention**: Loewe uses sentence case throughout — navigation, buttons, product labels. The only uppercase in the system is the wordmark itself, set in caps as part of the logotype drawing.
- **Tracking as refinement**: `{typography.button-ui}` uses a slight `0.05em` positive tracking — enough to add formality to CTA labels without entering the wide-tracking territory of Jacquemus or Balenciaga.
- **Negative tracking on display**: The Loewe display serif tightens at `−0.63px` at 42px and further at large sizes — characters sit close together, creating a solid typographic mass.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block. Base unit: 8px, with the dense set of common values (8, 12, 16, 24, 32, 48, 80) confirmed by dembrandt's frequency analysis.

Loewe pages are architecturally generous with vertical rhythm. Campaign hero images occupy the full viewport on load with no UI intrusion except the minimal header. Between editorial sections, vertical gaps run to 80–96px. Product grids use consistent gutters with deliberate breathing room. The system breathes at an editorial magazine pace — every section feels composed, not filled.

### Grid & Container
- Max content width: approximately 1440px at the standard container; full-bleed photography breaks this constraint for hero compositions
- Desktop product grid: typically 3–4 column, equal-gutter with generous outer margin
- Navigation: a horizontal bar with the cyan Loewe wordmark flush left; category links (Women, Men, Gifts, Art & Craft, Stories) centred or right-aligned; utility icons (Search, wishlist, bag) at far right
- Hero sections: full-viewport-height photography with wordmark and minimal navigation above

### Whitespace Philosophy
- **The gallery principle**: white space is not absence — it is the setting for objects of exceptional quality. Products and editorial photography require breathing room to read as significant.
- **Photography is the primary layout material**: the site's composition is built around images, not content blocks. Typography orbits the photography, not the reverse.
- **No decorative chrome**: no alternating background bands, no card borders at rest, no section dividers except single 1px black rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All surfaces at rest — every card, every section, every panel |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Active nav underlines, input borders, button edges |
| Near Glow (Level 2) | `box-shadow: {colors.shadow-near} 0px 0px 7px 0px` | Subtle ambient elevation for media player and select overlapping panels |
| Overlay (Level 3) | `box-shadow: {colors.shadow-far} 0px 0px 30px 0px` | Full overlay panels, video player chrome, modal surfaces |
| Focus Ring | `outline: 2px solid {colors.primary}` | Interactive focus state — cyan ring distinguishes keyboard focus from mouse hover |

**Shadow Philosophy**: Loewe's surface treatment is flat by conviction. Photography rests on white; product tiles have no shadow at rest; buttons are defined by 1px black borders, not elevation. The two shadow values in the system appear only when content layers over content — a media player over a full-bleed hero, a drawer over the page. In those moments, Loewe uses a soft, near-black glow rather than a colour-tinted shadow. The system has no ambient elevation.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, cards, inputs, image frames, panels, modals — everything primary |
| `xs` | 2px | Video player progress bar and slider elements from the embedded media system |
| `sm` | 4px | Utility dropdowns, tooltip surfaces |
| `pill` | 9999px | Circular close buttons, avatar elements, icon-button frames |

Loewe's radius posture is strictly angular. The `2px` and `4px` values are inherited from the embedded video player component (flowplayer) and PrimeReact framework utilities — they are not intentional brand radii. In every native Loewe component — buttons, product cards, input fields, drawers — the answer is `{rounded.none}`. Luxury editorial brands almost universally choose squared corners; the absence of rounding signals seriousness and craft, not software.

## Components

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

### Buttons
- **`button-primary`** — Black (`{colors.ink}`) fill, white text, `{rounded.none}`, 14px Avus Pro at `0.05em` tracking, `1px solid {colors.border}`. Hover inverts: white fill, black text, border holds. Clean toggle between filled and outlined states.
- **`button-secondary`** — White fill, black text, same `1px solid {colors.border}` outline. The inverse of primary at rest; hover inverts to black fill. Used for secondary actions — "Add to wishlist", "View details".
- **`button-ghost`** — No fill, black text, bottom-border only as the CTA underline convention. On hover, the underline and text shift to `{colors.primary}` cyan. Used for editorial text links with intentional CTA weight.

### Cards
- **`card`** — Flat white surface, zero border, zero shadow, `{rounded.none}`. Product photography is edge-to-edge; the Avus Pro product name and price appear below with minimal padding. Cards are viewfinders, not containers.

### Inputs
- **`input`** — White fill, 1px black border on all four sides, `{rounded.none}`, 14px Avus Pro. On focus, a 2px cyan outline supplements the black border — the brand's one moment where `{colors.primary}` enters a functional component.

### Navigation
- **`nav-bar`** — White background, `{colors.ink}` text, `{typography.nav-link}`. The cyan Loewe wordmark sits flush left. On hover, nav links acquire an animated underline that grows from `width: 0` to full at `0.3s cubic-bezier(0, 0, 0.3, 1)`. Active states use `border-bottom: 2px solid {colors.ink}`.

### Badges
- **`badge`** — Off-white fill, `{colors.ink-muted}` text, `{typography.caption}`, `{rounded.none}`. Used for category labels and product status tags — "New", "Last pieces", "Exclusive".

## Do's and Don'ts

### Do
- Use `{colors.background}` pure white as the sole canvas — no section tints, no dark-mode alternative, no textured grounds
- Reserve `{colors.primary}` cyan for the wordmark and focus states only — its rarity is its force; overuse destroys the brand signature
- Set all editorial headlines in the Loewe display serif at `{typography.display}` or `{typography.display-hero}` — the house typeface must carry campaign moments
- Keep all UI elements at `{rounded.none}` — buttons, cards, inputs, panels, image frames
- Let full-bleed photography dominate — the grid should be composed around the image, not the other way around
- Use `{typography.button-ui}` at sentence case for all CTA labels — uppercase is reserved for the wordmark only
- Animate nav underlines at `0.3s cubic-bezier(0, 0, 0.3, 1)` — the deceleration is the brand's pace of movement
- Invert button fills on hover (black↔white) rather than lifting, shadowing, or tinting — the swap is binary and deliberate

### Don't
- Don't apply `{colors.primary}` cyan to any surface beyond the wordmark and focus rings — even subtle cyan tints will dilute the signature
- Don't add drop shadows to cards, product tiles, or buttons — the system is categorically flat at rest
- Don't round any UI corner — framework-inherited `2px` on slider elements is a seam, not permission
- Don't use the Loewe display serif for body copy, navigation, or UI labels — it is a display instrument only
- Don't introduce a second chromatic accent — the only semantic colour beyond black, white, and cyan is the error red
- Don't break the square-corner button convention for any promotional treatment — consistency is the luxury signal
- Don't animate anything other than underline grows and panel transitions — no parallax, no scale-on-hover, no sequential fade sequences
- Don't use `{colors.ink-ghost}` for interactive text — it is for disabled and placeholder states only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column; hamburger nav; hero type scales to ~32px; compact spacing |
| Mobile | 480–599px | Single-column continues; image aspect ratio locks tighter |
| Mobile Large | 600–767px | Early two-column product grid begins on some category layouts |
| Tablet | 768–1023px | Full two-column grid; sub-nav still collapsed; sidebar panels possible |
| Desktop | 1024–1439px | Full horizontal nav; three-column product grids; full editorial spacing |
| Large | 1440–1919px | Maximum container; four-column grids; largest hero photography |
| XL | ≥1920px | Constrained max-width; photography scales up but content max holds |

### Touch Targets
- Primary buttons: padding `12px 24px` with 14px type achieves ~40px effective height — within comfortable tap zone
- Navigation items on mobile render at 14px with generous vertical padding — thumb-safe in the slide drawer
- Product tiles are fully tappable card regions; the tap zone extends to the entire card, not only the product name
- Inputs are full-border fields with sufficient padding for comfortable mobile entry

### Collapsing Strategy
- **Navigation**: full horizontal bar with wordmark → hamburger icon on mobile; slide-in full-height panel with category links at 18px and secondary navigation
- **Type scale**: display hero scales from 72px toward approximately 36–42px on mobile while preserving the negative tracking; body holds at 14px
- **Product grids**: 4-column large desktop → 3-column desktop → 2-column tablet → 2-column mobile (Loewe maintains two columns even on small mobile for product browsing density)
- **Hero sections**: full-viewport-height photography scales to full-width at mobile; wordmark and navigation compress proportionally
- **Spacing**: generous 80–96px section gaps compress to 48–64px on mobile while preserving editorial rhythm

### Image Behavior
- Hero photography is always full-bleed — no max-width cap, no padding, edge-to-edge at every breakpoint
- Product tile images maintain consistent portrait aspect ratio (approximately 4:5) across breakpoints via `padding-bottom` percentage technique
- Image frames are always `{rounded.none}` — photography never clips to a rounded container
- The anagram mark (circular woven logo) appears as a persistent branded element at fixed size in the corner of certain editorial moments

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Primary text: Black (`{colors.ink}`)
- Secondary text: Charcoal (`{colors.ink-muted}`)
- Brand accent: Loewe Cyan (`{colors.primary}`) — wordmark and focus only
- CTA fill: Black (`{colors.ink}`)
- CTA text: White (`{colors.background}`)
- Border: Black (`{colors.border}`)
- Error: Red (`{colors.error}`)

### Example Component Prompts

- "Create a full-bleed campaign hero on `{colors.background}` white. The Loewe wordmark is set in the proprietary display serif in `{colors.primary}` cyan at approximately 72px, flush left, top of viewport. Below, a full-viewport-height editorial photograph fills the frame edge-to-edge with no border, no shadow, `border-radius: 0`. Navigation links at 14px Avus Pro in `{colors.ink}`, sentence case, appear above the image in a minimal bar."

- "Build a primary CTA button: `{colors.ink}` (pure black) fill, `{colors.background}` white text, 14px Avus Pro, `letter-spacing: 0.05em`, sentence case, `border-radius: 0`, `padding: 12px 24px`, `border: 1px solid {colors.border}`. On hover, invert: white fill, black text, border holds. No shadow, no scale, no glow."

- "Design a product card: white (`{colors.background}`) surface, `border-radius: 0`, no shadow, no border. Portrait product image (4:5 ratio) edge-to-edge at top. Below: 14px Avus Pro product name in `{colors.ink}`, then 14px price in `{colors.ink-muted}`. No card chrome — pure frame with caption below."

- "Build a desktop navigation bar: `{colors.background}` white background. Flush-left Loewe wordmark in display serif, `{colors.primary}` cyan. Nav links at `{typography.nav-link}` (14px Avus Pro, `{colors.ink}`, sentence case). On hover, an underline grows from `width: 0` to `100%` via `transition: width 0.3s cubic-bezier(0, 0, 0.3, 1)`. Right side: Search, wishlist, and cart icon buttons. No background change, no colour shift on links."

- "Create a text form input: white fill, `border: 1px solid {colors.border}` on all four sides, `border-radius: 0`, `padding: 12px 16px`, 14px Avus Pro, `{colors.ink}` text. On focus: `outline: 2px solid {colors.primary}` cyan ring supplements the black border. No background change, no shadow, no other colour change."

- "Create an editorial section with the Loewe display serif headline at `{typography.display}` (42px, weight 400, `letter-spacing: -0.63px`) in `{colors.ink}` on white. Below it, a 14px Avus Pro body paragraph at `line-height: 1.6`. Then a ghost button: no fill, black text, bottom-border underline only at `1px solid {colors.border}`. On hover, text and underline shift to `{colors.primary}` cyan."

### Iteration Guide

1. Start on pure white (`{colors.background}`) — no surface tints, no dark sections. If any element has a non-white, non-image background, remove it.
2. The cyan (`{colors.primary}`) belongs exclusively to the wordmark and focus rings. If it appears anywhere else, replace it with `{colors.ink}` or `{colors.background}`.
3. Set all editorial headlines in the Loewe display serif. Set all other text in Avus Pro. There is no third typeface except Lato for very specific utility moments.
4. Set all interactive elements to `border-radius: 0`. Any rounding is a framework seam, not a brand choice.
5. Buttons invert on hover (black↔white). Replace any other hover treatment (lift, glow, tint) with this swap.
6. Nav link hover: underline-grow only — `width: 0` to `100%`, `0.3s cubic-bezier(0, 0, 0.3, 1)`, `{colors.border}` colour. No colour shift.
7. Remove all card shadows and hover lifts. Cards are flat frames at rest; elevation appears only when content layers over content.
8. Photography is always full-bleed or portrait-cropped at 4:5. Never cap hero images with a container max-width.

---

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