---
version: alpha
name: "Loro Piana"
description: "Cashmere-quiet luxury system built on a warm ivory canvas, a restrained serif for editorial prestige, and a palette drawn from raw fiber — camel, ecru, slate, and deep forest." # estimated

colors:
  # Surface / canvas
  background: "#f8f5f0"          # warm ivory — the site's signature cream canvas /* estimated */
  surface: "#f0ece4"             # slightly deeper ecru for alternate-section fills /* estimated */
  surface-elevated: "#ffffff"    # pure white for overlaid modal and panel surfaces

  # Ink / text
  ink: "#1a1714"                 # deep warm near-black, primary text and wordmark
  ink-secondary: "#5c574f"       # warm midgray — supporting copy, metadata, captions
  ink-quiet: "#9a9187"           # lowest tier — placeholders, disabled labels, fine print /* estimated */

  # Brand accent — Loro Piana uses near-no chromatic accent; tone carries authority
  primary: "#1a1714"             # CTA fill, primary button — deep warm near-black
  on-primary: "#f8f5f0"          # warm ivory text on dark CTA surface

  # Interactive states (flattened from brand conventions)
  primary-hover: "#000000"       # button hover deepens to absolute black
  text-hover: "#000000"          # link hover deepens from near-black to black

  # Seasonal brand tones — used on editorial campaign surfaces, not chrome
  accent-camel: "#b08050"        # warm camel, heritage signature — used in swatches + campaign imagery /* estimated */
  accent-burgundy: "#6b2434"     # deep burgundy — seasonal editorial, product-line headers /* estimated */
  accent-forest: "#2d3f30"       # forest green — exterior fabric and outerwear imagery /* estimated */

  # Semantic
  error: "#c0392b"               # form validation, error states /* estimated */

  # Borders
  border: "#1a1714"              # 1px rules on inputs (focus), button outlines, fine dividers
  border-subtle: "#d8d2c8"       # hairline warm-gray used on section rules, resting inputs /* estimated */

  # Shadow
  shadow-soft: "#b0a89a"         # was rgba(0,0,0,0.12) — modals, cart drawer /* estimated */

typography:
  display-hero:
    fontFamily: "Loro Piana Display, Garamond, EB Garamond, Georgia, serif" # estimated — brand uses a proprietary serif
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.5px
  display:
    fontFamily: "Loro Piana Display, Garamond, EB Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Loro Piana Display, Garamond, EB Garamond, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.02em
  heading-sub:
    fontFamily: "Loro Piana Display, Garamond, EB Garamond, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.03em
  body-large:
    fontFamily: "Loro Piana Text, Garamond, EB Garamond, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
    letterSpacing: 0.01em
  body:
    fontFamily: "Loro Piana Text, Garamond, EB Garamond, Georgia, serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0.01em
  nav-link:
    fontFamily: "Loro Piana Text, Garamond, EB Garamond, Georgia, serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.06em
  button-ui:
    fontFamily: "Loro Piana Text, Garamond, EB Garamond, Georgia, serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.1em
  caption:
    fontFamily: "Loro Piana Text, Garamond, EB Garamond, Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em

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

rounded:
  none: 0px
  pill: 9999px     # cookie-consent and search suggestions only

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    border: "1px solid {colors.border}"
    textTransform: uppercase
    letterSpacing: 0.1em
  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.none}"
    padding: 14px 28px
    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: 4px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  button-ghost-hover:
    borderBottom: "1px solid {colors.border}"

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

  card-elevated:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px

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

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

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

# Loro Piana Design System

## Overview

Loro Piana's digital presence is the visual equivalent of their finest cashmere: you notice warmth before you notice effort. The canvas is a warm ivory (`{colors.background}`) — not quite white, not quite cream — a tone that recalls undyed vicuña or raw cashmere laid on a stone surface. Every typographic element rests on this ground with the unhurried confidence of a brand that has nothing left to prove after nearly two centuries of craft. Photography dominates: wide, slow-scroll landscape images of Mongolian steppe or Andean highlands, wool draped over granite boulders, artisans in Italian mills working with hands that have done this ten thousand times before.

The typographic system centers on a proprietary serif — a refined, optically-specific roman used at display scale (`{typography.display-hero}`) that sits somewhere between a classic Garamond and a contemporary editorial cut. At 72px with a touch of negative tracking, the wordmark-level text reads as unforced authority: the spacing is open enough to breathe but never so wide that it becomes decorative. Body copy runs in the same serif family at 14px with a `1.65` line-height — a reading rhythm drawn from printed catalogues rather than web convention. The overall feeling is that a book has been laid open, not that a website has loaded.

Color is nearly absent as a concept. The palette runs from `{colors.background}` ivory through `{colors.ink}` warm near-black, with `{colors.ink-secondary}` midgray for supporting roles. The accent library (`{colors.accent-camel}`, `{colors.accent-burgundy}`, `{colors.accent-forest}`) are woven-fabric tones that appear almost exclusively in product photography and campaign imagery, never as UI chrome. Buttons are black on ivory or ivory on black — nothing else. The entire interface is built on the understanding that a single chromatic intruder would shatter the spell of heritage craft.

**Key Characteristics:**
- Warm ivory canvas (`{colors.background}`) — not neutral white, not cool gray; the exact tone of natural undyed fiber
- Single-typeface discipline: a proprietary serif at all typographic scales — no secondary sans-serif, no grotesque for UI roles
- All buttons `{rounded.none}` — square-cornered, architecturally flat, never pill-shaped or softened
- Bottom-border-only inputs: `1px solid {colors.border-subtle}` underline at rest, thickening on focus — no box or glow
- Generous vertical breathing: section gaps at `{spacing.3xl}` (96px) or more on desktop — editorial magazine pacing
- Button labels in `{typography.button-ui}` (12px, uppercase, `0.1em` tracking) — authority through restraint, not size
- Photography always full-bleed: landscape, still-life, and atelier imagery dominate; type orbits at the edges
- No gradients, no hero scrims competing with product and landscape photography
- `{colors.accent-camel}` and `{colors.accent-burgundy}` exist exclusively in product and editorial imagery, never in UI chrome
- The `{colors.border-subtle}` hairline is the only decorative mark — no ornamental rules, no section fills, no dark mode
- Hover states change color, not shape or elevation — motion is `transition: color 0.2s ease-in-out` only
- Navigation is a whisper of serif at 13px; the brand name appears as a wordmark, not sized for dominance

## Colors

### Surface & Canvas
- **Loro Piana Ivory** (`{colors.background}`): The signature canvas — warm, slightly yellowed, the exact tone of natural fiber. Used across every page surface, the sticky header, and all resting states.
- **Ecru Surface** (`{colors.surface}`): A half-step deeper warm tone for alternate-section fills and subtle hover backgrounds on ghost buttons.
- **White Elevated** (`{colors.surface-elevated}`): Pure white used in modal overlays, cart drawers, and elevated card panels that need to stand away from the ivory ground.

### Ink / Text
- **Loro Piana Ink** (`{colors.ink}`): Warm near-black — the primary text color, the wordmark fill, the CTA fill, and every structural marker in the system. Not pure black; the subtle warmth is essential.
- **Warm Midgray** (`{colors.ink-secondary}`): Supporting labels, subnavigation items, product metadata, image captions, and price displays.
- **Quiet Gray** (`{colors.ink-quiet}`): Lowest-contrast tier — placeholder text, disabled states, legal fine print. Never used for interactive elements.

### Brand Accent
- **Near-Black CTA** (`{colors.primary}`): The only CTA fill. No chromatic accent — near-black carries every primary action.
- **Ivory on Dark** (`{colors.on-primary}`): Button label text on the near-black primary surface.

### Seasonal Fabric Tones
- **Camel** (`{colors.accent-camel}`): The heritage signature — warm golden-brown of natural camel fiber. Appears in product swatches and campaign photography, never as UI chrome.
- **Burgundy** (`{colors.accent-burgundy}`): A deep wine tone from the outerwear and accessories line. Editorial campaign use only.
- **Forest** (`{colors.accent-forest}`): Deep pine-green from outdoor and technical collections. Product imagery and fabric-swatch display only.

### Text States
- **Hover Deepening** (`{colors.text-hover}`): Link hover deepens from near-black to absolute black — perceptible only on close inspection, which is exactly the intent.
- **Button Hover** (`{colors.primary-hover}`): CTA hover deepens to pure black, consistent with the link hover logic.

### Borders & Dividers
- **Structural Border** (`{colors.border}`): 1px rules on focus-state inputs, primary button outlines, and fine section dividers.
- **Hairline Divider** (`{colors.border-subtle}`): The resting input underline and section separator — warm gray, not cool, consistent with the ivory canvas.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): Used sparingly on modal overlays and cart drawers. The brand-facing design is otherwise flat.

## Typography

### Font Family
- **Primary — Display**: `Loro Piana Display`, a proprietary serif with optical-size Roman characteristics; fallbacks: `Garamond, EB Garamond, Georgia, serif`. Used at all editorial and display scales.
- **Primary — Text**: `Loro Piana Text`, the text-size companion to the display cut, optimized for reading at 12–18px; fallbacks: `Garamond, EB Garamond, Georgia, serif`. Used for body, navigation, button labels, and captions.
- **OpenType Features**: Likely uses optical sizing (`font-optical-sizing: auto`) given the distinction between Display and Text cuts. No tracked small-caps or stylistic alternates in the chrome layer.
- **Google Fonts substitution**: Use **EB Garamond** (weight 300–400) as the closest accessible substitute; it preserves the fine-stroke contrast and humanist serif character without the extreme delicacy of a fashion-house custom cut.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px — campaign editorial opens, seasonal collection headings, full-bleed hero type |
| `display` | 48px — section feature moments, category-page headings, product-line introductions |
| `heading-section` | 28px — section titles, editorial subheadings, chapter-level navigation labels |
| `heading-sub` | 18px — product card names, feature list headers, fabric-detail section titles |
| `body-large` | 18px — editorial lead paragraphs, collection introductions, heritage narrative text |
| `body` | 14px — product descriptions, form labels, running catalogue copy |
| `nav-link` | 13px — desktop navigation, footer link lists, breadcrumb paths |
| `button-ui` | 12px / uppercase / 0.1em tracking — all action labels, CTA buttons |
| `caption` | 11px — material composition labels, swatch names, image captions, legal fine print |

### Principles
- **Single-family discipline**: Display and Text optical-size variants of the same proprietary serif. No secondary sans-serif, no grotesque for UI utility roles. Every character on screen speaks the same visual language.
- **Weight restraint**: Two weights deployed — Light (300) for large display text, Regular (400) for reading text. The typeface's fine-stroke contrast carries hierarchy through size, not weight.
- **Tracking as formality signal**: `0.1em` on button labels and `0.06em` on navigation convey institutional formality. Body and large display text runs with minimal tracking to preserve the page-spread quality.
- **Size restraint**: 12px buttons, 13px navigation, 11px captions — the brand trusts photography and whitespace over type size.
- **Uppercase sparingly**: CTA buttons and fabric-category badges only. All editorial, navigational, and body copy in sentence case.

## Layout

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

Loro Piana pages breathe at a printed-catalogue pace. Primary section gaps run to `{spacing.3xl}` (96px) or `{spacing.4xl}` (128px) on desktop — proportions inherited from the brand's physical lookbooks. The lower scale (4–16px) handles component-level rhythm inside dense product tiles; the upper scale (64–128px) governs the editorial white space that signals luxury.

### Grid & Container
- Max content width: approximately 1440–1600px on large viewports with generous outer margins
- Desktop product grid: typically 2–3 columns for outerwear and hero products, 4 columns for accessories and accessories capsules
- Hero sections: full-bleed photography spanning viewport width; type overlaid at the lower third or adjacent in a two-column split
- Navigation: flat horizontal bar; LORO PIANA wordmark centered or left-anchored; main categories (Women, Men, Children, Lifestyle, World) and utilities (Search, Account, Wishlist, Bag)

### Whitespace Philosophy
- Whitespace is the primary differentiator from mid-market retail — sections are allowed to breathe rather than stacked
- Photography occupies full viewport width without crop lines, borders, or rounded containers
- No decorative chrome between sections: no color alternation, no pattern fills, no gradient bands

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every page surface — the entire editorial interface is categorically flat |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Resting inputs, section dividers |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.border}` | Input focus state — no glow, no box-shadow |
| Button Outline (Level 1) | `1px solid {colors.border}` | Secondary button border, primary button outline |
| Modal / Cart (Level 3) | `box-shadow: 0 20px 60px {colors.shadow-soft}` | Cart drawer, size-guide modal, filter panel |

**Shadow Philosophy**: Loro Piana's design language is architecturally flat. Shadow appears only to physically separate floating panels (cart drawer, modal overlays) from the page. Every product card, every editorial section, every navigation element sits flush against the ivory canvas. The tactile depth of the product — the hand of cashmere, the drape of vicuña — must not be competed with by computed lighting effects.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs, image frames, modals, panels — every primary UI element |
| `pill` | 9999px | Cookie-consent search input and autocomplete suggestion chips only |

The system is binary and essentially square. Loro Piana's shape vocabulary is drawn from the clean rectangular perimeters of Italian tailoring and Swiss watchmaking: no concession to softness, no rounded card chrome. The single `pill` exception belongs to browser-convention utility components, not to the brand design language.

## Components

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

### Button Variants
- **`button-primary`** — `{colors.primary}` fill (warm near-black), `{colors.on-primary}` ivory text, `{rounded.none}`, 12px serif uppercase at `0.1em` tracking, `1px solid {colors.border}` outline, `padding: 14px 28px`. Hover deepens to `{colors.primary-hover}` via `0.2s ease-in-out`. The system's primary CTA — "Add to Cart", "Add to Wishlist", "Shop the Collection".
- **`button-secondary`** — Ivory (`{colors.background}`) fill, `{colors.ink}` text, same geometry and 1px border. Hover fills `{colors.surface}`. Used for secondary actions — "View Details", "Notify Me", "Save for Later".
- **`button-ghost`** — Transparent fill, no side borders, `border-bottom: 1px solid {colors.border-subtle}` at rest, thickening to `{colors.border}` on hover. Used inline for editorial links and text-level CTAs — "Discover the Collection", "Read More".

### Cards
- **`card`** — Flat ivory surface, no border, no shadow, `{rounded.none}`. Product photography edge-to-edge; `{typography.heading-sub}` product name and `{typography.body}` price appear below with no card chrome. Cards are presentational frames, not containers.
- **`card-elevated`** — White `{colors.surface-elevated}` surface for the cart panel, overlay modal, and filter drawer. 24px internal padding, sharp corners, no shadow beyond the containing modal's treatment.

### Inputs
- **`input`** — Ivory fill, `border-bottom: 1px solid {colors.border-subtle}` only, `{rounded.none}`. 14px serif body text. Focus switches to `{colors.border}` bottom-border — no background change, no glow, no box-shadow.

### Badges / Tags
- **`badge`** — No fill, 11px uppercase serif in `{colors.ink-secondary}`. Typographic-only labels for "NEW ARRIVAL", "EXCLUSIVE", "SOLD OUT" — no chip background, absolute-positioned over product tiles.

### Navigation
- **`nav-bar`** — Ivory background (`{colors.background}`), `{colors.ink}` text, `{typography.nav-link}` (13px, `0.06em` tracking). LORO PIANA wordmark prominent; category links in light serif weight. Link hover transitions `color` from `{colors.ink}` to `{colors.text-hover}` in `0.2s ease-in-out`. No underline animation, no background highlight, no elevation on scroll.

## Do's and Don'ts

### Do
- Use `{colors.background}` warm ivory as the only canvas — never introduce cool-gray sections, off-white tints that read as white, or dark-mode surfaces
- Keep all buttons and cards at `{rounded.none}` — the system is architecturally sharp, and even 4px would read as cosmetic compromise
- Use the serif family for every typographic role — no secondary sans-serif for navigation, buttons, or utility text
- Apply uppercase only to CTAs and product-category badges — all editorial, nav, and body text in sentence case
- Use `{typography.button-ui}` (12px, uppercase, `0.1em` tracking) on all action labels — do not increase size for emphasis
- Let photography fill viewport width without borders, rounded containers, or text overlays that compete with the image
- Apply `{colors.error}` only to form validation and stock-out signals — never as a general accent or hover treatment
- Animate exclusively via color and opacity (`0.2s ease-in-out`) — no transforms, no scale lifts, no parallax
- Maintain `{spacing.3xl}` (96px+) vertical gaps between major editorial sections on desktop
- Reference `{colors.accent-camel}`, `{colors.accent-burgundy}`, and `{colors.accent-forest}` only in product swatch and editorial imagery contexts

### Don't
- Don't introduce a chromatic accent in UI chrome — `{colors.ink}` near-black is the sole button and interactive fill
- Don't add gradients on any surface, even subtle hero scrims — the photography must read without atmospheric interference
- Don't round corners on any brand-facing element — `{rounded.none}` is absolute; pill appears only in functional browser-convention components
- Don't introduce box-shadows on product cards or content sections — flatness is the brand signal; depth belongs to the product photography
- Don't use a sans-serif for any typographic role — the single-serif discipline is the system's strongest identity marker
- Don't compress line-height below `1.65` for body copy — the generous rhythm is a printed-catalogue quality signal
- Don't use `{colors.ink-quiet}` for interactive or label text — it is reserved for placeholders and legal fine print only
- Don't create border-radius values between `none` and `pill` — the binary shape vocabulary admits no intermediate values
- Don't reduce the `{spacing.3xl}` section breathing to approximate e-commerce density — spaciousness is an explicit luxury signal

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column; hamburger nav; hero type ~28px; stacked CTA buttons |
| Mobile | 375–767px | Single-column product grid; full-width imagery; nav collapsed to wordmark + hamburger |
| Tablet | 768–1023px | Two-column product grid; nav still collapsed; wider editorial padding |
| Desktop | 1024–1439px | Full horizontal nav visible; 3-column product grid; section gaps at full editorial scale |
| Large Desktop | ≥1440px | 4-column accessory grid; max container ~1600px; full `{spacing.4xl}` vertical section breathing |

### Touch Targets
- Primary buttons use 14px vertical padding — effective target height around 44–48px at 12px type
- Navigation links on mobile rendered with generous tap zones around the serif label text
- Product tiles are fully tappable card regions, not just the label text
- Input fields expand to full width on mobile with a minimum 44px effective height

### Collapsing Strategy
- **Navigation**: Full horizontal bar collapses to hamburger + centered wordmark on mobile; full-screen slide-in panel with flat serif links in `{typography.nav-link}` weight
- **Type scale**: `display-hero` scales from 72px toward 32–40px on mobile; body holds at 14px; captions remain at 11px
- **Product grids**: 4-column desktop collapses to 2-column tablet and single-column mobile; equal gutters maintained proportionally
- **Section spacing**: `{spacing.3xl}` (96px) vertical gaps compress to `{spacing.2xl}` (64px) on tablet and `{spacing.xl}` (40px) on mobile — air preserved at reduced scale

### Image Behavior
- Campaign photography is always full-bleed — no max-width caps on hero images; the ivory canvas butts directly against the image edge
- Product tile images maintain consistent portrait aspect ratio (approximately 3:4) across all breakpoints
- Image frames are always `{rounded.none}` — no circular crops, no rounded-corner containers
- Atelier and landscape photography uses the near-matching ivory-warm background tones to blend imperceptibly into `{colors.background}`

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}` (warm ivory)
- Primary text: `{colors.ink}` (warm near-black)
- CTA fill: `{colors.primary}` (same warm near-black)
- CTA text: `{colors.on-primary}` (warm ivory)
- Secondary text: `{colors.ink-secondary}` (warm midgray)
- Resting input border: `{colors.border-subtle}` (hairline warm-gray)
- Focus input border: `{colors.border}` (near-black)
- Section divider: `{colors.border-subtle}`

### Example Component Prompts

- "Build a full-bleed campaign hero on `{colors.background}` ivory. Full-viewport photography (wool landscape or atelier — no border, no rounded corners, no gradient scrim). Overlaid at lower-third: a `{typography.heading-sub}` category eyebrow in `{colors.ink-secondary}` (18px, `0.03em` tracking, sentence case), then `{typography.display-hero}` (72px, Light weight, serif, `-0.5px` tracking) collection heading in `{colors.ink}`. No overlay tint over the photography. Adjacent two-column split on desktop: image left, editorial prose right on `{colors.background}` canvas."

- "Create a primary CTA button: `{colors.primary}` fill (warm near-black), `{colors.on-primary}` ivory text, `{typography.button-ui}` (12px serif, `text-transform: uppercase`, `letter-spacing: 0.1em`), `border-radius: 0`, `padding: 14px 28px`, `border: 1px solid {colors.border}`. Hover deepens fill to `{colors.primary-hover}` (#000000) via `transition: background-color 0.2s ease-in-out`. No scale, no shadow lift, no transform."

- "Design a product card: `{colors.background}` ivory surface, `border-radius: 0`, no shadow, no border. Full-width portrait product image at top (3:4 aspect ratio, no rounded crop). Below image: `{typography.heading-sub}` (18px serif, `0.03em` tracking) product name in `{colors.ink}`, then `{typography.body}` (14px, 1.65 line-height) price in `{colors.ink-secondary}`. `{typography.caption}` material-composition line in `{colors.ink-quiet}` uppercase below price. No card chrome — frame, not container."

- "Build a desktop navigation bar on `{colors.background}` ivory. LORO PIANA wordmark left-anchored or centered in `{typography.heading-section}` serif. Category links (Women, Men, Children, Lifestyle, World) in `{typography.nav-link}` (13px, `0.06em` tracking, sentence case, `{colors.ink}`). Utility icons (Search, Account, Wishlist, Bag) right-aligned. Hover transitions `color` to `{colors.text-hover}` in `0.2s ease-in-out`. No underline, no background highlight, no border-bottom on the bar itself."

- "Create a newsletter email input field: `{colors.background}` ivory fill, no visible border on three sides, `border-bottom: 1px solid {colors.border-subtle}`, `border-radius: 0`, `{typography.body}` 14px serif, `{colors.ink}` text, `{colors.ink-quiet}` placeholder. Focus: bottom border updates to `{colors.border}` — no glow, no background change, no box-shadow. Pair with `{components.button-primary}` Subscribe button (`text-transform: uppercase`, `letter-spacing: 0.1em`) to the right."

- "Render a 4-column accessory grid on desktop: `{spacing.md}` gutters, `{colors.background}` ivory canvas throughout. Each tile is a `{components.card}` — zero chrome, portrait image top, `{typography.heading-sub}` product name and `{typography.body}` price below. Sold-out items show a `{components.badge}` 'SOLD OUT' label in `{typography.caption}` uppercase over the image. No hover elevation — image fades to 0.85 opacity via `0.25s ease-in-out` as the only hover signal."

### Iteration Guide

1. Start on `{colors.background}` warm ivory — not white, not cool gray. If any section background is pure `#ffffff` or gray-tinted, replace it. The warm tone is the system's first and most distinctive signal.
2. Set all type in the serif family — Display cut for anything at 18px+, Text cut for 12–17px. If any sans-serif appears, replace it. The single-typeface discipline is non-negotiable.
3. Apply `border-radius: 0` to every element except browser-convention utility components. No softened corners on buttons, cards, inputs, or image frames.
4. Limit motion to `transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out`. Remove any transform, translate, scale, or parallax animation.
5. Confirm CTAs use `{typography.button-ui}`: 12px, uppercase, `0.1em` tracking. Do not increase size — size would break the proportional restraint.
6. Verify section vertical gaps approach `{spacing.3xl}` (96px) on desktop. If sections feel stacked, add air — spaciousness is the primary luxury differentiator.
7. Keep the seasonal accent tones (`{colors.accent-camel}`, `{colors.accent-burgundy}`, `{colors.accent-forest}`) entirely out of UI chrome. They appear in product photography, fabric swatches, and campaign imagery only.
8. Check that photography uses no border, no rounded container, and no gradient overlay. Full-bleed, rectangular, unframed — the images must breathe as freely as the whitespace.

---

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