---
version: alpha
name: "Cartier"
description: "Cartier red on white, a commissioned Didot-class serif for jeweler's precision, and an atelier restraint where a single scarlet stroke is worth more than a thousand decorative elements"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f5f2"           # ivory parchment panel for secondary sections /* estimated */
  surface-dark: "#1a1a1a"      # near-black footer and inverse-surface backgrounds /* estimated */

  # Text / ink
  ink: "#1a1a1a"               # near-black for all primary text — warmer than pure black /* estimated */
  ink-muted: "#767676"         # secondary labels, captions, fine print /* estimated */
  on-background: "#1a1a1a"
  on-surface: "#1a1a1a"
  on-primary: "#ffffff"        # white text and icons on Cartier Red surfaces

  # Brand accent — the iconic Cartier Red
  primary: "#c41230"           # Cartier Red, the maison's signature lacquer /* estimated */
  primary-dark: "#9b0e25"      # deeper scarlet for hover states /* estimated */
  primary-container: "#f5d9dd" # pale rose wash for subtle tinted backgrounds /* estimated */

  # Gold accent — jewel-house warmth
  gold: "#b8966e"              # muted champagne gold for ornamental rules, dividers /* estimated */
  gold-light: "#e8d5b7"        # pale gold wash for hover backgrounds on dark surfaces /* estimated */

  # State / interaction
  text-hover: "#c41230"        # links shift to Cartier Red on hover /* estimated */
  focus-ring: "#c41230"        # red focus indicator — matches brand accent /* estimated */

  # Semantic
  error: "#9b0e25"             # deep scarlet for form errors — brand-coherent /* estimated */

  # Borders & dividers
  border: "#ddd9d3"            # warm hairline, barely-there between sections /* estimated */
  border-dark: "#1a1a1a"       # strong rule beneath the masthead, secondary button outlines /* estimated */
  border-gold: "#b8966e"       # gold hairline for ornamental dividers and jewelry tile frames /* estimated */

  # Shadow tints
  shadow-soft: "#d4cdc5"       # warm-tinted shadow for rare card elevation /* estimated */

typography:
  # Cartier uses a commissioned Didot-class serif (Cartier) for all display and editorial text
  # and a refined geometric sans for navigational and UI chrome.
  # Closest Google Font: Cormorant Garamond or EB Garamond (serif); Jost or Raleway (sans)
  display-hero:
    fontFamily: "Cartier, Cormorant Garamond, EB Garamond, Georgia, serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -1.5px
  display:
    fontFamily: "Cartier, Cormorant Garamond, EB Garamond, Georgia, serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -1.0px
  heading-section:
    fontFamily: "Cartier, Cormorant Garamond, EB Garamond, Georgia, serif"
    fontSize: 36px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "Cartier, Cormorant Garamond, EB Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.25px
  body-large:
    fontFamily: "Cartier Sans, Jost, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.1px
  body:
    fontFamily: "Cartier Sans, Jost, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0.1px
  nav-link:
    fontFamily: "Cartier Sans, Jost, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.5px
  button-ui:
    fontFamily: "Cartier Sans, Jost, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px
  caption:
    fontFamily: "Cartier Sans, Jost, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 300
    lineHeight: 1.4
    letterSpacing: 0.5px
  label-eyebrow:
    fontFamily: "Cartier Sans, Jost, Raleway, Helvetica Neue, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 3px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 80px
  3xl: 120px
  4xl: 160px

rounded:
  none: 0px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 36px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 36px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    borderColor: "{colors.border-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 36px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-gold}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  badge-gold:
    backgroundColor: "{colors.gold-light}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav-item:
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
  nav-item-hover:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
---

# Cartier Design System

## Overview

The Cartier digital presence is a Place Vendôme vitrine rendered in pixels — white canvas absolute, perforated by a single scarlet signature (`{colors.primary}`) and anchored by a Didot-class serif of uncommon hairline refinement. Cartier does not use its interface to explain. A founding jeweler of 1847, it communicates through the precision of a single red lacquer accent, through the hairline stroke of an S-curved serif letterform, through the near-silence of margins that dwarf their content. The homepage is a campaign installation, not a catalogue. Full-bleed photography of a diamond bracelet on white stone arrives before any button, any label, any call to action. Purchase is incidental; the experience is designed first.

Typography carries the entire prestige burden. The commissioned `{typography.display-hero}` serif sits at 80px weight 300 — hairline contrast that reads closer to engraved platinum than digital type. These display letterforms are Didot descendants: razor thin horizontals, emphatic vertical strokes, ball terminals with the precision of a lapidary tool. The ui sans runs opposite — light geometric weight (300), uppercase with generous tracking (`{typography.button-ui}` at 2px), stamped across every navigation link, every button, every product label. Upper-case plus tracking is the Cartier UI grammar. The effect, pairing hairline Didot with light-tracked geometric sans, is one of coordinated restraint — two instruments tuned to the same frequency of luxury.

The red (`{colors.primary}`) earns its authority through discipline. It appears on primary CTAs, on hover states, and nowhere else. It does not fill sections. It does not bleed into backgrounds. It fires once — on the button, on the link hover, on the focus ring — and disappears, so the eye registers it as a maison stamp rather than a design convention. The gold (`{colors.gold}`) is subtler still: hairline ornamental rules, jewelry tile frames, and the occasional divider beneath a section heading. Everything else is white (`{colors.background}`), ivory parchment (`{colors.surface}`), and near-black (`{colors.ink}`). The desaturated field is what makes the red incandescent.

**Key Characteristics:**
- White canvas (`{colors.background}`) with ivory parchment panels (`{colors.surface}`) as the only surface variation
- Cartier Red (`{colors.primary}`) reserved exclusively for primary CTAs, hover states, and focus indicators — its scarcity amplifies every appearance
- Champagne gold (`{colors.gold}`) as a secondary ornamental accent for hairline rules, jewelry tile borders, and dividers
- Dual-typeface system: commissioned Didot-class serif for editorial grandeur, light geometric sans for all UI chrome
- Display serif at extreme weight 300 and scale 80px — hairline strokes function as engraved platinum letterpress
- All navigation links, button labels, and eyebrows in uppercase with wide tracking (`{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 3px)
- Border-radius is binary: `{rounded.none}` for every structural element, `{rounded.pill}` only for rare promotional tags
- Zero drop shadows across the entire system — depth is communicated through photographic contrast and surface layering
- Full-bleed editorial photography of jewelry against stone, marble, and white — never rounded crops, never drop shadows
- Generous maison-scale whitespace: `{spacing.2xl}`–`{spacing.4xl}` between content sections
- Near-black ink (`{colors.ink}`) rather than pure `#000000` — warm like engraved letterpress, not cold like a screen
- Gold hairline dividers (`{colors.border-gold}`) used ornamentally beneath section headings and between jewelry collection tiles

## Colors

### Primary Brand
- **Cartier Red** (`{colors.primary}`): The maison's scarlet lacquer, indistinguishable from the iconic red box. Applied to the primary CTA, link hover states, and focus indicators, and absolutely nowhere else. Its power is proportional to its restraint.
- **Deep Scarlet** (`{colors.primary-dark}`): One-step darkening of the red for primary button hover states — communicates pressure without lifting off the page plane.
- **Pale Rose Wash** (`{colors.primary-container}`): A diluted echo of the red for tag backgrounds on promotional badges where the full saturated red would overpower.

### Gold Accent
- **Champagne Gold** (`{colors.gold}`): Hairline ornamental rules under section headings, jewelry tile frame borders, and editorial dividers. Warm metallic presence — the color of yellow gold in even light.
- **Pale Gold Wash** (`{colors.gold-light}`): Background tint for hover states on dark-surface button variants; a faint allusion to gold without saturation.

### Canvas & Surface
- **Pure White** (`{colors.background}`): The default page canvas. Unmodified. Every editorial module, every product tile sits on this base.
- **Ivory Parchment** (`{colors.surface}`): Secondary panel background for alternating editorial sections, appointment booking bands, and content drawers. The color of heavyweight cotton-rag paper.
- **Near-Black** (`{colors.surface-dark}`): Footer background and occasional inverse-surface treatment for cinematic video headers.

### Text / Ink
- **Primary Ink** (`{colors.ink}`): All primary text — headings, body, labels, prices. Near-black rather than pure black, warmer at close reading.
- **Muted Grey** (`{colors.ink-muted}`): Captions under jewelry photography, secondary metadata, fine print, and material specifications.

### Borders & Dividers
- **Warm Hairline** (`{colors.border}`): Default section divider — barely-there, warm toned, between content bands.
- **Strong Rule** (`{colors.border-dark}`): Masthead bottom border, secondary button outline, footer top rule.
- **Gold Rule** (`{colors.border-gold}`): Ornamental hairline — used beneath section headings, framing high-jewelry tile categories, and inside the card-elevated component.

### Semantic
- **Error** (`{colors.error}`): Deep scarlet for form validation messages — brand-coherent with the red family, never a generic UI red.

### Shadow System
Cartier is shadow-free. No drop shadows, no ambient lift, no inner glows. The system communicates depth through three mechanisms: full-bleed photography against white, the ivory-parchment / pure-white surface layering, and the red accent's chromatic isolation. This matches a physical maison environment — a jewelry vitrine has no visible hardware, only glass, light, and the object.

## Typography

### Font Family
- **Display / Editorial**: `"Cartier"`, fallback `Cormorant Garamond, EB Garamond, Georgia, serif`. A commissioned Didot descendant — extreme hairline contrast, refined ascenders, ball terminals with lapidary precision. Not commercially available. For external implementations, Cormorant Garamond (Google Fonts) captures the Didot spirit most faithfully; EB Garamond for a warmer Renaissance alternative.
- **UI / Chrome**: `"Cartier Sans"`, fallback `Jost, Raleway, Helvetica Neue, Arial, sans-serif`. A refined geometric sans used for all navigational, transactional, and label text. Weight 300 throughout — never bold, never condensed. Jost (Google Fonts) is the closest open substitute.
- **OpenType Features**: Standard ligatures on body copy; no swashes, no discretionary alternates in UI contexts.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headlines — one to three words, 80px, weight 300, serif, hairline contrast |
| `display` | Secondary editorial titles and collection chapter headings — 56px, weight 300 |
| `heading-section` | Section openers, collection names — 36px, weight 300, serif |
| `heading-sub` | Product category headings, editorial pull-quotes — 24px, weight 400 |
| `body-large` | Lead editorial paragraphs and collection introductions — 18px, sans, weight 300 |
| `body` | Standard body copy, material descriptions, product specifications — 14px, sans, weight 300 |
| `nav-link` | Primary navigation links — 12px, sans, uppercase, 1.5px tracking |
| `button-ui` | Button labels, CTA text — 12px, uppercase, 2px tracking |
| `caption` | Image captions, certification marks, fine print — 11px, sans, weight 300 |
| `label-eyebrow` | Collection eyebrows above headlines, category flags — 10px, uppercase, 3px tracking |

### Principles
- **Serif for prestige, sans for service**: the Didot-class serif carries all editorial and campaign weight; the geometric sans handles every navigational and transactional moment. The roles never cross.
- **Hairline at hero scale**: the display serif at weight 300 and 80px produces engraved contrast — never a bold face at any editorial size.
- **Uppercase chrome with extreme tracking**: `{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 3px — the cadence of a hallmark or a maker's mark.
- **Weight 300 as the system's voice**: even the sans is light. The system communicates precision through refinement, not mass.
- **No bold in the editorial vocabulary**: the range is 300 to 400. Weight 700 does not exist in Cartier's digital type system.
- **Serif reserved for 24px and above**: at smaller sizes the hairline contrast collapses; all UI text below 24px uses the geometric sans.

## Layout

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

Cartier lives at the most generous end of the spacing spectrum — `{spacing.2xl}` (80px) is the minimum between editorial content sections, and `{spacing.4xl}` (160px) is not unusual for campaign hero modules. The negative space is the maison's primary luxury signal. A six-carat diamond in a display case commands distance; the same principle applies to a product tile on the web.

### Grid & Container
- Max content width: approximately 1440px for editorial modules; 1280px for collection grids
- Hero modules: full-bleed, unconstrained — photography fills the full viewport width and height
- Collection grid: 4-up on large desktop, 2-up on tablet, 1-up on mobile with consistent `{spacing.lg}` gutters
- Editorial text columns: centered at 600–800px maximum width; prose never stretches full-width
- Jewelry detail pages: split layout — 60% photography, 40% product information, generous inner margin

### Whitespace Philosophy
- Every major section transition uses at minimum `{spacing.2xl}` vertical padding — the space communicates atelier craft
- Campaign modules breathe at `{spacing.3xl}`–`{spacing.4xl}` — enough distance to let photography register before the eye continues
- Navigation and footer chrome are compact — the whitespace is reserved for the collection, not the apparatus
- Jewelry tiles maintain visible gutters at all viewports — tiles never touch

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `box-shadow: none` | Universal default — all cards, panels, modals at rest |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border}` | Section dividers, input underlines at rest |
| Gold Rule (Level 2) | `border-bottom: 1px solid {colors.border-gold}` | Ornamental section heading rule, jewelry tile category frame |
| Strong Rule (Level 3) | `border: 1px solid {colors.border-dark}` | Masthead separator, secondary button outline |
| Red Focus (Level 4) | `outline: 2px solid {colors.primary}` | Active navigation underline, keyboard focus ring |
| Scrim (Level 5) | `background: linear-gradient(transparent, rgba(26,26,26,0.45))` | Legibility scrim for text overlaid on dark hero photography |

**Shadow Philosophy**: Cartier is flat by design and by maison decree. The extraction returned zero shadow values. Depth is a matter of photography contrast — a single-carat solitaire against white Carrara marble needs no simulated drop shadow to communicate three dimensions. The system trusts photography to do this work. No card lifts, no panel floats, no ambient glow behind any modal.

## 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, cards, image crops, modals, drawers |
| `pill` | 9999px | Rare promotional badge tags only ("New", "Exclusive", "Limited Edition") |

Cartier does not use mid-range radius values (4–24px). The choice is absolute — the sharp geometry of a red lacquer box, or the organic softness of a pill badge. Nothing between these poles. This binary stance mirrors the precision of a jewelry case: right angles, no rounded corners, nothing softened that should be precise.

## Components

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

### Button Variants

- **`button-primary`** — Cartier Red fill (`{colors.primary}`), white label, uppercase 2px tracking, zero radius, 14px 36px padding. Visually reserved for the single most important action per view — "Book an appointment", "Discover the collection", "Add to bag". One per viewport.
- **`button-primary-hover`** — Fill deepens to `{colors.primary-dark}` — a quiet darkening that reads as physical pressure.
- **`button-secondary`** — Transparent background, `{colors.ink}` label, `1px solid {colors.border-dark}` outline, same typography and padding. Used for secondary paths: "Explore", "View all", "Contact a boutique".
- **`button-secondary-hover`** — Inverts to `{colors.ink}` background with white label — confident, lapidary.
- **`button-ghost`** — No border, no background, `{colors.ink}` label with `{typography.button-ui}` uppercase tracking. Inline tertiary actions: "Read the story", "Watch the film", "Learn more".
- **`button-ghost-hover`** — Label shifts to `{colors.primary}` — the maison signature fires once, quietly.

### Cards

- **`card`** — Zero padding, zero radius, no shadow, no background. Jewelry product tiles are pure photography + typography on the white canvas; the card's boundary is the image edge.
- **`card-elevated`** — Ivory parchment background (`{colors.surface}`), gold hairline border (`{colors.border-gold}`), generous padding (32px), no shadow. Used for editorial feature panels, appointment modules, and high-jewelry showcase sections.

### Inputs

- **`input`** — White background, warm hairline border (`{colors.border}`), zero radius, no shadow. The input reads as a continuation of the page, not a lifted affordance.
- **`input-focus`** — Border shifts to Cartier Red (`{colors.focus-ring}`). The focus state is the only moment a form field announces itself — and it does so with the maison's signature color.

### Badges / Tags

- **`badge`** — Pale rose wash (`{colors.primary-container}`), Cartier Red text, pill shape. Promotional labels: "New", "Limited Edition", "Exclusive". The rose wash borrows from the red without the full chromatic weight.
- **`badge-gold`** — Pale gold wash (`{colors.gold-light}`), near-black text, pill shape. Collection labels: "High Jewelry", "Signature", "Prestige".

### Navigation

- White masthead with `1px solid {colors.border}` bottom rule
- Cartier wordmark: centered, rendered in the proprietary Didot serif, neither enlarged nor reduced from its designed proportions
- Primary nav: 12px geometric sans, uppercase, 1.5px tracking, `{colors.ink}` at rest, shifts to `{colors.primary}` red on hover
- Active section: `2px solid {colors.primary}` underline beneath the active category
- Mobile: hamburger icon → full-screen white overlay, vertical nav stack, `{spacing.lg}` row padding, red hover states retained

## Do's and Don'ts

### Do
- Use `{colors.primary}` Cartier Red exclusively for primary CTAs, hover states, and focus indicators — one red per viewport maximum
- Set all display copy in the Didot-class serif at weight 300 — the hairline contrast is the maison's editorial signature
- Uppercase every button label, eyebrow, nav link, and caption flag with wide tracking (`{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 3px)
- Keep border-radius at `{rounded.none}` for all structural elements — no rounded corners on buttons, inputs, cards, or image crops
- Use `{spacing.2xl}`–`{spacing.4xl}` between content sections — the whitespace is the atelier
- Use `{colors.gold}` only for ornamental hairline rules and jewelry tile frames — never as a fill or background
- Keep all surfaces flat with `box-shadow: none` — depth is the photography's responsibility
- Allow jewelry photography to be full-bleed and rectangular — never circle-crop, never apply drop shadows, never stage on colored surfaces
- Use `{colors.ink}` near-black rather than `#000000` — the warmth reads as letterpress, not screen
- Default all body and UI copy to the geometric sans at weight 300 — the serif is only for editorial moments at 24px and above

### Don't
- Don't use `{colors.primary}` red as a section fill or panel background — it belongs only on small accent elements and focus states
- Don't add drop shadows to any surface — the system is flat and the extraction confirmed zero shadows
- Don't introduce a third typeface — the Didot serif plus geometric sans contract is the entire typographic system
- Don't use mid-range border-radius (4–24px) — the system is binary: `{rounded.none}` or `{rounded.pill}` only
- Don't scale the serif below 24px — the hairline strokes collapse at small sizes; switch to the sans instead
- Don't apply positive letter-spacing to display serif text — it damages Didot proportion; `{typography.display-hero}` tracks at -1.5px for a reason
- Don't lowercase navigation links or button labels — uppercase tracking is the Cartier UI grammar, not a stylistic option
- Don't use the gold (`{colors.gold}`) as a background fill — it is a hairline accent, not a surface color
- Don't crowd jewelry tiles — always preserve visible gutters; tiles must never touch
- Don't substitute the geometric sans with a humanist (no Garamond for body, no Gill Sans, no rounded grotesk) — the system requires the cool precision of a geometric voice

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column, hamburger nav, full-bleed hero, serif display at 36px |
| Tablet | 640–1024px | 2-up jewelry grid, condensed nav, serif display at 48px |
| Desktop | 1024–1440px | Full horizontal nav, 4-up jewelry grid, hero serif at 80px |
| Large Desktop | >1440px | Maximum container (1440px), expanded outer margins, full-bleed at native ratio |

### Touch Targets
- Primary buttons: minimum 44px tap height via 14px vertical padding
- Navigation links: full-row tappable in mobile overlay drawer
- Jewelry tiles: entire image + caption zone is tappable, not only the title link

### Collapsing Strategy
- **Nav**: Horizontal primary nav collapses to a hamburger icon at tablet and below → full-screen white overlay with vertical link stack, `{spacing.lg}` row padding, red hover states retained
- **Hero**: Full-bleed photography scales to fill viewport; serif headline reduces from 80px to 36px on mobile — Cartier never reduces a headline to a single word on a small screen; it breaks to two or three lines
- **Jewelry grid**: 4-up → 2-up → 1-up; gutters scale from `{spacing.lg}` to `{spacing.md}` on mobile; tiles never touch at any breakpoint
- **Editorial columns**: 600–800px centered text columns go full-width on mobile with 20px horizontal margin
- **Footer**: Multi-column link grid collapses to accordion on mobile with `{spacing.md}` row height

### Image Behavior
- Jewelry photography maintains native aspect ratio across all breakpoints — Cartier does not square-crop on mobile
- Full-bleed hero modules use `object-fit: cover` with focal point preserved via `object-position`
- Jewelry is always photographed and displayed on neutral surfaces (white, ivory, marble) — never on colored backgrounds in any responsive context
- The Cartier wordmark and red oval seal maintain full resolution at all breakpoints and never simplify

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary Text: `{colors.ink}`
- Cartier Red (brand accent): `{colors.primary}`
- Red Hover: `{colors.primary-dark}`
- Secondary Surface: `{colors.surface}`
- Muted Text: `{colors.ink-muted}`
- Champagne Gold: `{colors.gold}`
- Warm Hairline Border: `{colors.border}`
- Strong Rule: `{colors.border-dark}`
- Gold Rule: `{colors.border-gold}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Create a Cartier campaign hero on `{colors.background}` with full-bleed jewelry editorial photography covering the full viewport height. Apply a transparent-to-rgba(26,26,26,0.45) legibility scrim behind the text. Overlay a centered `{typography.display-hero}` serif headline (80px, weight 300, letterSpacing -1.5px, color `{colors.background}` white). Below it: a `{typography.button-ui}` Cartier Red CTA button (`{colors.primary}` fill, `{colors.on-primary}` white label, uppercase, 2px tracking, `{rounded.none}`, 14px 36px padding). No shadows anywhere."
- "Design a Cartier jewelry product tile — full-width jewelry photography on `{colors.background}` white, no border, no shadow, `{rounded.none}`. Below the image: a `{typography.label-eyebrow}` category eyebrow (10px, uppercase, 3px tracking, `{colors.ink-muted}`), then a `{typography.heading-sub}` product name (24px, serif, weight 400, `{colors.ink}`), then a `{typography.body}` price (14px, sans, weight 300). A `{colors.border-gold}` gold hairline beneath the category eyebrow. On hover, the product name shifts to `{colors.primary}` red."
- "Build a Cartier primary CTA button — `{colors.primary}` red background, `{colors.on-primary}` white label, `{typography.button-ui}` (12px, uppercase, 2px letter-spacing), `{rounded.none}`, 14px 36px padding. Hover state: `{colors.primary-dark}`. No shadow, no border. One per viewport."
- "Create a Cartier navigation masthead on `{colors.background}` white with a `1px solid {colors.border}` bottom rule. Center the Cartier wordmark in the Didot serif. Center the primary nav links at `{typography.nav-link}` (12px, uppercase, 1.5px tracking, `{colors.ink}`). On hover each link shifts to `{colors.primary}` with a `2px solid {colors.primary}` underline. Right-align a search icon and bag icon in the geometric sans."
- "Design a Cartier editorial feature panel on `{colors.surface}` ivory parchment background with a `1px solid {colors.border-gold}` gold border and 32px inner padding. Include a `{typography.label-eyebrow}` uppercase gold-tinted collection eyebrow (`{colors.ink-muted}`, 3px tracking), a `{typography.heading-section}` serif headline (36px, weight 300, `{colors.ink}`), a `{typography.body-large}` editorial paragraph (18px, sans, weight 300, `{colors.ink}`, lineHeight 1.65), and a `{components.button-ghost}` inline link in `{colors.primary}`. No shadows."
- "Create a Cartier newsletter signup band on `{colors.surface}` ivory parchment with `{spacing.3xl}` (120px) vertical padding. Center: a `{typography.heading-section}` serif headline (36px, weight 300), a line of `{typography.body}` copy in `{colors.ink-muted}`, a `1px solid {colors.border-gold}` gold hairline divider, then a side-by-side email input and button. Input: `{colors.background}` fill, `1px solid {colors.border}` warm hairline, `{rounded.none}`, 12px 16px padding. Button: `{colors.ink}` fill, `{colors.background}` white label, `{typography.button-ui}` uppercase 2px tracking, `{rounded.none}`, 14px 36px padding."

### Iteration Guide

1. Start from `{colors.background}` pure white — the canvas is absolute. `{colors.surface}` ivory parchment is the only surface variation.
2. Cartier Red (`{colors.primary}`) is the maison seal. One per viewport, on the primary CTA only. Nav hovers and focus rings are its secondary habitat. Never as a fill.
3. Typography hierarchy is strict: Didot-class serif (weight 300) for all editorial headlines 24px+; geometric sans weight 300 for everything below and all UI.
4. All chrome is uppercase with generous tracking — `{typography.button-ui}` at 2px, `{typography.label-eyebrow}` at 3px. Sentence-case does not exist in Cartier's UI vocabulary.
5. Border radius is `{rounded.none}` for every structural element. `{rounded.pill}` only for rare promotional tags.
6. Shadow budget is zero. Photography provides all depth.
7. Gold (`{colors.gold}`) is ornamental hairline only — under section headings, framing jewelry tile categories.
8. Content section spacing is never below `{spacing.2xl}` (80px). Campaign modules breathe at `{spacing.3xl}`–`{spacing.4xl}`.
9. Jewelry photography is always on white or neutral stone — never on colored backgrounds, never circle-cropped.
10. The serif is for prestige moments only. If in doubt, use the geometric sans at weight 300.

---

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