What is Rolls-Royce's primary brand color?

Rolls-Royce's marketing site carries no brand accent color at all. The entire chrome — navigation, buttons, typography, borders — runs in pure white on dark photographic backgrounds. The only colors visible on the page are those present in the car photography itself: the iridescent blue of the Coachbuild Droptail, the warm interior leathers, the mountain scenery. This is not an oversight — it is the deliberate positioning of an atelier that considers any logo-colored CTA button beneath its brand. The system's theme color is declared as a deep purple-black in the HTML meta tag, but that value does not appear in any rendered chrome element captured from the page.

What typeface does Rolls-Royce use, and what should I use as a substitute?

Rolls-Royce runs Riviera Nights — a proprietary display typeface — across every typographic tier including navigation, headings, body paragraphs, and button labels. Every surface applies uppercase text-transform with 2–2.5px letter-spacing; there is no mixed-case prose in the chrome. Weight ranges from 300 (hero display, body) to 500 (labels, small caps). The closest open-source substitute for the light display sizes is Cormorant Garamond at equivalent weights, which shares Riviera Nights' high-contrast stroke modulation; for the body and nav tiers, Josefin Sans at weight 300 with tracking set to 0.15em is the nearest match.

What is Rolls-Royce's corner-radius philosophy?

The radius scale has three values and nothing in between: 0px on all content surfaces including cards, panels, and hero sections; 30px on the primary CTA buttons (the bespoke ghost-pill treatment); and 99px on the secondary pill buttons that appear in the discover/explore navigation rows. There is no 4px, 8px, or 16px middle tier. The jump from sharp-cornered cards to a 30px pill button is intentional — the radius contrast signals that the CTA is the only interactive element on an otherwise art-directed page. Aston Martin and Ferrari both use smaller radii (4–8px); Rolls-Royce's 30px pill is among the most generous in the automotive category.

How does Rolls-Royce design its CTA buttons?

Every button on the Rolls-Royce marketing site is a ghost pill: transparent background, 1px white border, white uppercase text in Riviera Nights at 12px / weight 400 / 2px letter-spacing. There is no filled button, no brand-colored CTA, and no hover-fill effect captured in the static surface. The ghost treatment places the car photography fully visible behind the button — the button is framing, not interruption. This is the opposite of the automotive convention where Ferrari uses a red-fill CTA and Porsche uses a black-fill pill; Rolls-Royce's button steps back so the vehicle can remain the visual subject.

Can I use this DESIGN.md to build a luxury brand marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Rolls-Royce's specific moves: monochromatic white-on-dark chrome, Riviera Nights-equivalent small-caps at 2–2.5px tracking, ghost-pill CTAs at 30px radius, and ultra-light display weight at 300. The tokens resolve without invention. The key caveat for replication: the system depends almost entirely on full-bleed cinematic photography to carry all chromatic and emotional weight. Implemented without imagery of equivalent quality, the monochromatic scheme reads as unfinished rather than restrained. Plan the photography strategy before committing to the no-accent-color discipline.

Rolls-Royce Design System

Rolls-Royce's marketing-site design system as a DESIGN.md file.

About Rolls-Royce DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source rolls-roycemotorcars.com

Automotive

Rolls-Royce Motor Cars' marketing site operates by subtraction. Where Ferrari fills its hero with saturated racing red and Lamborghini wires the viewport with hexagonal geometry, Rolls-Royce places a single cinematic photograph edge-to-edge and layers six words of white uppercase type at weight 300. The headline for the Coachbuild Collection — "COACHBUILD COLLECTION" — runs at 70px in Riviera Nights with 2.5px letter-spacing. There is no background color behind it. There is no CTA button in the hero fold. The car is the design system.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 6 color tokens, all monochromatic — pure white for text and borders, three steps of near-black for surfaces, a light grey for a single background instance, and a medium grey used once as a shadow ink. No brand accent color appears anywhere in the captured chrome. Nine typography tokens run a single family, Riviera Nights, in a uniform weight band of 300–500, with every nav, button, and heading surface forced to uppercase and tracked at 2–2.5px. The radius scale jumps directly from 0 to 30px to 99px — no small-step tier. Fourteen components cover the ghost-pill button, the all-caps nav link, the cinematic hero heading, and the sparse card grid below the fold.

Feed this file to an AI coding tool and it reproduces Rolls-Royce's specific moves: zero brand accent color, Riviera Nights small-caps across every chrome surface, transparent ghost-pill CTAs, and ultra-light display weight. The one discipline worth borrowing only if your product can carry the visual weight of a hero image this strong: trust the photography entirely and give the type system almost nothing to do. Rolls-Royce gets away with this because the cars are among the most visually arresting objects a camera can capture. Most brands need a supporting chromatic layer.

What makes it distinct

Monochromatic atelier palettethe system carries zero brand accent colors; the only chromatic elements are the photography itself, making the cars the sole color statement
Riviera Nights at small-caps everywhereevery heading, button, nav link, and label runs uppercase with 2–2.5px letter-spacing; no mixed-case prose in the chrome
Ghost-pill CTAsbuttons are transparent with a white border at 30px or 99px radius; no fill, no brand color, no icon — the car image behind the button does the selling
Weight 300 display at 70pxthe hero h2 is the lightest heavy headline in any automotive system; Ferrari and Lamborghini go to 700 and above, Rolls-Royce stays at 300
Negative-space compositionthe design system's primary layout device is restraint; large-format photography bleeds edge-to-edge with text placed as sparse white type on dark imagery

Live at rolls-roycemotorcars.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

rolls-roycemotorcars.com

Explore Rolls-Royce

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Rolls-Royce design system FAQ

Common questions about Rolls-Royce's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Rolls-Royce — official site

Rolls-Royce Motor Cars' public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.