---
version: alpha
name: Rolls-Royce
description: The ultimate luxury automotive marque rendered as a nocturnal couture gallery — deep charcoal canvas, Riviera Nights across every size, cinematic full-bleed photography, generous pill-CTAs in white, and an almost-total refusal to let interface chrome compete with the cars.

colors:
  # Primary canvas + ink — near-absolute dark, not pure black
  background: "#151515"
  surface: "#222222"
  surface-dark: "#000000"         # Deepest sections — hero overlays, video scrim
  surface-mid: "#1a1a1a"          # Lifted panels, secondary container
  surface-light: "#f5f5f5"        # Rare light mode inset sections

  # Ink
  ink: "#ffffff"
  ink-secondary: "#dddddd"        # opaque approx of rgba(255,255,255,0.87) — Google format requires hex
  ink-muted: "#999999"            # opaque approx of rgba(255,255,255,0.55) — Google format requires hex
  ink-inverted: "#151515"

  # On-color
  on-background: "#ffffff"
  on-surface: "#ffffff"
  on-primary: "#151515"

  # Brand — white-on-dark is the only "accent"
  primary: "#ffffff"
  primary-hover: "#d9d9d9"        # hover tint (dembrandt: #d9d9d9)

  # Semantic accent — lavender/violet CTA found on cookie/consent UI (1px border, low confidence)
  accent-violet: "#6d30a7"        # rgb(109,48,167) — cookie consent only; do not use for main CTAs

  # Borders
  border: "#7c7c7c"               # rgb(124,124,124) — top rule on tabbed nav buttons
  border-subtle: "#d8d8d8"        # dividers, input fields, section separators
  border-dark: "#222222"          # left-rule on dark section separators

  # Shadow
  shadow-soft: "#888888"          # opaque approx of rgb(136,136,136) 0px 0px 1px 0px

typography:
  display-hero:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 70px
    fontWeight: 300
    lineHeight: 1.14
    letterSpacing: 15.4px
  display:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 70px
    fontWeight: 300
    lineHeight: 1.14
    letterSpacing: 2.5px
  heading-section:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 34px
    fontWeight: 300
    lineHeight: 1.29
    letterSpacing: 2.5px
  heading-sub:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.61
    letterSpacing: 11.2px
  heading-utility:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 2.5px
  body-large:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.5px
  body:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.5px
  body-light:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.50
    letterSpacing: 0.5px
  nav-link:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.00
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.88
    letterSpacing: 1.88px
  caption:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 2.00
    letterSpacing: 2px
  caption-light:
    fontFamily: "Riviera Nights, Helvetica, Arial, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.83
    letterSpacing: 0.8px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 48px
  2xl: 100px

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

components:
  # Primary CTA — white pill, uppercase label, generous horizontal padding
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Ghost / outline pill on dark backgrounds
  button-ghost:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 32px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Tabbed nav button — top-border indicator on active state
  button-tab:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 12px 20px
  button-tab-active:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px

  # Content card — used for model tiles and editorial sections
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px

  # Form inputs — dark bg, underline-only border
  input:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.ink}"

  # Badge / category pill
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
---

# Rolls-Royce Design System

## Overview

The Rolls-Royce Motor Cars website does not sell automobiles the way any other brand sells them. It operates as a nocturnal private gallery, lit only by the glow of the cars themselves. The canvas is near-black — not pure `{colors.surface-dark}`, but the slightly warmer `{colors.background}` of a dimly lit showroom floor — and everything that exists on it exists in service of one purpose: making the car feel like the most important object in the known world. There are no discount modules, no urgency mechanics, no promotional countdowns. The page breathes at the pace of the product: slow, deliberate, immaculate.

The signature design decision is **wide-tracked uppercase Riviera Nights at light weight**. At hero scale, display text runs at 70px / 300 weight with letter-spacing as wide as 15.4px — so wide that each letter feels individually placed, the way words are spaced on the bonnet of a Phantom. This extreme tracking collapses to 2.5px for section headings and 0.5px for body, giving the hierarchy an arc from monumental to intimate. The typeface itself, Riviera Nights, is a custom proprietary serif with five weights (Ultralight through Bold), and the brand uses primarily Light (300) and Medium (500) — power through restraint, never through thickness.

Color tells the same story. The entire system runs on two colors at rest: `{colors.background}` and `{colors.ink}`. White text on dark canvas, nothing else. The one interactive color is `{colors.primary}` — which is the same white used for text, but applied as a filled pill button. There is no accent, no brand color, no gold or silver swatch competing for attention. The gold IS the car. The chrome IS the Spirit of Ecstasy. The interface refuses to pretend otherwise.

**Key Characteristics:**
- Near-black `{colors.background}` canvas as the permanent surface — warmer than pure black, slightly softer
- Riviera Nights proprietary serif as the sole typeface across every size from 70px display to 12px caption
- 70px / 300 weight headlines with 2.5–15.4px letter-spacing — characters spaced like letters on coachwork
- `{colors.primary}` (white) pill buttons with `{rounded.pill}` radius — the only interactive color in the system
- Uppercase ALL CAPS treatment on every CTA, heading, navigation, and caption
- Cinematic full-bleed hero photography as the primary visual substance; chrome nearly invisible
- 0.4s ease transitions on opacity for links and card reveals — stately, not snappy
- No brand accent colors — no heritage navy, no gold, no burgundy competing with the vehicle palette
- Element Plus/UI component framework under the hood with 171+ el- components on the homepage
- `fadeInUpAnimation` 0.4s ease-out on hero and section elements — content rises into view rather than popping

## Colors

### Primary
- **Showroom Dark** (`{colors.background}`): The canvas. Not pure black but a warm near-black that reads like a gallery lit at 10% brightness. Everything lives on this.
- **White** (`{colors.ink}`): All text, all CTA fills, all borders. The single color that carries every word and interface element. It has the deliberate quality of engraved stationery.

### Surface Scale
- **Absolute Black** (`{colors.surface-dark}`): Reserved for hero sections where photography must read as completely immersive, and for navigation bars.
- **Lifted Dark** (`{colors.surface-mid}`): Secondary panels and drawers — barely perceptibly lighter than the canvas.
- **Charcoal** (`{colors.surface}`): Content card containers and model-tile backgrounds.
- **Off-White** (`{colors.surface-light}`): The rare inset light-mode section (used in "Existing Owners" / dealer locator panels). Treat as an infrequent exception, not a default.

### Text
- **Primary Text** (`{colors.on-background}`): Headlines, body copy, all primary labels.
- **Secondary Text** (`{colors.ink-secondary}`): Supporting body copy and metadata on dark surfaces.
- **Muted Text** (`{colors.ink-muted}`): Disabled states, placeholder copy.

### Accent
- **Brand Primary** (`{colors.primary}`): White used as the CTA fill. The hover state softens to `{colors.primary-hover}`. No other "accent" exists.
- **Consent Violet** (`{colors.accent-violet}`): Appears only in OneTrust cookie consent UI (1px button border). Never use for product chrome.

### Borders & Structure
- **Navigation Rule** (`{colors.border}`): The 1px top-border on active tab buttons, structural separators.
- **Hairline** (`{colors.border-subtle}`): Form input outlines, section dividers.

## Typography

### Font Family
- **Riviera Nights** — proprietary custom serif, self-hosted in five weights: Ultralight (100 effective), Light (300), Regular (400), Medium (500), Bold (700). Used across every typographic role on the site. No secondary typeface. Fallbacks: Helvetica, Arial, -apple-system.
- **Arial / Helvetica** — system fallback only for cookie consent and legacy modal contexts.

The complete type scale lives in the `typography:` token block above.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 70px Light, 15.4px tracking UPPERCASE — maximum ceremony, marquee headlines |
| `display` | 70px Light, 2.5px tracking UPPERCASE — section-opening headlines |
| `heading-section` | 34px Light UPPERCASE — model names, major section labels |
| `heading-sub` | 28px Medium, 11.2px tracking — secondary feature headings, sub-narrative |
| `heading-utility` | 20px Regular, 2.5px tracking UPPERCASE — navigation sub-labels, feature tiles |
| `body-large` | 22px Regular — lead paragraphs and intro copy |
| `body` | 16px Regular — standard reading copy, descriptions |
| `body-light` | 16px Light — secondary body and captions on dark backgrounds |
| `nav-link` | 14px Regular, 0.5px tracking — navigation links and utility labels |
| `button-ui` | 16px Medium, 1.88px tracking UPPERCASE — all CTA labels |
| `caption` | 12px Medium, 2px tracking UPPERCASE — category eyebrows, gallery labels |
| `caption-light` | 12px Light — fine print, photo credits, tertiary annotations |

### Principles
- **Riviera Nights is the system.** The entire typographic vocabulary lives within one typeface family. Weight (not a secondary face) creates the register shifts.
- **Letter-spacing scales inversely with hierarchy emotion.** The most monumental headline (15.4px tracking) feels the most widely spaced — letters separated like words on cast metal. Body text is relaxed (0.5px).
- **Light weight (300) dominates.** Rolls-Royce communicates authority through restraint. Heavy weights appear only for sub-headings and UI labels where readability at small sizes requires it (Medium 500, Bold 700).
- **Uppercase is non-negotiable for CTAs and headings.** Every button, every navigation link, every major heading is `text-transform: uppercase`.
- **The proprietary serif communicates hand-craftsmanship.** Unlike the mono-sans of Bugatti or the geometric precision of Porsche, Riviera Nights' calligraphic stroke contrast places Rolls-Royce in the tradition of fine couture and private banking typography.

## Layout

### Spacing System
The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px. The most significant spacing value is `{spacing.2xl}` (100px) — used for section-to-section vertical padding, creating dramatic breathing room between each cinematic moment.

### Grid & Container
- Max content width: 1600px (observed breakpoint ceiling)
- Hero sections: full viewport width and height, no container constraint
- Content sections: centered within a constrained column (~1200–1440px) with generous lateral gutters
- Navigation: full-width with a centered Spirit of Ecstasy / RR monogram, MENU left, FIND A DEALER right

### Whitespace Philosophy
- Whitespace is not a passive gap — it is the velvet beneath the jewel. Every hero section gets its own full-viewport room.
- Section padding at `{spacing.2xl}` (100px) vertical is intentional excess. The rhythm communicates that time is not being saved.
- Between model tiles, generous 50px gutters prevent the grid from reading as a catalogue rather than a private presentation.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Default — all body content on `{colors.background}` |
| Hairline (Level 1) | `1px solid {colors.border-subtle}` | Section dividers, input field underlines, nav rules |
| Top-rule (Level 2) | `1px solid {colors.border}` (top only) | Active tab indicator — the single structural border in the UI |
| Scrim (Level 3) | `linear-gradient(0deg, transparent 15%, rgba(0,0,0,0.25))` | Legibility gradient over hero photography; the only "shadow" effect |
| Box-shadow (Level 4) | `rgb(136,136,136) 0px 0px 1px` / `rgba(0,0,0,0.2) 0px 0px 18px` | Rare — cookie consent and overlay dialogs only |

**Shadow Philosophy**: Rolls-Royce's elevation system is essentially flat. Depth comes from the photography itself — dramatic studio lighting, negative space, the car's own shadow pool on a reflective floor. The single scrim gradient over the hero video is the only atmospheric layering effect in the design. Box-shadows appear only in third-party consent UI (OneTrust) and do not represent the brand's own design language.

## Shapes

The radius system is binary — rectangular structure or complete pill. Nothing between.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All media, content sections, nav, cards |
| `sm` | 4px | Small span indicators, minor utility elements |
| `pill` | 9999px | All CTA buttons (primary + ghost) — dembrandt detected 30px-radius buttons mapping to pill intent |

Rolls-Royce has made the same choice as Bugatti: sharp-cornered containers for all editorial content, and complete pills for every interactive button. No medium-radius cards, no softly rounded modals. The rectangle is architectural; the pill is cordial — like the rounded edge of a card embossed with the Spirit of Ecstasy.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Buttons

- **`button-primary`** — White-filled pill, `{colors.on-primary}` text, uppercase Riviera Nights Medium with 1.88px tracking. The signature CTA; used for "DISCOVER NOW", "DISCOVER MORE". Hover dims to `{colors.primary-hover}`.
- **`button-ghost`** — Transparent with `{colors.ink}` label; same pill radius, same typography. Used over dark surfaces when a white fill would overpower the photography.
- **`button-tab`** — Rectangular, `{rounded.none}`, text in `{typography.nav-link}`. Active state marked by a 1px `{colors.border}` top rule. No fill change.

### Cards

- **`card`** — `{colors.surface}` background, zero radius, generous padding. Hosts model tile content: image above, name and category tag below.
- No card shadows. No card borders. Depth is photographic.

### Inputs

- **`input`** — Dark surface, underline-only border (2px white bottom border), zero radius. Used in dealer locator and request forms. Focus shifts border to full `{colors.ink}`.

### Navigation

- Full-width `{colors.surface-dark}` strip; MENU left, RR monogram centered, FIND A DEALER right. All labels in `{typography.nav-link}` 14px Regular with underline decoration.

### Badges

- Category tags: small `{rounded.pill}` chips in `{colors.surface}` with `{typography.caption}` UPPERCASE.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the default canvas for all new sections — the warmer near-black, not pure `{colors.surface-dark}`.
- Apply `{rounded.pill}` radius to every interactive button without exception.
- Set all CTA text in `{typography.button-ui}` — Riviera Nights Medium, UPPERCASE, 1.88px tracking.
- Use `{typography.display-hero}` at 70px with 15.4px letter-spacing for marquee headline moments — the extreme tracking is the brand's typographic signature.
- Maintain full-bleed, full-viewport hero photography for every major section. The car is the content.
- Use 100px vertical section padding (`{spacing.2xl}`) — the generosity of space signals luxury.
- Keep shadows to the scrim gradient only — no `box-shadow` on brand UI elements.
- Treat `{colors.primary}` (white) as the sole CTA color. One color, one action per screen.

### Don't
- Don't introduce accent colors — no heritage gold (`#b8992e`), no Rolls-Royce navy, no prestige purple. The palette is black and white only.
- Don't use border-radius values between `{rounded.sm}` and `{rounded.pill}`. The system is binary: sharp or full pill.
- Don't use Riviera Nights Bold (700) for headings — Bold is reserved for UI labels at small sizes only.
- Don't reduce letter-spacing on display headlines below 2.5px — the wide tracking is architectural, not decorative.
- Don't mix `{typography.display-hero}` and `{typography.display}` in the same viewport area — they are the same size; differentiate by context, not by stacking.
- Don't add promotional modules, sale indicators, countdown timers, or commerce urgency patterns — they are brand poison.
- Don't let content section padding fall below 48px vertical — compressed spacing reads as urgency, which is incompatible with the brand.
- Don't use the consent violet (`{colors.accent-violet}`) anywhere in brand chrome; it exists only in third-party UI.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | ≤375px | Single column, MENU hamburger, hero text scales to ~32–40px, full-width CTAs |
| Mobile | 376–640px | Single column, tighter gutters (16px), hero h2 ~40–48px |
| Tablet | 641–1024px | 2-column model grid, navigation expands, headline ~56px |
| Desktop | 1025–1200px | Full nav with FIND A DEALER, 3-column grid, headline 70px |
| Large Desktop | 1201–1440px | Maximum content width, generous lateral gutters, full hero impact |
| Ultra-Wide | >1440px–1600px | Container caps at 1600px, hero locks to 16:9 cinematic |

### Touch Targets
- Primary pill buttons at 14px vertical padding + 1.88 line-height resolve to ~46–48px tall — meets WCAG AAA 44px.
- Navigation links at 2.0 line-height provide adequate touch area on mobile.
- Model tiles: full-card tap target, not just the text CTA below.

### Collapsing Strategy
- **Navigation**: Full three-part nav (MENU / monogram / FIND A DEALER) collapses to hamburger + centered monogram on mobile.
- **Hero**: Full-viewport height maintained at all sizes; text scale reduces 70 → 48 → 34px.
- **Model grid**: 3-column → 2-column → 1-column at tablet and mobile.
- **Section padding**: 100px → 64px → 48px as screens narrow.
- **Letter-spacing**: Extreme 15.4px tracking collapses proportionally at mobile — remains distinctive, not illegible.

### Image Behavior
- All hero images served full-bleed; `object-fit: cover` maintains cinematic composition at every breakpoint.
- Model photography: consistent aspect ratio (~4:3 or 16:9) across all tiles for grid alignment.
- `fadeInUpAnimation` 0.4s ease-out: elements rise into view on scroll — preserved at all breakpoints.
- `loading="lazy"` on below-fold imagery.

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}` (near-black, not pure black)
- Deepest hero sections: `{colors.surface-dark}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- CTA fill: `{colors.primary}` (white pill)
- Border / divider: `{colors.border-subtle}`
- Navigation rule: `{colors.border}`

### Example Component Prompts

1. *"Create a full-viewport hero section on `{colors.surface-dark}` with a full-bleed cinematic photography background. Overlay the model name in Riviera Nights 70px / weight 300 / ALL CAPS / 15.4px letter-spacing in `{colors.ink}`, with a sub-label at 20px / 400 / 2.5px tracking beneath. Place a single white pill CTA (`{components.button-primary}`, 'DISCOVER NOW') centered 48px below the sub-label. Add a subtle top-to-bottom dark gradient scrim behind the text for legibility."*

2. *"Design a model-tile card on `{colors.surface}` background with zero border-radius. Image fills top 60% (16:9 ratio). Below: model name in Riviera Nights 34px / weight 300 / 2.5px tracking UPPERCASE in `{colors.ink}`. Category eyebrow in `{typography.caption}` above the name. No card shadow, no border."*

3. *"Build a navigation bar on `{colors.surface-dark}`: MENU text-link left in Riviera Nights 14px / 400 / 0.5px tracking; centered RR monogram at 32×32px; FIND A DEALER text-link right. All labels `{colors.ink}` with underline on hover. 16px vertical padding."*

4. *"Create a section heading moment: Riviera Nights 70px / weight 300 / UPPERCASE / 2.5px letter-spacing, `{colors.ink}` on `{colors.background}`. 100px top padding above it. A 28px / weight 500 / 11.2px tracking sub-heading directly below. Both centered. A white pill button (`{components.button-primary}`) 48px below the sub-heading."*

5. *"Design a dealer-locator input on `{colors.surface-dark}`: underline-only border (2px solid `{colors.ink}` bottom only), zero border-radius, Riviera Nights 16px / 400 / 0.5px tracking in `{colors.ink}`. Focus state: border opacity increases to 100%. Pair with a white pill submit button (`{components.button-primary}`) inline-right."*

6. *"Build a full-width editorial feature section: `{colors.background}` canvas, 100px vertical padding. Left side: model photography at 16:9. Right side: model name in 34px heading-section token, a 2-sentence description in `{typography.body-light}`, and a ghost pill button (`{components.button-ghost}`). At tablet breakpoint, stack image above text."*

### Iteration Guide

1. **Audit the canvas.** Every section should be `{colors.background}`, `{colors.surface-dark}`, or `{colors.surface}`. No mid-gray surfaces, no lifted whites on the main product pages.
2. **Audit letter-spacing.** Display headlines should feel almost too widely tracked — that IS the brand. If it feels tight, widen it.
3. **Audit button radius.** Every interactive button must be `{rounded.pill}`. Any rectangle button is wrong.
4. **Audit CTA text.** Every button label should be Riviera Nights Medium UPPERCASE. No sentence case, no lowercase.
5. **Audit shadows.** Strip `box-shadow` from all brand UI. The only depth effect allowed is the scrim gradient over hero photography.
6. **Audit photography.** The car must be the most important visual element on every screen. If any UI element competes, it is too prominent.
7. **Audit spacing.** Section padding should feel excessive by web standards — 100px is the standard, not the maximum.

---

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