Rolls-Royce Design System

Overview

Rolls-Royce Motor Cars' marketing site operates by the principle of absolute restraint. Atelier by subtraction. Where Ferrari fills its hero canvas with saturated red and Lamborghini deploys geometric accents, Rolls-Royce places a single cinematic photograph at full bleed and overlays six words of white uppercase type at weight 300. There is no brand accent color. There is no filled CTA button. The photography carries all chromatic and emotional labor; the design system exists only to frame it.

The comparison to peer ultra-luxury automotive brands makes the move legible. Aston Martin uses a dark teal accent and fills its primary button. McLaren wires orange voltage into its chrome. Bugatti uses a red-and-blue racing identity on every surface. Rolls-Royce holds the chrome neutral through the full page — not as an absence of decision but as the most deliberate one available to a brand whose product costs as much as a house.

Typography is Riviera Nights across every tier — a single proprietary sans-serif family running from the 70px display headline to the 12px navigation label, with every surface set in uppercase and tracked at 2–2.5px. Weight never exceeds 500. The display sits at weight 300, lighter than any comparable automotive hero headline in the directory.

Key Characteristics:

• Monochromatic chrome — pure white text and borders on near-black surfaces throughout, zero chromatic brand accent anywhere in the captured page.
• Riviera Nights small-caps across every tier — navigation, hero heading, body copy, buttons, and labels all use uppercase text-transform with 2–2.5px letter-spacing.
• Weight 300 display at 70px — the lightest heavy-headline treatment in the automotive category; Ferrari, Lamborghini, and Aston Martin all go to 600+ on their display tiers.
• Ghost-pill CTAs — transparent background, 1px white border, 30px or 99px radius, no fill, no brand color, no hover state captured.
• Zero radius on content surfaces — every card, section panel, and content container runs at 0px; the pill radius appears only on buttons.
• Full-bleed cinematic photography as the only chromatic voice — the cars' paint, interiors, and settings supply all color.
• 16px base spacing with 50px section gaps — sparse vertical rhythm that keeps the page from feeling dense.

Colors

Text

• Ink ({colors.ink} — ): frequency 151. Used as text (72), border (73), bg (6). The sole text and border color across the entire chrome — white on dark photography throughout every section.
• Ink Muted ({colors.ink-muted} — ): frequency 100. Used as text (50), border (50). A very dark charcoal used in lower-contrast footer and sub-panel contexts — nearly black but distinct from the true canvas.

Surface

• Canvas ({colors.canvas} — ): frequency 23. Used as bg (1), text (11), border (10), gradient (1). The deepest black, used on the page floor and inside gradient overlays behind photography.
• Surface-1 ({colors.surface-1} — ): frequency 14. Used as bg (2), text (6), border (6). An elevated dark surface for card containers and the discover-content grid below the fold.
• Shadow ({colors.shadow} — ): frequency 1, as shadow ink. Used once for a subtle elevation halo — the system has nearly no shadow presence.

Hairline

• Hairline ({colors.hairline} — ): carried by the ink token at border contexts (73 occurrences). White borders on dark surfaces are the only divider and button-edge treatment in the system.

Typography

Font Family

The system runs Riviera Nights exclusively — a proprietary display-and-text sans-serif shipped by Rolls-Royce as part of its global brand identity. Fallbacks walk Helvetica, Arial, -apple-system, sans-serif. There is no second voice, no serif, no monospace tier. The entire typographic range — 70px hero down to 12px label — uses one family at one transform setting: uppercase.

Hierarchy

Principles

Display sits at weight 300 — the lightest treatment for a headline this large anywhere in the automotive directory. Ferrari and Lamborghini use 600+ for their display tiers; Rolls-Royce's 70px / 300 reads as a whisper rather than a proclamation, which is the intended effect for a brand where the car itself is meant to speak. Weight 500 is reserved for the smallest label tier — 12px small-caps tags — where it prevents thin letterforms from disappearing at small sizes. The 2–2.5px letter-spacing is the system's defining typographic move: applied universally, it transforms Riviera Nights from a text sans into an atelier-display face at every size.

Note on Font Substitutes

Riviera Nights is proprietary. For the display tier (70px / 300), Cormorant Garamond Light in uppercase achieves a similar high-contrast, calibrated quality. For the navigation and button tiers (12px / 400 / uppercase / 2px tracking), Josefin Sans Light is the closest open-source match — it was designed specifically for the small-caps tracking treatment. For body paragraphs in the 14px range, Montserrat Light at 0.08em tracking transfers cleanly.

Layout

Spacing System

• Base unit: 16px — the dominant padding token, appearing 19 times in the captured page.
• Tokens: {spacing.xs} 8px · {spacing.sm} 15px · {spacing.base} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.2xl} 48px · {spacing.section} 50px.
• Section spacing: 50px bottom on hero content; 64px between discover content and the editorial grid.
• Card internal padding: {spacing.lg} (24px) on the discover-category cards.

Grid & Container

• Hero: full-bleed photography, no max-width constraint, text overlaid centered with left-aligned positioning at a 16px horizontal margin.
• Discover grid: 3-column card layout below the fold — the "Discover Further" section shows vehicle category tiles with 24px internal padding and no border.
• Navigation: horizontal top-nav with no background fill — transparent over the hero photography until a scroll threshold.

Rhythm

The page paces slowly. The hero photograph occupies nearly the full viewport; the first text moment is sparse white type at the bottom third. Below the fold, content arrives in generous single-panel sections with 50px of breathing room between them. The discover grid is the densest section — three cards at equal width — and even there, the typography-to-image ratio favors the image. The rhythm is the brand promise made spatial.

Elevation

The system has essentially no shadow tier. The captured page records one shadow occurrence, using a mid-grey ({colors.shadow} — grey) ink at low opacity. No cards use drop shadows. Depth comes from placing content against full-bleed photography rather than from surface layering — the car's three-dimensional form in the photograph provides all perceived depth.

• Flat (no shadow): 99% of all surfaces — navigation, cards, hero, footer.
• Single shadow: one subtle halo on an interactive element; the grey ink reads softer than pure black and avoids drawing attention away from the photography.

Shapes

The radius scale has three values and two contexts:

• {rounded.none} 0px — all content surfaces including every card, panel, and page section. Sharp corners on every container throughout the page.
• {rounded.pill} 30px — the primary CTA buttons ("VIEW THE COLLECTION", "CONFIGURE YOUR CAR"). Applied to the ghost-pill buttons with 15px vertical and 16px horizontal padding.
• {rounded.full} 99px — the secondary pill variant used in the discover/explore navigation rows. Renders as a fully-rounded capsule on small label-height elements.
• {rounded.circle} 50% — avatar and icon treatments in profile and media contexts.

There is no 4 / 8 / 12 / 16px middle tier. Content surfaces are always sharp; interactive pill surfaces jump to 30px or 99px. The contrast between sharp cards and pill buttons is the system's only shape-language device.

Components

button-primary — The signature ghost pill. Transparent background, white border 1px, white text in {typography.button-md} (12px / 400 / uppercase / 2px tracking), {rounded.pill} 30px radius, 15×16px padding, 44px height. "VIEW THE COLLECTION" is the canonical instance, placed at the center of the hero after the heading. No fill, no background color behind it — the car photograph shows through.

button-secondary — Same ghost treatment with a {rounded.full} 99px radius. Used in the discover-category navigation rows for shorter action labels. Same border, text, and sizing discipline as the primary.

top-nav — Transparent background on page load, white text, 65px height, 16px horizontal padding. The Rolls-Royce wordmark and Spirit of Ecstasy mark sit flush left; navigation links (Models, Bespoke, World of Rolls-Royce, Dealers, My Rolls-Royce) run center; a single account link sits right. No nav background fill is visible on the captured static surface.

nav-link — Transparent background, white text, {typography.nav-link} (12px / 400 / uppercase / 2px tracking), 16px horizontal padding. The smallest interactive text element in the system — yet the same tracked uppercase as the hero heading.

hero-heading — White text on transparent overlay, {typography.display-xl} (70px / 300 / uppercase / 2.5px tracking). 0 horizontal padding — the text sits directly in the compositional space of the photograph. The lightest display weight in the automotive category.

section-heading — White text, {typography.heading-lg} (20px / 400 / uppercase / 2.5px tracking). Section h3 markers — "DISCOVER FURTHER", "COACHBUILD COLLECTION".

body-paragraph — White text, {typography.body-md} (14px / 300), 12px top padding on a 24px left indent. The descriptive copy beneath vehicle names — sparse, never more than 2–3 lines.

card — Dark {colors.surface-1} fill, white text, 0px radius, 24px internal padding. Holds the three-tile discover grid images and their below-image text labels.

card-label — Transparent, white text, {typography.label-md} (12px / 500 / uppercase / 2px tracking). The category tags above discover grid items — "THE SPIRIT OF INNOVATION", "ROLLS-ROYCE MOTOR CARS BESPOKE".

hero-section — Full-bleed canvas black floor beneath the photography, text overlaid, no radius, no border.

discover-label — White text at {typography.heading-sm} (16px / 400 / uppercase / 2.5px tracking). The per-card title beneath discover-grid images.

category-strip — Transparent, white text, {typography.label-md}, 8×16px padding. The horizontal navigation categories in the discover row — "MOTOR CARS", "BESPOKE", "EXPERIENCES".

image-caption — White text, {typography.body-sm} (14px / 300 / 0.5px tracking), 12px top padding. Descriptive captions beneath vehicle images in the editorial sections.

footer — Dark {colors.surface-1} surface, charcoal {colors.ink-muted} text, 48×16px padding. No elevated border from the page floor — the footer continues the dark surface directly.

Do's and Don'ts

Do let the photography carry all chromatic weight. The design system is built on the assumption that a Rolls-Royce photograph — whether the Droptail's iridescent paint on a mountain road or the Phantom's interior detail — contains more visual authority than any brand color applied to chrome.

Do apply uppercase and 2px letter-spacing to every text element regardless of size. The tracked small-caps treatment is the single typographic identity token; departing from it at any tier — even the smallest label — breaks the system's internal consistency.

Do use {rounded.pill} 30px or {rounded.full} 99px on buttons and pill labels only. The sharp/pill radius contrast is the system's only shape-language move — introducing a 4 / 8 / 16px middle tier softens the contrast and makes buttons read as ordinary interface elements rather than deliberate framing devices.

Do keep display weight at 300. The ultra-light hero headline at 70px / 300 is the system's most counter-discoverable typographic decision and its most precise brand signal — bumping to 500 or 600 moves it toward Ferrari or Aston Martin territory.

Don't introduce any accent color into the chrome. Not a hover state in brand gold, not a CTA button in heritage green, not an icon in teal. The monochromatic discipline is the design system's single hardest constraint and its clearest brand statement. Any chromatic addition reads as lacking conviction.

Don't use a filled button background. The ghost-pill treatment — transparent with a 1px white border — is the only CTA treatment in the system. Filling it with even a near-white or off-white tone (, as Cloudflare uses for cream) would change the figure-ground relationship between the button and the photography behind it.

Don't use shadows on any card or content surface. There is one shadow occurrence in the entire captured page. The system achieves separation between surfaces through dark tonal contrast ({colors.surface-1} on {colors.canvas}) rather than shadow. Adding shadows makes the surfaces feel like UI components rather than gallery frames.

Don't set body copy at weight 400 or above. The body tier runs at 300 — the same weight as the 70px display headline. Weight 400 appears only on navigation and sub-heading tiers; weight 500 only on the smallest labels. Increasing body weight makes the text compete with the imagery rather than recede gracefully beneath it.

Known Gaps

• Hover and focus states: no hover or active states were captured from the static marketing surface — it is likely that ghost-pill buttons have a subtle white-fill or opacity transition, but this is not documented here.
• Dark/light mode: the site is dark-only on the captured surface; a light-mode variant may exist for editorial content pages (model specification sheets, dealer locator) but is not represented.
• Animation: the hero photography transitions between multiple vehicle images on a slow dissolve cycle; the duration and easing curves are not captured.
• Configurator surface: the Rolls-Royce bespoke configurator (www.rolls-roycemotorcars.com/configure) likely carries a much richer token set with color swatch selectors, material-picker components, and multi-step wizard layouts that are not exposed on the marketing homepage.
• Bespoke variant palette: the Black Badge sub-brand uses a near-identical chrome system but with a distinct set of darkness levels — the system may have a surface-2 token for the deeper-black Black Badge contexts.
• Responsive breakpoints: the mobile navigation drawer, hamburger state, and image-crop behavior at mobile widths are not represented in the captured desktop tokens.
• Typography at mobile sizes: the 70px display headline almost certainly scales down significantly on mobile; the scale factor and breakpoint are not captured.