---
name: Rolls-Royce
description: "This site is a prime example of restrained, ultra-premium digital design that uses typography and photography to create a powerful brand statement."
version: alpha

colors:
  background: "#151515"
  primary: "#FFFFFF"
  neutral: "#888888"
  bg-soft: "#222222"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 70px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "11.2px"
  sub-display:
    fontFamily: geometric-sans
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 300
    letterSpacing: "2.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Ultra-luxury automotive brand showcasing elegant vehicles through immersive, cinematic photography and restrained typography.

*A high-end luxury automotive magazine*

## Colors

Monochromatic dark base with high-contrast white text to let the photography speak.

- **Background (`#151515`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

Full-bleed hero with centered content

*Rhythm:* Generous whitespace to emphasize luxury and breathe

## Elevation & Depth

- Borders: Subtle thin lines for separators and outlines

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped outline buttons with uppercase text
- **card:** Full-bleed cinematic hero images
- **hero:** Full-screen background image with centered, stacked typography

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```