---
version: alpha
name: "Van Cleef & Arpels"
description: "Ivory white and sage cream on Janson Text, a poetry-of-nature haute joaillerie language refined to its most restrained digital expression"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#eef2e3"          # sage-ivory green, manifest theme color — used for subtle panels
  surface-warm: "#f5f5f5"     # near-white tinted for secondary zones and footer areas

  # Text / ink
  ink: "#222222"              # near-black for all primary text (VCA class: vca-navigation-burger)
  ink-secondary: "#757575"    # mid-grey for secondary labels, captions (vca-footer-links-link)
  ink-muted: "#7d7d7d"        # muted grey for fine print and tertiary text
  on-background: "#222222"
  on-surface: "#222222"
  on-primary: "#ffffff"       # white text on dark CTAs

  # Brand accent — VCA uses near-black as primary with gold as secondary luxury signal
  primary: "#222222"          # near-black: primary CTAs and strong UI chrome
  primary-container: "#eef2e3" # sage-ivory container for accent tinted backgrounds

  # State / interaction
  text-hover: "#292929"       # derived from palette hover — ink deepens slightly
  focus-ring: "#222222"       # matches brand ink for focus indicator
  focus-tint: "#eef2e3"       # sage-cream tint on focus fill

  # Semantic
  error: "#c0392b"            # standard form error red /* estimated */

  # Borders & dividers
  border: "#e6e6e6"           # light rule hairline — from border data rgb(230,230,230)
  border-dark: "#222222"      # strong button outline and nav rule
  border-input: "#454545"     # input bottom-border from extraction rgb(69,69,69)

  # Shadow tints
  shadow-soft: "#cccccc"      # from extraction: rgb(204,204,204) 0px 0px 5px — the only shadow

typography:
  # VCA uses Janson Text (classic old-style serif, self-hosted) for all editorial display
  # and Maison Neue / Maison Neue Book (self-hosted grotesk) for all UI chrome.
  # Closest Google Fonts: Cormorant (Janson Text) / EB Garamond; DM Sans / Jost (Maison Neue)
  display-hero:
    fontFamily: "Janson Text, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: 0px
  display:
    fontFamily: "Janson Text, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.29
    letterSpacing: 0px
  heading-section:
    fontFamily: "Janson Text, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Janson Text, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.31
    letterSpacing: 0px
  body-large:
    fontFamily: "Janson Text, Cormorant, Georgia, Times New Roman, serif"
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Maison Neue Book, Maison Neue, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.88
    letterSpacing: 0px
  nav-link:
    fontFamily: "Maison Neue, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.54
    letterSpacing: 0px
  button-ui:
    fontFamily: "Maison Neue Book, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.54
    letterSpacing: 1.5px
  label-eyebrow:
    fontFamily: "Maison Neue, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  caption:
    fontFamily: "Maison Neue Book, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 0px
  caption-uppercase:
    fontFamily: "Maison Neue Book, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.67
    letterSpacing: 1.5px
  label-small:
    fontFamily: "Maison Neue, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 3.0
    letterSpacing: 1px

spacing:
  xs: 5px
  sm: 10px
  md: 20px
  lg: 30px
  xl: 40px
  2xl: 60px
  3xl: 90px
  4xl: 120px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 30px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 10px 30px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 30px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 9px 30px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border-input}"
    rounded: "{rounded.none}"
    padding: 10px 15px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 15px
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.none}"
    padding: 0px
  badge-tag:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.caption-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 10px 0px
  nav-item-hover:
    textColor: "{colors.text-hover}"
    typography: "{typography.nav-link}"
    padding: 10px 0px
---

# Van Cleef & Arpels Design System

## Overview

The Van Cleef & Arpels digital presence is a fairy-tale maison rendered in restraint — ivory white canvas punctuated by sage-green bloom (`{colors.surface}`), presided over by Janson Text, the old-style serif whose rounded ball terminals and mild contrast carry the warmth of a jeweller's handwritten poem. The homepage does not merchandise; it enchants. Full-bleed editorial campaigns give way to white breathing rooms, where a 45px Janson heading sits in complete stillness. Everything is measured. Nothing crowds.

The typographic soul of the brand is the pairing of two proprietary faces: Janson Text for the world of narrative — collection names, story headlines, editorial moments — and Maison Neue for the world of service — navigation, buttons, captions, filters. Where Hermès uses its serif with severe Didot contrast, VCA chooses Janson's softer, more lyrical old-style rhythm. At display scale the serif has a pastoral gentleness; at 45px in weight 400 it reads like calligraphy in stone. The letter-spacing is kept at zero even at large sizes — the Janson proportions are trusted to carry their own air.

The accent strategy is unusual. There is no chromatic brand colour in the UI — no orange, no gold hex. Instead, `{colors.primary}` is the near-black `{colors.ink}`, and the luxury signal is carried through the sage-cream `{colors.surface}` background note, the quality of typeface, and the density of negative space. Gold belongs to the jewellery in the photography, not to the pixels around it. This restraint is itself a luxury argument: the Maison does not compete with its own creations. The singular shadow, a whisper of `{colors.shadow-soft}` at 5px spread, appears only on the occasional overlay — everything else is flat. Border radius is binary: zero for every structural element, pill only for the rare interactive tag.

**Key Characteristics:**
- Pure white canvas (`{colors.background}`) with sage-ivory green panels (`{colors.surface}`) from the brand's manifest theme colour — a botanical reference to the Alhambra motif
- No chromatic accent: `{colors.primary}` is near-black — luxury is communicated through typography and proportion, not colour
- Dual-typeface system: Janson Text old-style serif for all editorial and display, Maison Neue grotesk for all UI chrome
- Display serif at 45px, weight 400, zero letter-spacing — pastoral and unhurried, never condensed or tightly tracked
- All button labels and filter tags in uppercase with 1.5px tracking (`{typography.button-ui}`) — the hallmark rhythm of haute joaillerie labels
- Border-radius binary: `{rounded.none}` for all structural elements, `{rounded.pill}` only for category tags
- Single shadow in the system — `{colors.shadow-soft}` at 5px on overlays only; all surfaces are otherwise flat
- Generously proportioned spacing: `{spacing.md}` (20px) base, `{spacing.3xl}` (90px) between editorial sections
- Full-bleed maison photography presented in rectangular crops — no radius, no shadow overlays, no decorative frames
- Navigation in Maison Neue at 16px with no tracking — neutral grotesk service contrasting the serif's prestige
- The animateButterfly keyframe animation: a 3-second ease-in-out signature motion referencing VCA's fairy-tale iconography
- Category and filter badges in `{colors.surface}` sage-cream, uppercase 1.5px tracking — botanical label aesthetic

## Colors

### Canvas & Surface
- **Pure White** (`{colors.background}`): The universal page canvas. Every editorial section, product tile, and panel background defaults to white — unwarmed, unmodified.
- **Sage Ivory Green** (`{colors.surface}`): VCA's manifest theme colour. Used for secondary editorial panels, promotional banners, filter tag fills, and the subtle botanical wash that connects the digital identity to the Alhambra clover. It is pale enough to read as cream in most contexts, but carries a faint green coolness that distinguishes it from Hermès ivory or Chanel beige.
- **Near-White** (`{colors.surface-warm}`): A neutral `{colors.surface-warm}` wash for footer areas, form fields on dark sections, and tertiary surface treatment.

### Text / Ink
- **Primary Ink** (`{colors.ink}`): Near-black `#222222` for all primary text and all button fills. Warmer and more printed than pure `#000000`.
- **Secondary Ink** (`{colors.ink-secondary}`): Mid-grey for footer links, secondary metadata, and tertiary UI labels.
- **Muted Ink** (`{colors.ink-muted}`): Fine print and subdued captions — a step lighter than secondary ink.

### Brand Accent
- **Near-Black as Primary** (`{colors.primary}`): VCA does not use a chromatic accent colour in its UI. The primary CTA fill is `{colors.primary}` — the same near-black as the body ink — making buttons feel stamped rather than coloured. Brand chromatic identity is earned through jewellery photography, not UI pigment.
- **Sage Container** (`{colors.primary-container}`): The botanical sage cream used for lightly tinted badge backgrounds and promotional states.

### Borders & Dividers
- **Hairline Rule** (`{colors.border}`): A neutral `#e6e6e6` for section dividers, list separators, and editorial margins. Close to invisible — a breath, not a boundary.
- **Strong Rule** (`{colors.border-dark}`): The same near-black as `{colors.ink}` for button outlines and the nav masthead separator.
- **Input Border** (`{colors.border-input}`): A slightly deeper grey for underline-style input fields, sitting between hairline and strong.

### Shadow System
The dembrandt extraction found a single shadow value: `rgb(204, 204, 204) 0px 0px 5px 0px` on the cookie overlay — represented here as `{colors.shadow-soft}`. There are no product-tile shadows, no nav drop shadows, no card elevation. VCA communicates depth through photography contrast and the sage-cream / white surface pairing alone.

## Typography

### Font Family
- **Editorial / Display**: `"Janson Text"`, fallback `Cormorant, Georgia, Times New Roman, serif`. Janson Text is a 17th-century revival old-style — rounder ball terminals, milder stroke contrast than Didot, warmer rhythm than Bodoni. Self-hosted by VCA (woff2: `f16ef082-3ca6-4e62-a8b2-ffb4cf30f949.woff2`). Closest Google Font substitute: Cormorant or EB Garamond for editorial work; Libre Baskerville for body copy at smaller sizes.
- **UI / Chrome**: `"Maison Neue Book"` and `"Maison Neue"`, fallback `DM Sans, Helvetica Neue, Arial, sans-serif`. A contemporary geometric grotesk used for all navigation, button labels, captions, filters, and form chrome. Self-hosted (woff2: `MaisonNeue-Book.woff2`, `MaisonNeueWEB-Demi.woff2`). DM Sans or Jost are reasonable open substitutes.
- **OpenType Features**: Standard ligatures on body copy; no discretionary features extracted. Letter-spacing on UI chrome is set via `letter-spacing` CSS rather than opentype kerning.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines — 45px Janson, collection names, campaign phrases |
| `display` | Secondary editorial titles — 35px Janson, story chapter headings |
| `heading-section` | Section openers — 30px Janson, collection category names |
| `heading-sub` | Sub-section headings, pull-quotes — 26px Janson |
| `body-large` | Lead editorial paragraphs and expanded product descriptions — 25px Janson |
| `body` | Standard body copy, product detail text — 16px Maison Neue Book |
| `nav-link` | Primary navigation — 16px Maison Neue, no tracking |
| `button-ui` | Button labels, CTA text, filter tags — 13px Maison Neue Book, uppercase, 1.5px tracking |
| `label-eyebrow` | Category eyebrows above headings — 18px Maison Neue, uppercase, 2px tracking |
| `caption` | Image captions, fine print — 12px Maison Neue Book |
| `caption-uppercase` | Uppercase badge labels — 12px, 1.5px tracking |
| `label-small` | Smallest UI chrome — 10px, uppercase, 1px tracking |

### Principles
- **Janson for the world of dreams, Maison Neue for the world of service**: the serif carries every story headline, collection name, and editorial pull-quote; the grotesk handles every button, nav link, caption, and form field.
- **Display at scale without tracking**: Janson at 45px is set at `letterSpacing: 0px` — the old-style proportions are trusted to breathe at large sizes. Tight tracking would collapse the serifs' grace.
- **Uppercase chrome with measured tracking**: all button labels at 1.5px, eyebrows at 2px — the rhythm of a Maison label, never sentence-case in interaction copy.
- **Serif never descends to UI scale**: Janson does not appear in navigation or form fields. Its authority depends on operating at headline and editorial scales only.
- **No bold editorial weight**: Janson runs at weight 400 across all display sizes. There is no 700 in VCA's editorial voice — richness comes from size and spacing, not weight.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 5px (VCA's dominant extracted value — the scale is slightly finer-grained than an 8px system).

VCA leans toward generous sectional rhythm — `{spacing.2xl}` (60px) between inline editorial zones, `{spacing.3xl}` (90px) between major sections. The 90px and 120px values appear frequently in campaign-scale modules. Unlike a product-led e-commerce site that minimises whitespace to expose inventory, VCA treats negative space as a creative material: the pause between a campaign image and its heading is as choreographed as the jewellery setting itself.

### Grid & Container
- Max content width: approximately 1595–1625px (from spacing extraction) for full-bleed editorial; 1266px for constrained content zones
- Product grid: 3-up or 4-up on large desktop with consistent `{spacing.md}` gutters; 2-up on tablet; 1-up on mobile
- Editorial columns: centered text columns at 600–800px wide for prose; never full-width body paragraphs
- Hero modules: 100vw full-bleed photography with no container margins

### Whitespace Philosophy
- Major editorial transitions use `{spacing.3xl}` (90px) or `{spacing.4xl}` (120px) — time to register the previous image before the next
- Navigation and footer chrome are compact; whitespace is reserved entirely for content and photography
- Product tiles are never edge-to-edge — gutters of `{spacing.md}`–`{spacing.lg}` always breathe between items
- Inline editorial copy sections are generously padded — reading at leisure, not scanning for price

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `box-shadow: none` | Default — all product cards, editorial panels, nav at rest |
| Hairline (Level 1) | `border-top: 1px solid {colors.border}` | Section dividers, list separators, editorial rules |
| Strong Rule (Level 2) | `border: 1px solid {colors.border-dark}` | Secondary button outline, masthead separator |
| Input Underline (Level 3) | `border-bottom: 1px solid {colors.border-input}` | Form field indicators at rest |
| Overlay (Level 4) | `box-shadow: 0px 0px 5px 0px {colors.shadow-soft}` | Modal / cookie overlay — the only shadow in the system |

**Shadow Philosophy**: The dembrandt extraction returned a single shadow — `rgb(204, 204, 204) 0px 0px 5px` on the cookie consent overlay. VCA is functionally shadow-free across all product and editorial surfaces. Depth is communicated exclusively through the sage-green / white surface contrast, full-bleed photography, and the dark stroke of `{colors.border-dark}` used as a strong rule. No card lifts, no nav drop shadows, no image frames. The jewellery catches the light; the frame does not.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — buttons, inputs, image crops, cards, modals |
| `pill` | 9999px | Interactive category filter tags and rare badge elements |

VCA is rigorously square at the structural level. Buttons are sharp rectangles, inputs are open underline fields, image crops are full-bleed rectangles. Only the interactive filter tags (e.g. collection category filters) use the pill form — a catalogue-label shape that echoes the physical hang-tag on a Maison piece. There are no mid-range radius values (4–16px) anywhere in the system.

## Components

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

### Button Variants

- **`button-primary`** — Near-black fill (`{colors.primary}`), white label, uppercase 1.5px tracking, zero radius, 10px 30px padding. The primary CTA is stamped — it communicates authority through weight and proportion rather than colour.
- **`button-primary-hover`** — Fills to `{colors.text-hover}`, a barely-lighter near-black — the transition reads as depth, not colour change.
- **`button-secondary`** — Transparent background, `{colors.ink}` label, `1px solid {colors.border-dark}` outline, same typography. For secondary navigation actions — "View collection", "Discover more".
- **`button-secondary-hover`** — Fills to `{colors.primary}` near-black with white label — an inversion that communicates decisiveness.
- **`button-ghost`** — No border, no background. Inline link-style CTA. Used for tertiary editorial moments — "Read the story", "Learn more".

### Cards

- **`card`** — Zero padding, zero radius, no fill, no shadow. Product tiles are pure photography on the white canvas; the tile boundary is the photography edge.
- **`card-surface`** — Sage-ivory (`{colors.surface}`) background with 20px padding for promotional editorial panels. Still no shadow.

### Inputs

- **`input`** — White background, dark underline border (`{colors.border-input}`), zero radius, 10px 15px padding. Consistent with the flat-and-minimal UI contract.
- **`input-focus`** — Underline shifts to `{colors.focus-ring}` near-black to signal active state. No box-shadow or colour fill on focus.

### Badges / Tags

- **`badge`** — Sage-cream background (`{colors.surface}`), uppercase 1.5px tracking, zero radius. Used for category labels — the botanical-tag format references a physical Maison label.
- **`badge-tag`** — Pill-form variant with `{colors.surface-warm}` fill. For interactive filter selectors where the pill shape communicates toggleability.

### Navigation

- White masthead with `1px solid {colors.border}` bottom rule
- Logotype "Van Cleef & Arpels" in Janson Text, centered, at a modest heading scale
- Primary nav links in Maison Neue at 16px, no tracking, `{colors.ink}` at rest; hover to `{colors.text-hover}`
- Secondary sub-nav and utility links in Maison Neue Book at 13px, uppercase, 1.5px tracking
- Mobile: hamburger (`vca-navigation-burger`) → full-screen overlay with vertical nav, generous `{spacing.lg}` row padding

## Do's and Don'ts

### Do
- Use Janson Text for all display and editorial headlines 24px and above — old-style warmth is the visual voice of the Maison
- Set all button labels, filter tags, and eyebrows in uppercase Maison Neue with explicit letter-spacing (`{typography.button-ui}` at 1.5px) — the hallmark rhythm
- Keep `{colors.primary}` near-black reserved for primary CTA fills only — it doubles as the brand's "no-chromatic-accent" strategy
- Use the sage-cream `{colors.surface}` as the only non-white background tone — it is the botanical signal and must not be supplemented with arbitrary pastels
- Maintain `{rounded.none}` for all structural elements — buttons, inputs, cards, modals, image crops must be sharp rectangles
- Allow product photography to fill its container with `object-fit: cover` and no radius — the jewellery is the subject, never the frame
- Use `{spacing.3xl}`–`{spacing.4xl}` between major editorial sections — the pause is the luxury signal
- Keep display Janson at weight 400 and zero letter-spacing — do not bold or track the serif at large sizes
- Reference the butterfly motif (`animateButterfly`) for decorative motion only — 3s ease-in-out, never faster than 0.5s for UI transitions

### Don't
- Don't introduce a chromatic accent colour (gold hex, warm brown, VCA green at saturation) — the system deliberately holds all UI chrome at neutral near-black and grey
- Don't add drop shadows to product tiles, cards, or the navigation masthead — the one shadow in the system (modal overlay) must remain exceptional
- Don't round buttons, inputs, or image containers to mid-range values (4–16px) — the system is binary: `{rounded.none}` or `{rounded.pill}` for filter tags only
- Don't use Janson Text below 24px — at small sizes the old-style serifs collapse; switch to Maison Neue for body and caption scales
- Don't bold Janson in editorial contexts — weight 400 is the only weight; bold serif would break the pastoral restraint of the voice
- Don't use sentence-case for button labels or filter tags — uppercase with tracking is the Maison's UI grammar; lowercase would read as a different brand
- Don't introduce gradients as decorative surface treatments — the system is entirely flat and gradient-free
- Don't substitute Maison Neue with a display typeface or a high-contrast grotesque — the UI grotesk must remain neutral to let the serif lead
- Don't overcrowd product grids — always preserve a `{spacing.md}` minimum gutter between tiles; they must breathe

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <600px | Single column, hamburger nav, hero photography stacks to full height |
| Mobile | 600–768px | Single column continues; editorial copy at 14px Maison Neue |
| Tablet | 768–900px | 2-up product grid; display Janson scales to 26px; nav condensed |
| Desktop | 900–1266px | Full horizontal nav; 3-up product grid; Janson hero at 35–45px |
| Large Desktop | >1266px | Maximum container ~1595px; 4-up product grid; full editorial breathing |

### Touch Targets
- Primary buttons: minimum 44px tap height via `{spacing.md}` vertical padding with 13px line-height
- Navigation links: full-row tappable in mobile overlay — generous `{spacing.lg}` row padding
- Product tiles: entire image + title zone is tappable; no explicit tap indicator overlaid on photography

### Collapsing Strategy
- **Nav**: Horizontal primary nav collapses to `vca-navigation-burger` hamburger → full-screen overlay with vertical nav; uppercase tracking and near-black ink retained at all breakpoints
- **Hero**: Full-bleed photography scales via `object-fit: cover`; Janson headline reduces from 45px to 30px on tablet, 26px on mobile — never truncated to a single short word
- **Product grid**: 4-up → 3-up → 2-up → 1-up across breakpoints; gutters reduce from `{spacing.lg}` to `{spacing.sm}` on mobile
- **Editorial columns**: 600–800px text columns go full-width on mobile with 20px horizontal margin (`{spacing.md}`)
- **Footer**: Multi-column link grid collapses to stacked vertical list; `1px solid {colors.border}` section rules maintained

### Image Behavior
- Photography always presented in native rectangular aspect ratio — no circle or square crops at any breakpoint
- Full-bleed hero modules use `object-fit: cover` with `object-position` preserving the jewellery focal point
- Product images always on white — never staged on coloured backgrounds in responsive contexts
- The VCA wordmark scales uniformly — no simplification at mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary Text: `{colors.ink}`
- Near-Black CTA: `{colors.primary}`
- Secondary Text: `{colors.ink-secondary}`
- Sage Botanical Panel: `{colors.surface}`
- Hairline Border: `{colors.border}`
- Strong Rule: `{colors.border-dark}`
- Input Underline: `{colors.border-input}`

### Example Component Prompts

- "Create a Van Cleef & Arpels campaign hero on `{colors.background}` with full-viewport-height editorial jewellery photography. Overlay a centred `{typography.display-hero}` Janson Text headline (45px, weight 400, letterSpacing 0px, `{colors.background}` white text) — a collection name or poetic phrase. Below it: a `{typography.button-ui}` CTA button (`{colors.primary}` near-black fill, white label, uppercase, 1.5px tracking, `{rounded.none}`, 10px 30px padding). No shadows, no radius, no gradient scrim — photography contrast carries legibility."
- "Design a Van Cleef & Arpels product tile — full-width jewellery photography on `{colors.background}` white, zero radius, zero shadow. Below the image: a `{typography.caption-uppercase}` Maison Neue category label in `{colors.ink-secondary}` (12px, uppercase, 1.5px tracking), then a `{typography.heading-section}` Janson Text product name (30px, weight 400, `{colors.ink}`), then a `{typography.body}` price in Maison Neue (16px, `{colors.ink}`). On hover: the product name slightly deepens to `{colors.text-hover}`. No shadow, no scale transform."
- "Build a primary CTA button — `{colors.primary}` near-black background, `{colors.on-primary}` white label, `{typography.button-ui}` (13px Maison Neue Book, uppercase, 1.5px tracking), `{rounded.none}`, 10px 30px padding. Hover: background to `{colors.text-hover}` barely lighter near-black. No shadow, no outline."
- "Create a Van Cleef & Arpels navigation bar on `{colors.background}` with a `1px solid {colors.border}` bottom rule. Centre the wordmark 'Van Cleef & Arpels' in `{typography.heading-sub}` Janson Text. Place primary nav links left and right in `{typography.nav-link}` Maison Neue (16px, no tracking, `{colors.ink}`). Include search and wishlist icons right-aligned. Hover state: link colour to `{colors.text-hover}`. Mobile: hamburger icon → full-screen `{colors.background}` overlay."
- "Design a Van Cleef & Arpels collection filter bar on `{colors.background}` with horizontally scrolling pill tags — each tag in `{typography.caption-uppercase}` Maison Neue Book (12px, uppercase, 1.5px tracking), `{colors.surface}` sage-cream fill, `{colors.ink}` text, `{rounded.pill}`, 4px 10px padding, no border. Active state: fill to `{colors.primary}` near-black with `{colors.on-primary}` white text. No shadow on any state."
- "Create a Van Cleef & Arpels editorial text section on `{colors.background}` with `{spacing.3xl}` (90px) vertical padding. Centre a `{typography.label-eyebrow}` Maison Neue category label (18px, uppercase, 2px tracking, `{colors.ink-secondary}`), then a `{typography.display}` Janson Text headline (35px, weight 400, `{colors.ink}`), then a max-width-700px `{typography.body}` paragraph in Maison Neue Book (16px, `{colors.ink}`, line-height 1.88). No decorative dividers, no background colour, no gradients."

### Iteration Guide

1. Start from `{colors.background}` pure white — all editorial surfaces are unmodified white. Secondary panels use `{colors.surface}` sage-ivory only for the botanical accent.
2. There is no chromatic brand colour in the pixel layer. `{colors.primary}` near-black fills CTAs. Gold lives exclusively in the photography.
3. Janson Text for display (24px and above, weight 400, zero tracking), Maison Neue for UI (all navigation, buttons, captions — uppercase with 1.5px tracking).
4. Border radius is binary: `{rounded.none}` for everything structural, `{rounded.pill}` only for interactive filter tags.
5. Shadow budget is near-zero: `{colors.shadow-soft}` at 5px spread only on modal overlays. No tile shadows, no nav drop shadows.
6. Section transitions breathe at `{spacing.3xl}` (90px) minimum — the pause between editorial zones is a design element.
7. All button labels, filter text, and eyebrow copy are uppercase with explicit letter-spacing — never sentence-case in VCA's UI grammar.
8. Photography is always rectangular, full-bleed, and zero-radius. No circle crops, no shadow frames, no coloured overlays.
9. The sage-cream `{colors.surface}` is the sole chromatic variation from white — do not supplement with other pastels or neutrals.
10. The butterfly animation (`animateButterfly`, 3s ease-in-out) is a Maison motif — use it only for decorative brand moments, never for loading spinners or transactional feedback.

---

## 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 Van Cleef & Arpels. Brand names and trademarks belong to their respective owners.