# Rolls-Royce · Design system migration spec

> Source: https://www.rolls-roycemotorcars.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of restrained, ultra-premium digital design that uses typography and photography to create a powerful brand statement.

## 1. Identity DNA

The Rolls-Royce Motor Cars design system is built like a high-end automotive magazine: every spread is a cinematic composition where photography is the primary text and typography provides the elegant, restrained framework. The system’s identity is rooted in ultra-luxury heritage and craftsmanship, translated into a digital language of extreme restraint and timeless sophistication. This is a system where the most powerful design move is often the removal of an element.

**One-liner:** Ultra-luxury automotive brand showcasing elegant vehicles through immersive, cinematic photography and restrained typography.
**Keywords:** ultra-luxury · heritage · automotive · craftsmanship
**Analogy:** A high-end luxury automotive magazine

## 2. Color

The color system is strictly monochromatic, built on a deep black base with off-white text and subtle grays for hierarchy. This cinematic palette ensures the vehicle photography remains the sole focal point, with high contrast creating drama without color distraction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#151515` | main background |
| `--bg-soft` | `#222222` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#888888` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** Monochromatic dark base with high-contrast white text to let the photography speak.

The principle is absolute: let the photography speak, using color only to provide a flawless, non-competing backdrop.

## 3. Typography

Typography is exclusively set in a clean, geometric sans-serif (Jost), always uppercase with generous letter-spacing. Light weights (300-400) are used for all text, from headlines to navigation, establishing a voice that is elegant, authoritative, and distinctly modern.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.0 | 300 | 11.2px | Hero main headline |
| sub-display | 28px | 1.2 | 300 | 2.5px | Hero sub-headline |
| body | 16px | 1.5 | 400 | 0.5px | Body text and navigation |

**Type rules:**
- All text is uppercase
- Light weight is used for large display text
- Generous letter-spacing on headlines

## 4. Spacing

Spacing follows a rhythm of generous whitespace, using scale and emptiness to convey luxury and allow each element to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace to emphasize luxury and breathe

## 5. Surfaces

Surfaces are defined by clean photography and solid dark tones, with shadows completely absent. Separation and structure are achieved solely through subtle, thin lines that act as delicate outlines.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Subtle thin lines for separators and outlines

## 6. Layout

The layout skeleton is a full-viewport, cinematic hero that immerses the user in a single, powerful image. Content is centered within this frame, creating a singular, uncluttered focal point that commands attention.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero with centered content

## 7. Motion & Interaction

Motion philosophy is one of smooth, deliberate pacing, with all transitions using slow fades and subtle opacity changes. Every animation, from text reveals to hover states, operates at 0.4 seconds, matching the brand’s calm and refined character.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth fade-ins for text and UI elements

- **Hover:** Subtle opacity change or background color transition
- **Click:** Immediate response with smooth transition
- **Transition:** 0.4s opacity and transform transitions
- **Keyboard:** Standard focus outlines

## 8. Voice & Don'ts

The editorial voice is authoritative, elegant, and understated. All-caps headlines with wide letter-spacing and pill-shaped outline buttons create a tone of quiet confidence, deliberately avoiding any casual or loud language.

- **Tone:** Authoritative, elegant, and understated
- **Headline style:** All-caps, wide letter-spacing, light weight
- **CTA style:** Pill-shaped outline buttons with centered uppercase text
- **Avoid:** Cluttered layouts / Bright, saturated accent colors / Casual language

### Don'ts
- ❌ Don't use bright, saturated accent colors — the palette is strictly monochromatic and cinematic
- ❌ Don't use heavy, bold font weights — the aesthetic relies on light, elegant typography
- ❌ Don't use small, tight letter-spacing — the design breathes with wide tracking on headlines
- ❌ Don't use decorative, script, or highly serifed fonts — the typography is clean, geometric, and modern
- ❌ Don't clutter the interface with multiple calls-to-action — the layout focuses on single, clear focal points
- ❌ Don't use busy, textured, or gradient backgrounds — the design relies on clean photography and solid dark tones

The system deliberately excludes bright accent colors, heavy typography, and cluttered interfaces to protect its core principle of cinematic restraint.

## System Prompt (paste into AI tool)

```
This is a luxury automotive brand website. The design language is cinematic, featuring full-bleed photography with a dark, monochromatic color palette (#151515, #222222). Typography is exclusively uppercase, using a clean geometric sans-serif (Jost) with generous letter-spacing (e.g., 11.2px on large headlines) and light weights (300-400) to convey elegance. Interactions are subtle, relying on smooth opacity and transform transitions (0.4s). Critical donts include: avoiding bright accent colors, avoiding heavy bold font weights, and avoiding cluttered interfaces with too many competing elements. The overall feeling should be one of extreme restraint, premium craftsmanship, and timeless sophistication, allowing the product photography to be the primary focus.
```
