CURATED · OPEN · FREE

Rolls-Royce

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

automotiveluxury

↓ Download design system (15 MB)Open in OpenDesign

Visit: https://www.rolls-roycemotorcars.com

📦 Browse pack contents →

Identity DNA

ultra-luxuryheritageautomotivecraftsmanship

A high-end luxury automotive magazine

Color

#FFFFFFInk

#151515BG

#222222BG soft

#888888Muted

rgba(255, 255, 255, 0.2)Line

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

Typography

geometric-sans · sans-serif

display70px · 300
sub-display28px · 300
body16px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace to emphasize luxury and breathe

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

Subtle thin lines for separators and outlines

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-bleed hero with centered content

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth fade-ins for text and UI elements

Subtle opacity change or background color transition · Immediate response with smooth transition

Components

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

Voice & Don'ts

Tone Authoritative, elegant, and understated
Headlines All-caps, wide letter-spacing, light weight
CTAs Pill-shaped outline buttons with centered uppercase text

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
Avoid: Cluttered layouts
Avoid: Bright, saturated accent colors
Avoid: Casual language

Inside the pack — real screenshots

Rolls-Royce — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko