---
version: alpha
name: "Brunello Cucinelli"
description: "Warm greige canvas, IvyPresto Display serif for editorial gravitas, GT Eesti for human-scale body text, and a near-shadowless flatness that defers entirely to craftsmanship photography and Solomeo philosophy"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f2f2f2"           # footer top-rule tone and alternate section fills (rgb 242,242,242)
  surface-warm: "#c8b89a"      # greige panel — the warm sand visible in hero editorial splits /* estimated from visual */

  # Ink / text
  ink: "#262626"               # primary text — near-black, 264 occurrences in palette scan
  ink-muted: "#565656"         # link hover, secondary body — confirmed from dembrandt interactive deltas
  ink-quiet: "#989898"         # ghost placeholder, tertiary labels — confirmed from dembrandt hover/focus scan

  # Brand accent — Brunello Cucinelli carries no chromatic hue; ink does all authority
  primary: "#262626"           # CTA fill, primary button — same near-black as ink
  on-primary: "#ffffff"        # text on dark CTA surface

  # Interactive states
  primary-hover: "#3d3d3d"     # button hover — a step lighter than #262626 /* estimated */
  text-hover: "#565656"        # confirmed from dembrandt links hover color

  # Borders
  border: "#262626"            # 1px solid on buttons and section rules (confirmed)
  border-subtle: "#f2f2f2"     # hairline section divider — footer top-border (confirmed)
  border-light: "#c8c8c8"      # was rgba(38,38,38,0.15) — flattened to opaque approx

  # Shadow
  shadow-soft: "#cccccc"       # was rgba(0,0,0,0.2) 0px 0px 18px 0px — flattened to hex

  # Focus
  focus-ring: "#262626"

typography:
  display-hero:
    fontFamily: "IvyPrestoDisplay, IvyPresto, Georgia, Times New Roman, serif"
    fontSize: 100px
    fontWeight: 300
    lineHeight: 1.11
    letterSpacing: 0px
    fontFeature: '"lnum"'
  display:
    fontFamily: "IvyPrestoDisplay, IvyPresto, Georgia, Times New Roman, serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0px
    fontFeature: '"lnum"'
  heading-section:
    fontFamily: "TTLivretText, Georgia, Times New Roman, serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.56
    letterSpacing: 0px
    fontFeature: '"lnum"'
  heading-sub:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 0px
    fontFeature: '"lnum"'
  body:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.56
    letterSpacing: 0px
    fontFeature: '"lnum"'
  nav-link:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
    fontFeature: '"lnum"'
  button-ui:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.54
    letterSpacing: 0px
    fontFeature: '"lnum"'
  label:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: 0.44px
    textTransform: uppercase
  caption:
    fontFamily: "GTEestiProDisplay, GT Eesti Pro Display, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 2.4px
    textTransform: uppercase

spacing:
  xs: 4px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 54px
  3xl: 80px
  4xl: 106px

rounded:
  none: 0px
  xs: 2px         # buttons and minor UI controls — barely perceptible

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px
    border: "1px solid {colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 10px 20px
    border: "1px solid {colors.border}"
  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
  button-ghost-hover:
    textColor: "{colors.text-hover}"

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

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

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

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

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

# Brunello Cucinelli Design System

## Overview

Brunello Cucinelli's digital presence is built on the same logic that governs its garments: nothing is hurried, nothing is added without reason, and beauty is understood as a form of ethics. The site opens with a split canvas — the left panel a warm greige (`{colors.surface-warm}`), the right a clean white (`{colors.background}`) — and the effect is of a stone courtyard in Solomeo half in morning shadow, half in full Umbrian light. Photography is never purely decorative; it is documentary, close to the hand. Cashmere weave under studio light. A craftsman's bench. The Solomeo tower against rolling hills. The design defers to these images rather than ornamenting them.

The typographic architecture is the most distinctly Italian element of the system. Display headings deploy **IvyPresto Display** (a contemporary optical-size serif from Jan Hendrik Weber, distributed via Jan Mrozowski's Ivy Foundry) in weight 300 — at 100px it floats rather than asserts, a choice that reads more like print typography than web convention. Body prose shifts to **GT Eesti Pro Display** (a humanist sans-serif from Grilli Type, available in weights 300 through 700), which handles navigation, captions, labels, and all functional text. Long editorial passages also occasionally employ **TT Livret Text** (TypeType Foundry), a transitional text serif used for sustained reading at 18px. The three-typeface system — display serif for drama, text serif for sustained prose, humanist sans for logistics — is genuinely sophisticated, reflecting a brand whose creative direction approaches digital typography as it would a printed essay.

Color is nearly absent as a design tool. The entire system resolves to three chromatic anchors: `{colors.ink}` (a warm near-black at `#262626`, drawn from 264 palette occurrences), the greige editorial panel (a warm sand that grounds the brand's tactile identity), and pure white as the commercial and content canvas. There is no brand hue, no seasonal accent, no hover state that introduces new chroma. Transition time is 0.22s for micro-interactions and 1s for hero-level motion — a system that knows the difference between the blink of an eye and the breath of a moment.

**Key Characteristics:**
- Split-panel canvas: warm greige (`{colors.surface-warm}`) for philosophical/editorial content, pure white (`{colors.background}`) for commercial product presentation
- Three-typeface hierarchy: IvyPresto Display (light serif) for drama at display scale, TT Livret Text for extended editorial prose, GT Eesti Pro Display (humanist sans) for all navigation and UI
- `{colors.ink}` near-black (`#262626`) is the sole CTA fill and link color — no brand hue, no chromatic accent
- IvyPresto at 100px / weight 300 runs with `font-feature-settings: "lnum"` — lining numerals enforce editorial precision at display scale
- Near-zero border-radius: buttons carry a 2px radius (`{rounded.xs}`) that is cosmetic rather than intentional; all cards and images are hard-edged
- Uppercase GT Eesti captions at 12px with 2.4px letter-spacing — the micro-label language of an artisan atelier, not a retail brand
- Motion is deliberate: 0.22s for button and navigation micro-interactions, 1s for hero-level editorial transitions via `cubic-bezier(0.25, 0.1, 0.25, 1)`
- Shadow used with maximum restraint — only a single 18px blur instance in the entire palette scan, assigned to a dropdown shell
- Photography is always rectangular, always edge-to-edge, never rounded or vignetted — the image IS the argument
- GT Eesti boldness (700) appears only in button labels and utility navigation — the system reserves weight for calls to action, not headings
- Generous vertical rhythm at 54–106px between major sections: an editorial pace that feels book-like rather than commercial
- The site's breakpoint density (15 breakpoints) reflects a brand that optimises for every viewport rather than snapping between coarse tiers

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The commercial and product canvas. Product pages, navigation header, standard content sections. Absolute white — no warming, no tinting.
- **Structure Fill** (`{colors.surface}`): Faint off-white used for the footer divider and alternate section backgrounds. The subtlest possible surface step.
- **Solomeo Greige** (`{colors.surface-warm}`): The warm sand tone of the brand's editorial and philosophical panels. It appears in the left-panel split layout as a chromatic anchor to the brand's Umbrian roots — undyed wool, stone, earth.

### Ink / Text
- **Brunello Ink** (`{colors.ink}`): Warm near-black, all primary text, navigation, and the sole CTA fill. `#262626` — fractionally softer than pure black, which would feel graphic rather than artisanal.
- **Secondary Ink** (`{colors.ink-muted}`): Confirmed from the dembrandt link hover scan. Used for link hover states, secondary labels, and supporting body copy.
- **Ghost Ink** (`{colors.ink-quiet}`): Lowest-contrast tier from the hover/focus palette scan. Placeholder text, disabled fields, and fine-print meta.

### Brand Accent
- **Primary Near-Black** (`{colors.primary}`): The CTA fill and the system's sole authority color. No brand hue exists — craftsmanship is the accent.
- **On Primary White** (`{colors.on-primary}`): Button label text on the near-black surface.

### Text States
- **Link Hover** (`{colors.text-hover}`): Dembrandt confirmed `rgb(86, 86, 86)` on hover for both dark and light link instances. A perceptible but unhurried darkening.
- **Button Hover** (`{colors.primary-hover}`): A step away from the CTA fill — confirms interaction without dramatizing it.

### Borders
- **Structural Border** (`{colors.border}`): 1px solid on buttons, form inputs at focus, and vertical dividers.
- **Hairline Divider** (`{colors.border-subtle}`): The faintest possible structural marker — 2px top-border on footer from the dembrandt borders scan.
- **Translucent Border** (`{colors.border-light}`): Was `rgba(38, 38, 38, 0.15)` on an `<ul>` container — flattened to opaque approximation.

### Shadow
The system carries a single shadow instance: `rgba(0, 0, 0, 0.2) 0px 0px 18px 0px` (confidence: low) on a dropdown shell. The brand-facing design language is functionally flat. Depth is expressed through greige-to-white surface contrasts and full-bleed photography, not computed lighting.

## Typography

### Font Family
- **Display serif**: `IvyPrestoDisplay` (IvyPresto Display Light), fallbacks: `Georgia, Times New Roman, serif`. A contemporary optical-size text roman from the Ivy Foundry, self-hosted as `IvyPrestoDisplay-Light.woff`. Reserved exclusively for display-scale editorial moments.
- **Text serif**: `TTLivretText` (TT Livret Text Light), fallbacks: `Georgia, Times New Roman, serif`. A transitional text serif from TypeType Foundry, self-hosted as `TTLivretText-Light.woff`. Used for sustained editorial prose at 18px where optical legibility matters.
- **UI sans-serif**: `GTEestiProDisplay` (GT Eesti Pro Display), fallbacks: `Arial, sans-serif`. A humanist sans-serif from Grilli Type, self-hosted in Light (300), Regular (400), and Bold (700) weights. Used for navigation, captions, labels, body text, and all functional UI.
- **OpenType Features**: `font-feature-settings: "lnum"` appears across IvyPresto and GT Eesti styles — lining numerals ensure that prices, dates, and quantities sit on the text baseline rather than floating mid-height.
- **Google Font substitutions**: For IvyPresto Display — **Cormorant Garamond** (Light) preserves the delicate optical-size serif quality. For TT Livret Text — **Libre Baskerville** or **Playfair Display** at light weights. For GT Eesti Pro Display — **DM Sans** or **Nunito** preserves the humanist warmth without the geometric coldness of Inter.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 100px IvyPresto Light — hero quotations, campaign editorial openers, the brand's philosophical voice |
| `display` | 40px IvyPresto Light — section headings, collection titles, philosophy section anchors |
| `heading-section` | 18px TT Livret Text Light — editorial sub-headings, sustained prose anchors, long-read section leads |
| `heading-sub` | 14px GT Eesti Regular — product names on cards, navigation sub-items, sidebar labels |
| `body-large` | 20px GT Eesti Light — lead navigation links, homepage featured text, intro summaries |
| `body` | 18px GT Eesti Light — body paragraphs, product descriptions, article prose |
| `nav-link` | 16px GT Eesti Regular — desktop top navigation, footer links |
| `button-ui` | 13px GT Eesti Bold — CTA labels, action text. The only bold weight in the visible UI |
| `label` | 12px GT Eesti Regular / uppercase / 0.44px tracking — section taxonomy labels, navigation categories |
| `caption` | 12px GT Eesti Light / uppercase / 2.4px tracking — image bylines, editorial captions, artisan-attribution labels |

### Principles
- **Serif names ideas; sans handles commerce.** IvyPresto Display and TT Livret Text appear wherever Brunello Cucinelli is expressing philosophy, place, or craft. GT Eesti handles navigation, product, booking, and form.
- **Display weight is always light.** IvyPresto runs at weight 300 throughout — including at 100px. The delicacy is the point; a bold display serif would be a category error.
- **Lining numerals everywhere.** `font-feature-settings: "lnum"` appears across 14 of 19 typography styles in the dembrandt scan. Prices, measurements, and dates are always optically aligned.
- **Uppercase captions with 2.4px tracking** are the atelier label language. They appear on image bylines and section taxonomy — 12px, not smaller, because legibility and refinement are not in opposition.
- **GT Eesti Bold is the single weight escalation.** The 700-weight appears only in `{typography.button-ui}` — the system's only CTA text. All other GT Eesti roles use 300 or 400.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 16px (the most balanced anchor in the dembrandt common-values distribution; 10, 16, 20, 24px cluster around navigation and padding; 54 and 106px anchor section-level rhythm).

The system has two distinct registers: a compact 4–24px range for typography, padding, and component-internal rhythm, and a generous 54–106px range for inter-section breathing. The upper register is where the brand's editorial pace lives — at 106px between major page sections, the scroll feels like turning a page rather than scrolling a feed.

### Grid & Container
- Max content width: 1400–2100px (the two highest breakpoints in the 15-breakpoint system; the wide-desktop boundary is generous)
- Split-panel hero: the signature layout divides the viewport vertically between a warm greige editorial panel (philosophy, quote, artisan imagery) and a white commerce panel (collection, campaign CTA). This binary is the most recognisable structural element of the site.
- Product grid: editorial card layouts in 2–4 columns on desktop, generous gutters, no card chrome
- Navigation: full-width horizontal bar, centered wordmark, SVG icon system throughout

### Whitespace Philosophy
- **Solomeo breathing**: Section gaps at 54–106px (`{spacing.2xl}` to `{spacing.4xl}`) mirror the measured pace of the hilltop village the brand built as its living manifesto
- **Photography-first**: All campaign imagery is full-bleed and borderless; no container frame interrupts the garment or the landscape
- **Philosophy and commerce separated by surface**: warm greige for ideas, white for product — the visual distinction carries meaning, not just aesthetic interest

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Every surface — page canvas, product cards, editorial panels |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Input resting state, section rules |
| Button Outline (Level 1) | `1px solid {colors.border}` | Primary and secondary button borders |
| Dropdown Shell (Level 2) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Navigation dropdown overlay — single shadow instance in system |
| Focus Ring | `outline: 1px solid {colors.focus-ring}` | Form input focus state |

**Shadow Philosophy**: The Brunello Cucinelli design language is categorically flat. The one shadow in the entire dembrandt scan (low confidence, on a dropdown shell) is a navigational necessity, not a brand statement. Depth is expressed through the juxtaposition of surfaces — greige against white — and through photography. The garments are three-dimensional; the interface declines to compete.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Cards, images, editorial panels, all primary containers |
| `xs` | 2px | Buttons and minor UI controls — a concession to pixel-rendering, not a visual language decision |

The system is effectively rectilinear. The 2px radius on buttons was confirmed in the dembrandt borders scan with low confidence — it is cosmetic, not intentional. All photography is rectangular and edge-to-edge. The brand's visual vocabulary draws on Umbrian stone architecture: clean rectilinear forms, no decorative curves. Introducing meaningful border-radius would be a category error.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — `{colors.primary}` near-black fill, `{colors.on-primary}` white text, `{typography.button-ui}` GT Eesti Bold 13px, `{rounded.xs}` 2px corners, `10px 20px` padding, `1px solid {colors.border}` outline. Hover shifts to `{colors.primary-hover}`. Transition: `background-color 0.22s ease-in-out`. The only bold-weight text in the UI.
- **`button-secondary`** — Transparent fill, `{colors.ink}` text, same geometry and 1px border as primary. Hover fills `{colors.surface}`. Used for secondary discovery actions — "Discover More", "View Collection".
- **`button-ghost`** — Transparent, no border, `{typography.nav-link}` GT Eesti Regular 16px. Inline editorial links and tertiary navigation. Hover shifts text to `{colors.text-hover}`.

### Cards

Two card modes reflect the surface split: product cards on `{colors.background}` white, philosophy/editorial cards on `{colors.surface-warm}` greige. Neither variant uses shadow, border, or rounded corners. Photography sits edge-to-edge within the card region. Text appears in a clean type-only zone below: `{typography.heading-sub}` for the label, `{typography.body}` for supporting description.

### Inputs

Form fields and search: `{colors.background}` white fill, `border-bottom: 1px solid {colors.border}` at rest, 1px solid `{colors.focus-ring}` full-outline on focus, `{rounded.none}`, `{typography.body}` GT Eesti Light 18px. No background shift, no glow — a thickening of the underline rule is the only interaction signal.

### Badges / Tags

Taxonomy and category labels: transparent fill, `{colors.ink-muted}` text, `{typography.caption}` 12px GT Eesti Light uppercase 2.4px tracking. No chip background, no border, no radius. These are editorial marks — closer to a caption beneath a weave photograph than to a UI chip.

### Navigation

The Brunello Cucinelli nav is horizontal, full-width, with the brand wordmark centered and SVG icon navigation on either side. Header sits on `{colors.background}` white, no bottom border visible at rest. Navigation links in `{typography.nav-link}` GT Eesti Regular 16px. The mega-menu dropdown carries the one shadow in the system. Transition: `0.22s ease-in-out` on nav state changes.

## Do's and Don'ts

### Do
- Use IvyPresto Display at weight 300 for all editorial display headings — the light weight is non-negotiable; heavier weights are a category error
- Use GT Eesti Pro Display for all navigation, UI, form, and caption text — it is the system's functional voice
- Reserve `{typography.button-ui}` (GT Eesti Bold 700) exclusively for CTA labels — the only appearance of bold weight in the entire system
- Always apply `font-feature-settings: "lnum"` to styles showing prices, dates, or measurements
- Apply uppercase with 2.4px letter-spacing (`{typography.caption}`) to all taxonomy labels and image captions — this is the atelier label language
- Keep all photography full-bleed and rectangular — never round, never vignette, never frame
- Use `{colors.surface-warm}` greige panels for philosophy, editorial, and artisan content; reserve `{colors.background}` white for product and commerce
- Honor the large spacing jump to `{spacing.4xl}` (106px) for primary section-level breathing
- Allow motion at two speeds only: 0.22s for micro-interactions (buttons, nav), 1s for hero-level editorial transitions
- Use `{colors.ink}` as the sole CTA fill — the system has no chromatic accent; near-black is the brand's authority color

### Don't
- Don't use IvyPresto at a heavier weight — light is the brand voice; Medium or Regular would read as editorial genericness
- Don't introduce a chromatic brand accent — no rust, no terracotta, no gold. The warm palette is surface-level, not ink-level
- Don't add box-shadows, card elevation, or hover lifts to product or editorial cards — the brand-facing design is flat
- Don't use rounded corners beyond `{rounded.xs}` (2px) on any intentional design element — rectilinear is the shape language
- Don't mix the greige and white surface roles — `{colors.surface-warm}` is for philosophy and craft narrative, `{colors.background}` is for commerce and product
- Don't place typography over complex photographic regions without sufficient contrast — the system trusts light imagery over dark UI
- Don't letter-space body text (`{typography.body}`) — only captions and labels carry deliberate tracking
- Don't bold heading text — IvyPresto and TT Livret Text operate at weight 300 throughout; size alone carries hierarchy
- Don't crop photography to portrait thumbnails with visible container borders — always edge-to-edge within region
- Don't use more than one shadow depth — if a floating element needs depth, the 0px 0px 18px dropdown model is the ceiling

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Tiny | < 400px | Single column; minimal nav; hero type compressed |
| Mobile | 400–529px | Single column; hamburger nav; split-panel stacks vertically |
| Mobile Large | 530–599px | Minor layout adjustments; two-up teaser grid possible |
| Mobile XL | 600–767px | Two-up product grid; simplified nav; full-width editorial panels |
| Tablet | 768–895px | Navigation restores; 2-column product grid; split-panel visible |
| Tablet Large | 896–1023px | Wider margins; 2–3 column grid; expanded hero typography |
| Desktop | 1024–1279px | Full horizontal nav; 3-column product grid; full split-panel hero |
| Desktop Wide | 1280–1399px | Maximum content articulation; 3–4 column grids; full 106px section gaps |
| Large Desktop | ≥ 1400px | Max container; 4-column editorial grid; hero at full 100px display scale |

### Touch Targets
- Primary buttons: `10px 20px` padding + `{typography.button-ui}` line-height yields ~44px effective tap height — adequate minimum
- Navigation links: `{typography.nav-link}` 16px with surrounding whitespace meets 44px tap zone conventions
- Product cards: full image region is tappable, not just the label beneath
- Form inputs: full-width on mobile; 44px+ effective height maintained

### Collapsing Strategy
- **Navigation**: Full horizontal bar with centered wordmark → hamburger icon on mobile → full-screen slide-in overlay with GT Eesti nav links. The centered wordmark relocates to near-top.
- **Split-panel hero**: The greige/white vertical split becomes a stacked layout on mobile — philosophy panel above, commerce panel below. Each occupies full viewport width.
- **Type scale**: `{typography.display-hero}` scales from 100px toward 40–54px on mobile. `{typography.body}` holds at 18px. Captions maintain uppercase 2.4px tracking at 12px.
- **Spacing**: `{spacing.4xl}` (106px) inter-section gaps compress to `{spacing.2xl}` (54px) on mobile. The editorial breathing is preserved at reduced scale.
- **Product grid**: 3–4 column desktop collapses to 2-column tablet and single-column mobile. Photography proportions are maintained.

### Image Behavior
- All campaign photography is full-bleed at every breakpoint — no max-width cap on hero imagery
- Split-panel images adapt from side-by-side to stacked at tablet breakpoints, maintaining aspect ratios
- Product tile imagery uses consistent portrait conventions across breakpoints; no thumbnail cropping
- Artisan documentary photography (hands, weave close-ups, workshop shots) always presented edge-to-edge, never in a rounded container

---

## Agent Prompt Guide

### Quick Color Reference
- Background canvas: `{colors.background}` (`#ffffff`)
- Editorial canvas: `{colors.surface-warm}` (`#c8b89a`)
- Primary text: `{colors.ink}` (`#262626`)
- Secondary text: `{colors.ink-muted}` (`#565656`)
- Ghost / placeholder: `{colors.ink-quiet}` (`#989898`)
- CTA fill: `{colors.primary}` (`#262626`)
- CTA text: `{colors.on-primary}` (`#ffffff`)
- CTA hover: `{colors.primary-hover}` (`#3d3d3d`)
- Structural border: `{colors.border}` (`#262626`)
- Hairline divider: `{colors.border-subtle}` (`#f2f2f2`)

### Example Component Prompts

- "Build a Brunello Cucinelli editorial hero in the split-panel format. Left panel: `{colors.surface-warm}` (`#c8b89a`) greige background, centered content. Top eyebrow in `{typography.caption}` (12px GT Eesti Light uppercase 2.4px tracking, `{colors.on-primary}`). Main quote in `{typography.display-hero}` (100px IvyPresto Display weight 300, `{colors.on-primary}`, line-height 1.11, `font-feature-settings: 'lnum'`). Attribution in `{typography.caption}` below, italic. Right panel: `{colors.background}` white, full-bleed campaign photography edge-to-edge. No borders, no shadows, no decorative elements."

- "Design a Brunello Cucinelli primary CTA button: `{colors.primary}` fill (`#262626`), `{colors.on-primary}` white text, `{typography.button-ui}` (13px GT Eesti Pro Display Bold, `font-feature-settings: 'lnum'`), `border-radius: 2px`, `padding: 10px 20px`, `border: 1px solid {colors.border}`. Hover shifts fill to `{colors.primary-hover}` via `transition: background-color 0.22s ease-in-out`. No scale, no lift, no shadow on hover."

- "Create a Brunello Cucinelli product card on `{colors.background}` white. Full-width portrait campaign photograph edge-to-edge at top (no border, no shadow, no rounding). Below: `{typography.caption}` category label in `{colors.ink-muted}` uppercase 2.4px tracking, then `{typography.heading-sub}` product name (14px GT Eesti Regular, `{colors.ink}`), then `{typography.body}` brief descriptor (18px GT Eesti Light, `{colors.ink-muted}`, line-height 1.56). No card chrome — frame, not container."

- "Build the Brunello Cucinelli navigation bar on `{colors.background}` white. Centered SVG wordmark. Left: hamburger/menu icon + primary nav links in `{typography.nav-link}` (16px GT Eesti Regular, `{colors.ink}`). Right: search, wishlist, bag icons as SVG. Hover on nav links transitions `color` from `{colors.ink}` to `{colors.text-hover}` in `0.22s ease-in-out`. No underline animation, no background fill on hover, no bottom border on the bar itself."

- "Design a philosophy editorial section on `{colors.surface-warm}` greige. Full-section background `#c8b89a`. Centered content column at max-width 720px. Opening paragraph in `{typography.heading-section}` (18px TT Livret Text Light, `{colors.on-primary}`, line-height 1.56). Followed by a `{typography.display}` pull-quote in IvyPresto Display 40px weight 300. CTA link below in `{typography.button-ui}` GT Eesti Bold with an underline rule. Padding: `{spacing.4xl}` (106px) top and bottom."

- "Create a Brunello Cucinelli form input: `{colors.background}` white fill, `border: none` on three sides, `border-bottom: 1px solid {colors.border}` at rest, `{rounded.none}`, `{typography.body}` (18px GT Eesti Light, `{colors.ink}`), `{colors.ink-quiet}` placeholder. Focus: `border-bottom: 1px solid {colors.focus-ring}` + `outline: 1px solid {colors.focus-ring}`. No glow, no background change, no box-shadow. `font-feature-settings: 'lnum'` on all numeric input types."

### Iteration Guide

1. Begin with the surface split decision: is this element philosophical (editorial, craft narrative, Solomeo reference) or commercial (product, category, transaction)? Philosophical elements live on `{colors.surface-warm}` greige. Commercial elements live on `{colors.background}` white. Do not mix.
2. Select typeface by register: IvyPresto Display Light for all display-scale editorial moments; TT Livret Text Light for sustained prose; GT Eesti Pro Display for every navigation, caption, label, and CTA.
3. IvyPresto always at weight 300. Apply `font-feature-settings: "lnum"` to all type styles carrying numerics. Positive letter-spacing only on `{typography.caption}` and `{typography.label}` — body text has zero tracking.
4. The only bold weight in the system is `{typography.button-ui}` (GT Eesti 700). If anything else in the layout is bold, remove the weight escalation.
5. Buttons are near-sharp rectangles (`{rounded.xs}`, 2px) with 0.22s ease-in-out transitions. The only filled-button color is `{colors.primary}` near-black. No accent fills, no color CTAs.
6. Photography always rectangular and edge-to-edge — never inset, never rounded, never vignetted. The image is the argument.
7. Use `{spacing.4xl}` (106px) for primary section-level breathing on desktop. The large spacing gap signals editorial pace, not wasted screen real estate.
8. Motion at two speeds only: 0.22s for micro-interactions, 1s for hero-level editorial fades. The `cubic-bezier(0.25, 0.1, 0.25, 1)` easing (confirmed from dembrandt) governs hero transitions; `ease-in-out` governs everything else.

---

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