---
version: alpha
name: Rolex
description: Rolex green on near-black, a proprietary Swiss serif for horological authority, and a dark-prestige restraint where every element defers to the watch it frames

colors:
  # Primary canvas — dark velvet surface, not pure black /* estimated */
  background: "#0d0d0d"
  surface: "#1a1a1a"             # lifted panel surface for card and content containers /* estimated */
  surface-mid: "#141414"         # secondary dark surface, inset sections /* estimated */
  surface-light: "#f5f3ef"       # rare cream-white inset panel, editorial contrast mode /* estimated */

  # Text / ink
  ink: "#ffffff"
  ink-secondary: "#c8c0b4"       # warm off-white for secondary body copy, metadata /* estimated */
  ink-muted: "#7a7268"           # muted warm-grey for captions, tertiary labels /* estimated */
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#ffffff"          # white text on Rolex Green surfaces

  # Brand accent — signature Rolex Green
  primary: "#006039"             # Rolex Green, the maison's signature dial and packaging color /* estimated */
  primary-light: "#007a48"       # slightly lighter green for hover states on dark surfaces /* estimated */
  primary-container: "#003d25"   # deep forest, tinted container for subtle green-tinted areas /* estimated */

  # Gold / prestige accent
  gold: "#c9a96e"                # warm champagne gold — crown icon, ornamental dividers /* estimated */
  gold-light: "#e8d5a3"          # pale gold wash for hover accents on dark surfaces /* estimated */

  # State / interaction
  text-hover: "#c9a96e"          # nav links and body anchors shift to warm gold on hover /* estimated */
  focus-ring: "#006039"          # green focus ring matching brand accent /* estimated */

  # Semantic
  error: "#c0392b"               # deep red for form validation /* estimated */

  # Borders & dividers
  border: "#2a2a2a"              # subtle dark border for structural edges /* estimated */
  border-gold: "#c9a96e"         # gold hairline for ornamental dividers and watch tile framing /* estimated */
  border-subtle: "#333333"       # barely-there dividers, input outlines /* estimated */

  # Shadow
  shadow-soft: "#000000"         # pure black shadow for rare card elevation /* estimated */
  shadow-green: "#002b1a"        # green-tinted ambient for focus halos on primary elements /* estimated */

typography:
  # Rolex uses a proprietary Swiss serif (Rolex proprietary type, akin to Times-class with tight letterforms)
  # for all display and editorial text, and a refined geometric sans for UI chrome and body copy.
  # Closest Google Fonts: Playfair Display or IM Fell English (serif); Barlow or DM Sans (sans)
  display-hero:
    fontFamily: "Rolex, Playfair Display, Times New Roman, Georgia, serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.5px
  display:
    fontFamily: "Rolex, Playfair Display, Times New Roman, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.08
    letterSpacing: 0.3px
  heading-section:
    fontFamily: "Rolex, Playfair Display, Times New Roman, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.2px
  heading-sub:
    fontFamily: "Rolex, Playfair Display, Times New Roman, Georgia, serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0.1px
  body-large:
    fontFamily: "Rolex Sans, Barlow, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.65
    letterSpacing: 0.05px
  body:
    fontFamily: "Rolex Sans, Barlow, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.6
    letterSpacing: 0.03px
  nav-link:
    fontFamily: "Rolex Sans, Barlow, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.2px
  button-ui:
    fontFamily: "Rolex Sans, Barlow, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 1.8px
  caption:
    fontFamily: "Rolex Sans, Barlow, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 300
    lineHeight: 1.45
    letterSpacing: 0.5px
  label-eyebrow:
    fontFamily: "Rolex Sans, Barlow, DM Sans, Helvetica Neue, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 2.5px

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

rounded:
  none: 0px
  sm: 3px
  pill: 9999px

components:
  # Primary CTA — Rolex Green fill, uppercase tracked label
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-light}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px

  # Secondary / ghost — dark surface, white or gold border outline
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-subtle}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 32px
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 32px

  # Gold-accent ghost for editorial dark sections
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.gold}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.gold-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 0px

  # Watch product tile card
  card:
    backgroundColor: "{colors.surface}"
    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

  # Form input — dark surface, subtle outline
  input:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    borderColor: "{colors.border-subtle}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px

  # Badge / reference label
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
  badge-gold:
    backgroundColor: "transparent"
    textColor: "{colors.gold}"
    borderColor: "{colors.border-gold}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  nav-item:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
  nav-item-hover:
    textColor: "{colors.gold}"
    typography: "{typography.nav-link}"
    padding: 8px 0px
---

# Rolex Design System

## Overview

The Rolex website is a purpose-built instrument of desire — a dark-chamber presentation where each watch is lit from within and the interface itself disappears. The canvas is `{colors.background}`, a near-absolute black that functions as a velvet display cushion, chosen for the same reason that a Rolex retailer drapes the case in black felt: it eliminates every competing surface so the watch commands the eye entirely. Nothing on the page competes with the object. Photography is full-bleed and studio-controlled, shot against deep darkness, often with single-point Rembrandt lighting that makes the dial glow with apparent luminescence. The interface chrome — navigation, labels, buttons — recedes to near-invisibility at rest, surfacing only when the user reaches for it.

Typography establishes the brand's Swiss-precision identity through a two-voice system. The proprietary serif (`{typography.display-hero}`) carries the prestige burden: upright, optically corrected, with the technical refinement of a watch dial typeface scaled to 72px. It does not use extreme tracking; the voice is assured, not ornamental. The brand's geometric sans handles all chrome and body copy — weight 300, uppercase for labels and navigation, light-tracked at UI sizes. Together the two voices produce the same register as a Rolex certificate: formal without stiffness, precise without coldness.

The signature accent is `{colors.primary}`, the Rolex Green that has come to mean one thing in the world of watches. It is not used decoratively. It appears on the primary CTA, on focus rings, and in the crown-and-coronet icon. It is the brand's permission stamp — the button that lets you configure, request, or explore further. The secondary accent is `{colors.gold}`: warm champagne-gold hairlines beneath section headings, the crown logotype, and hover states on tertiary navigation. Together, the green and gold are horology's two precious metals rendered in digital form.

**Key Characteristics:**
- `{colors.background}` near-absolute dark canvas — the watchmaker's velvet, not a "dark mode" interface choice
- `{colors.primary}` Rolex Green reserved exclusively for primary CTAs, focus indicators, and the crown icon — scarcity maintains its stamp quality
- `{colors.gold}` champagne-gold as ornamental accent: crown logotype, hairline dividers, nav hover states
- Dual-typeface system: proprietary serif for all editorial headlines, refined geometric sans for all UI chrome and body
- Display serif at 72px weight 400 with controlled tracking — authoritative rather than decorative; no extreme character-spacing
- All navigation links and button labels in uppercase with 1.2–2.5px tracking — the Rolex certificate grammar
- Border-radius is nearly binary: `{rounded.none}` for structural elements, `{rounded.sm}` for minor utility components only
- Zero ambient shadows — depth is entirely photographic; the watch's own three-dimensionality is the elevation system
- Full-bleed studio photography on dark or neutral surfaces — no colored backgrounds, no rounded image crops
- `{spacing.2xl}`–`{spacing.4xl}` between major content sections — the watchmaker's patience given spatial form
- Collection references displayed with watch reference numbers in `{typography.label-eyebrow}` uppercase — product identity treated like a serial number, not a product name
- Photography consistently employs wrist-on-model shots alongside object-only studio frames, always lit against dark

## Colors

### Primary Brand
- **Rolex Green** (`{colors.primary}`): The maison's signature, present on the Oyster packaging, the Submariner bezel, the exhibition at Baselworld. Applied to the primary CTA button and focus ring, nowhere else in the UI chrome. One stamp per viewport.
- **Forest Hover** (`{colors.primary-light}`): The green steps slightly lighter for the primary button hover — the pressure of a crown engagement, not a dramatic state change.
- **Deep Container** (`{colors.primary-container}`): A near-black green tint for badge backgrounds and subtle reference-chip fills — the color inside a velvet watch box.

### Gold Accent
- **Champagne Gold** (`{colors.gold}`): The Rolex crown icon, ornamental hairline rules beneath section headings, and navigation link hover states. The color of 18k yellow gold in even studio light.
- **Pale Gold Wash** (`{colors.gold-light}`): Tertiary hover tint on dark surfaces, understated acknowledgment of interaction without lifting out of the dark palette.

### Canvas & Surface
- **Velvet Black** (`{colors.background}`): The universal canvas. Near-absolute, slightly warmer than `#000000`, like photographic black paper.
- **Lifted Dark** (`{colors.surface}`): Card and container surfaces — still very dark, but perceptibly distinct from the canvas. The light-bounce off a matte black box.
- **Inset Dark** (`{colors.surface-mid}`): Secondary panels, form fields, and nested containers.
- **Cream Editorial** (`{colors.surface-light}`): Rare light-mode inset panel for editorial features or historical archive sections. The cream of a Rolex warranty booklet.

### Text / Ink
- **Primary White** (`{colors.ink}`): All display headlines and primary labels — a clean white against the dark field.
- **Warm Off-White** (`{colors.ink-secondary}`): Secondary body copy, descriptions, product metadata. Slightly warmer than pure white, like a certificate printed on ivory stock.
- **Muted Warm-Grey** (`{colors.ink-muted}`): Captions beneath watch photography, tertiary labels, material specification fine print.

### Borders & Structure
- **Dark Edge** (`{colors.border}`): Structural panel boundaries — just barely visible against the near-black surface.
- **Gold Hairline** (`{colors.border-gold}`): Ornamental rule beneath section headings, watch tile framing in elevated card contexts.
- **Subtle Divider** (`{colors.border-subtle}`): Input outlines, thin horizontal rules between content rows.

### Semantic
- **Error Red** (`{colors.error}`): Form validation only — the one contextual red, kept far from the brand's green accent.

## Typography

### Font Family
- **Display / Editorial**: `"Rolex"`, proprietary Swiss serif commissioned for the brand. Closest Google Font substitute: `Playfair Display` (captures upright serifed authority), with `IM Fell English` as a period-instrument alternative. Fallback stack: `Times New Roman, Georgia, serif`. Used exclusively for all headlines from 22px upward.
- **UI / Chrome**: `"Rolex Sans"`, a refined geometric sans for all navigational, transactional, body, and label text. Closest Google Font substitute: `Barlow` (tall x-height, precise geometric rhythm), with `DM Sans` as an alternative. Fallback stack: `Helvetica Neue, Arial, sans-serif`.
- **OpenType Features**: Standard ligatures on body copy; tabular numerals for watch reference numbers and price fields; no decorative alternates.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 72px serif weight 400 — campaign headlines, collection openings, single product showcase |
| `display` | 48px serif weight 400 — major section headers, model family names |
| `heading-section` | 32px serif weight 400 — collection category headings, editorial feature titles |
| `heading-sub` | 22px serif weight 400 — watch model names, sub-collection headings |
| `body-large` | 18px sans weight 300 — lead editorial paragraphs, collection introductions |
| `body` | 15px sans weight 300 — standard watch descriptions, material specifications |
| `nav-link` | 12px sans weight 400, 1.2px tracking, UPPERCASE — primary and secondary navigation |
| `button-ui` | 12px sans weight 400, 1.8px tracking, UPPERCASE — all CTA and action button labels |
| `caption` | 11px sans weight 300 — image captions, certification notes, legal fine print |
| `label-eyebrow` | 10px sans weight 400, 2.5px tracking, UPPERCASE — watch reference numbers, collection eyebrows |

### Principles
- **Serif for provenance, sans for precision**: the upright serif carries every editorial and campaign declaration; the geometric sans executes every transactional and navigational task. The roles never cross.
- **Weight 400 at every serif size**: Rolex does not use light-weight display headlines. The serif speaks with steady authority rather than hairline delicacy.
- **Uppercase UI chrome with controlled tracking**: `{typography.button-ui}` at 1.8px, `{typography.label-eyebrow}` at 2.5px. The cadence of an engraved watch caseback.
- **Sans at weight 300 for body**: all descriptive and body text runs light — the thickness reserved for structural moments (headings, CTAs), never for paragraphs.
- **Tabular numerals throughout**: watch reference numbers and product codes must align in grid-listed contexts; tabular setting is non-negotiable for technical precision.
- **No decorative display treatment**: Rolex does not letter-space its serif headlines beyond minimal optical correction. The typography communicates through letterform quality, not through dimensional staging.

## Layout

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

Rolex operates at the patient end of the spacing register — `{spacing.2xl}` (80px) is the floor for section-to-section transitions, and campaign modules breathe at `{spacing.4xl}` (160px). The space between a watch photograph and its title is generous enough to feel like a display stand, not a data sheet. This is a brand that asks the user to wait, to look, and only then to act.

### Grid & Container
- Max content width: approximately 1440px; hero photography unconstrained at full viewport width
- Watch collection grid: 3-up on large desktop, 2-up on tablet, 1-up on mobile with `{spacing.lg}` consistent gutters
- Editorial text columns: centered at 640–880px maximum width; body copy never spans full-width
- Split-view product module: 55% photography + 45% specifications and CTA, with generous inner gutter
- Configurator / Family Selector: full-bleed dark panel with internal horizontal scrolling watch selector

### Whitespace Philosophy
- Whitespace between a watch tile and its label is calibrated like the space between a watch and its box in a point-of-sale display
- Section transitions at `{spacing.2xl}`–`{spacing.3xl}` minimum — enough air to separate horological chapters, not just scroll sections
- Navigation and footer chrome are compact and serve strictly utilitarian functions; generous whitespace is reserved for the collection itself

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default — all watch tiles and editorial panels on the dark canvas |
| Hairline (Level 1) | `border: 1px solid {colors.border}` | Structural card edges, subtle container boundaries |
| Gold Rule (Level 2) | `border-bottom: 1px solid {colors.border-gold}` | Section heading ornamental rule, elevated card-tile framing |
| Input (Level 3) | `border: 1px solid {colors.border-subtle}` | Form field outlines at rest |
| Focus Ring (Level 4) | `outline: 2px solid {colors.primary}` | Keyboard focus on interactive elements — the green seal |
| Scrim (Level 5) | `background: linear-gradient(transparent, rgba(0,0,0,0.50))` | Legibility overlay behind display text on photographic backgrounds |

**Shadow Philosophy**: The Rolex elevation system is photographic by design. No `box-shadow` values appear on brand UI elements. Three-dimensional depth is communicated entirely by the watch photography — studio lighting places the Submariner bezel in sculptural relief without any simulated lift. Card separation is achieved through surface-tone stepping (`{colors.background}` to `{colors.surface}`) rather than shadows, the same way a display cabinet separates compartments by depth of felt, not by visible hardware.

## Shapes

The radius system is nearly binary: rectangular precision or minimal micro-rounding for minor UI utilities.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All structural elements — buttons, card containers, image crops, nav panels |
| `sm` | 3px | Input fields, small badge chips, minor utility elements only |
| `pill` | 9999px | Not used in standard product chrome; reserved for system-level search suggestions if present |

Rolex defaults to sharp-cornered geometry. A watch case has beveled edges, not rounded ones. The `{rounded.sm}` value exists for the minor utility elements that benefit from the gentlest visual softening without departing from the brand's engineering precision.

## Components

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

### Buttons

- **`button-primary`** — Rolex Green fill (`{colors.primary}`), white label, uppercase 1.8px tracking geometric sans, zero radius, 14px 32px padding. The single most important action per view: "Discover the collection", "Find a retailer", "Configure your watch". One per major viewport section.
- **`button-primary-hover`** — Fill lightens marginally to `{colors.primary-light}` — a controlled acknowledgment, not a dramatic state shift.
- **`button-secondary`** — Transparent background, `{colors.ink}` label, `1px solid {colors.border-subtle}` outline, same uppercase typography. Secondary actions: "Learn more", "View all models", "See specifications".
- **`button-ghost`** — No border, no background, `{colors.gold}` label. Tertiary inline actions in editorial sections: "Read the full story", "Explore history", "Watch the film".

### Cards

- **`card`** — `{colors.surface}` background, zero radius, no padding (full-width photography to edge). Watch product tiles: image fills top 65%, model name and reference number below on the dark panel.
- **`card-elevated`** — `{colors.border-gold}` gold hairline border, 32px inner padding. Used for editorial feature panels, ambassador profiles, and the Perpetual Planet environmental section.

### Inputs

- **`input`** — `{colors.surface-mid}` dark fill, `{colors.border-subtle}` outline, `{rounded.sm}` corner, no shadow. Used in retailer locator and subscription forms.
- **`input-focus`** — Border shifts to `{colors.primary}` Rolex Green — the maison seal appears on engagement.

### Badges / Tags

- **`badge`** — Deep forest container (`{colors.primary-container}`), muted green label, `{rounded.sm}`. Watch collection labels: "New", "Exclusive Retailer".
- **`badge-gold`** — Transparent fill, `{colors.border-gold}` gold border, `{colors.gold}` gold text. Technical reference tags: watch reference numbers, movement calibre labels.

### Navigation

- Near-absolute dark masthead (`{colors.background}`) with zero visible border at rest
- Rolex crown-and-coronet logotype: centered in gold (`{colors.gold}`), the sole decorative element in the navigation bar
- Primary nav: 12px geometric sans, uppercase, 1.2px tracking, `{colors.ink-secondary}` at rest, shifts to `{colors.gold}` on hover
- Active section: `2px solid {colors.primary}` green underline beneath the active category label
- Mobile: hamburger → full-screen dark overlay, vertical nav stack, `{spacing.lg}` row padding, green active states retained

## Do's and Don'ts

### Do
- Use `{colors.background}` near-absolute dark as the universal canvas — never introduce mid-grey or neutral-dark surfaces as alternates
- Reserve `{colors.primary}` Rolex Green strictly for the primary CTA button, focus rings, and the crown icon — one per viewport
- Apply the serif (`{typography.display-hero}` through `{typography.heading-sub}`) only for editorial headlines at 22px and above; switch to the sans for everything smaller
- Keep all button labels, navigation links, and eyebrows in uppercase with `{typography.button-ui}` tracking — the Rolex certificate grammar
- Set border-radius to `{rounded.none}` for all structural elements — watch cases have bevels, not rounded corners
- Use `{spacing.2xl}`–`{spacing.4xl}` between major content sections — the whitespace communicates the watchmaker's patience
- Keep all shadows to a scrim gradient over photography only — no `box-shadow` on any brand UI element
- Display watch photography on dark or neutral studio surfaces — never on colored backgrounds
- Use tabular numerals (`font-variant-numeric: tabular-nums`) for all reference numbers and price displays
- Let `{colors.gold}` appear as ornamental hairline only — under section headings and in the crown icon; never as a fill color

### Don't
- Don't introduce a third typeface — the serif plus geometric-sans contract is the complete Rolex type system
- Don't use `{colors.primary}` green as a section fill, background panel, or decorative gradient — it belongs only on the primary CTA button
- Don't use positive letter-spacing on display serif headlines — the serif communicates through letterform precision, not spaced characters
- Don't add drop shadows to any card, panel, or modal — the system is elevation-free and the extraction confirmed zero `box-shadow` values in brand UI
- Don't use border-radius above `{rounded.sm}` — the system is nearly binary: `{rounded.none}` or the lightest possible micro-rounding
- Don't use urgency mechanics — no countdown timers, no promotional banners, no "X left in stock" — these are incompatible with the Rolex brand register
- Don't reduce `{spacing.xl}` or below for section-to-section spacing — compressed spacing reads as efficiency, which contradicts the brand's relationship with time
- Don't circle-crop watch photography or apply any filter that reduces its objecthood — the watch must exist as a precise physical object at all sizes
- Don't lowercase navigation or button labels — uppercase tracking is the Rolex document grammar, not a stylistic preference
- Don't use `{colors.gold}` as a primary CTA color — gold hover states on tertiary elements only; the green CTA stamp must remain primary

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, compressed crown nav, display serif at 32px, full-width CTAs |
| Mobile | 375–640px | Single column, 16px horizontal margin, serif display at 40px, 1-up watch grid |
| Tablet | 640–1024px | 2-up watch grid, condensed primary nav, serif display at 52px, floating gold crown |
| Desktop | 1024–1440px | Full horizontal nav, 3-up watch grid, serif hero at 72px, split product module |
| Large Desktop | >1440px | 1440px container max, generous lateral gutters, full cinema hero, full-bleed photography |

### Touch Targets
- Primary buttons: minimum 44px tap height via 14px vertical padding
- Watch tiles: entire tile is tappable, not just the model name text
- Navigation links: full-width row tap targets on mobile overlay

### Collapsing Strategy
- **Navigation**: Full horizontal dark nav collapses to hamburger + centered crown icon on mobile; gold crown retained at all breakpoints as the only nav decoration
- **Hero photography**: Full-bleed maintained at all sizes; display serif reduces 72px → 40px → 32px; Rolex never wraps a headline to more than two lines on mobile
- **Watch grid**: 3-up → 2-up → 1-up; gutters scale from `{spacing.lg}` to `{spacing.md}` on mobile; tiles never touch
- **Product module**: 55/45 split collapses to stacked — photography full-width above, specifications below, CTA below specifications
- **Section spacing**: `{spacing.3xl}` → `{spacing.xl}` → `{spacing.lg}` as viewport narrows; always generous by web standards

### Image Behavior
- Studio watch photography maintains native aspect ratio at all breakpoints — never square-cropped on mobile
- Full-bleed hero modules use `object-fit: cover` with focal point on the watch face
- All watch tiles presented on consistent dark or neutral surfaces regardless of viewport
- The Rolex crown logotype is always rendered at full fidelity — never simplified or reduced to a monogram alternative

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` (near-absolute dark, velvet black)
- Card / panel surface: `{colors.surface}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Rolex Green (brand CTA): `{colors.primary}`
- Green hover: `{colors.primary-light}`
- Gold accent: `{colors.gold}`
- Gold hairline border: `{colors.border-gold}`
- Subtle border: `{colors.border-subtle}`

### Example Component Prompts

1. *"Create a full-viewport Rolex hero section on `{colors.background}` near-absolute dark with full-bleed studio watch photography — the watch face lit from above, dial glowing against darkness. Apply a transparent-to-rgba(0,0,0,0.50) legibility scrim behind the text overlay. Overlay a centered collection name in `{typography.display-hero}` (72px serif weight 400, `{colors.ink}`) with a single-line `{typography.label-eyebrow}` eyebrow above it (`{colors.gold}`, uppercase, 2.5px tracking). Place a single `{components.button-primary}` CTA 48px below: `{colors.primary}` green fill, white uppercase label, 14px 32px padding, zero border-radius. No shadows anywhere on the interface layer."*

2. *"Design a Rolex watch product tile on `{colors.surface}` dark panel, zero border-radius. Photography fills top 65% at a 4:5 aspect ratio — studio black or neutral grey background, single overhead light source, wristwatch in three-quarter angle. Below the image: watch reference number in `{typography.label-eyebrow}` (`{colors.gold}`, 2.5px tracking, uppercase), then model name in `{typography.heading-sub}` (22px serif weight 400, `{colors.ink}`), then a short `{typography.body}` descriptor (15px sans weight 300, `{colors.ink-secondary}`). A `1px solid {colors.border-gold}` gold hairline beneath the reference number. No card shadow, no drop shadow."*

3. *"Build a Rolex primary CTA button: `{colors.primary}` Rolex Green background, `{colors.on-primary}` white label, `{typography.button-ui}` (12px sans weight 400, uppercase, 1.8px letter-spacing), `{rounded.none}`, 14px 32px padding. Hover state: `{colors.primary-light}` — marginally lighter green. No shadow, no border. Maximum one per viewport section."*

4. *"Create a Rolex navigation masthead on `{colors.background}` near-black. Centered: the Rolex crown-and-coronet logotype in `{colors.gold}`. Left-aligned: primary nav links in `{typography.nav-link}` (12px sans, uppercase, 1.2px tracking, `{colors.ink-secondary}`), shifting to `{colors.gold}` on hover with a `2px solid {colors.primary}` underline beneath the active item. Right-aligned: search icon + retailer locator link in the same nav typography. No visible masthead border at rest. 16px vertical padding. On mobile: hamburger icon left + centered crown; full-screen `{colors.background}` overlay on open."*

5. *"Design a Rolex collection grid section on `{colors.background}` with `{spacing.3xl}` (120px) top padding. Section heading in `{typography.heading-section}` (32px serif weight 400, `{colors.ink}`, centered), with a `1px solid {colors.border-gold}` gold hairline 12px below it. Three-column grid of watch tiles (`{components.card}`) with `{spacing.lg}` gutters. Each tile: studio photography top, `{typography.label-eyebrow}` reference number in `{colors.gold}`, `{typography.heading-sub}` model name in `{colors.ink}`, `{typography.body}` descriptor in `{colors.ink-secondary}`. Below grid: centered `{components.button-secondary}` ('SEE ALL MODELS') with `1px solid {colors.border-subtle}` outline."*

6. *"Create a Rolex retailer-locator input group on `{colors.surface-mid}` dark panel, `{spacing.xl}` inner padding. Label in `{typography.button-ui}` (12px, uppercase, 1.8px tracking, `{colors.ink-secondary}`). Input field: `{components.input}` (`{colors.surface-mid}` fill, `1px solid {colors.border-subtle}` outline, `{rounded.sm}`, 12px 16px padding). Focus state: border shifts to `{colors.primary}` Rolex Green (`{components.input-focus}`). Submit: `{components.button-primary}` inline-right. No shadows on any field element."*

### Iteration Guide

1. **Audit the canvas.** Every surface must be `{colors.background}`, `{colors.surface}`, or `{colors.surface-mid}`. No mid-grey, no lifted-dark blues. The watch must appear to float in darkness.
2. **Audit the green.** `{colors.primary}` appears exactly once per viewport section — on the primary CTA. If it appears twice, remove the less important instance.
3. **Audit the gold.** `{colors.gold}` belongs in ornamental hairlines, the crown logotype, and nav hover states. If it has become a fill color, it is being misused.
4. **Audit typography.** All labels, CTAs, and nav links must be uppercase. No sentence-case in the UI layer. Serif only above 22px.
5. **Audit border-radius.** Every structural element (buttons, cards, images) should be `{rounded.none}`. Only form inputs may use `{rounded.sm}`.
6. **Audit shadows.** Strip `box-shadow` from all brand UI. Only the dark scrim gradient behind hero photography is permitted.
7. **Audit spacing.** Major section transitions should feel excessive by standard web measures — `{spacing.2xl}` is the minimum, `{spacing.3xl}` is better for campaign modules.
8. **Audit photography.** The watch must be photographed on dark or neutral studio surfaces, never colored backgrounds. Studio lighting must make the dial appear self-luminous.

---

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