Rolls-Royce Motor Cars

Overview

Rolls-Royce Motor Cars represents the pinnacle of automotive luxury and bespoke craftsmanship, serving discerning clientele who demand uncompromising excellence. The design system embodies "Architectural Minimalism"—a philosophy that marries austere, high-contrast geometry with refined typography and purposeful whitespace. The visual language evokes timeless sophistication: pure white backgrounds (#ffffff) anchor the composition, while deep purples (#6d30a7) and charcoal accents (#222222) provide strategic emphasis. The emotional response is one of understated power and precision—every pixel serves a function, every color choice deliberate. The brand personality is authoritative yet approachable: confident without arrogance, innovative without trend-chasing. Voice example: "The Spectre Series II redefines motion through meticulous engineering and uncompromising vision."

Colors

The color palette operates on a principle of extreme contrast and restraint. Primary (#ffffff) is the dominant surface, representing clarity and purity—the canvas upon which all content breathes. Secondary (#6d30a7), a deep amethyst, functions as the brand's signature accent, appearing on CTAs ("DISCOVER NOW" buttons), interactive states, and key brand moments; it conveys luxury and exclusivity. Tertiary (#3860be), a sophisticated slate blue, supports secondary accents in data visualization and status indicators. On-surface (#000000) and on-surface-variant (#222222) provide the typographic hierarchy, with the variant used for secondary text and UI chrome. The surface stack (surface-container-lowest #fafafa through surface-container-highest #dddddd) creates subtle depth without compromising

Typography

The typography system pairs classical serif letterforms with refined sans-serif body copy, creating a visual hierarchy that balances authority with accessibility. Display and headline levels use Trajan Pro (a serif typeface evoking classical Roman inscriptions), set at 72px, 48px, and 36px respectively, with tight letter-spacing (-0.02em to 0em) to reinforce formality and precision. Body and label text employ Riviera Nights, a geometric sans-serif, at 18px, 16px, 14px, and 12px, with generous letter-spacing (0.01em to 0.1em) to enhance legibility and convey spaciousness. Font weights are deliberately restrained: headlines use 700 (bold), body text 300–400 (light to regular), creating visual contrast without heaviness. Line-height is set generously (1.4–1.5x font size) to ensure comfortable

Layout

The layout system employs a 12-column fluid grid with a maximum container width of 1440px, ensuring content scales gracefully from mobile to desktop. Whitespace is treated as a first-class design element: the spacing scale (unit: 8px, with sm/md/lg/xl increments) creates rhythm and visual breathing room. Section separation uses lg spacing (40px) to establish clear content zones; internal component padding uses md spacing (24px) for consistency. The gutter width is 24px, providing comfortable margins around content blocks. Container max-width of 1440px prevents text lines from exceeding optimal reading length (~80 characters) while maintaining visual impact on ultra-wide displays. The brand philosophy prioritizes negative space: rather than filling every pixel, layouts embrace emptiness as

Elevation & Depth

Depth in this system is achieved through subtle shadow and border treatments rather than dramatic layering. Level 1 (Base): flat surfaces with no shadow, relying on borders (1px solid outline-variant #999999) for definition. Level 2 (Cards/Modals): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), paired with a 1px border at outline-variant, creating gentle separation from the background. Level 3 (Elevated Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), with a 2px border at secondary (#6d30a7) to signal prominence. Modal overlays use a semi-transparent black background (rgba(0, 0, 0, 0.5

Shapes

The shape philosophy is termed "Architectural Precision"—favoring sharp, geometric forms that evoke engineered excellence. Border-radius follows a deliberate scale: sm (2px) for subtle softening on inputs and small UI elements; DEFAULT (4px) for standard cards and containers; md (8px) for medium-emphasis components; lg (12px) for secondary CTAs; xl (30px) for primary buttons and hero CTAs, creating a distinctive rounded-rectangle silhouette that balances approachability with formality; full (9999px) for badges and pill-shaped elements. Buttons use xl (30px) radius to create a signature visual

Components

Action Elements Buttons are the primary affordance for user intent. The button-primary component uses a white background (#ffffff) with a 2px black border (#000000), 30px border-radius, and 48px height, creating a distinctive pill shape. Text is set in label-md (14px, 400 weight, 0.08em letter-spacing) for clarity and formality. On hover, the background shifts to primary-container (#f2f2f2) with on-primary-container text (#222222), maintaining contrast while signaling interactivity. On active/pressed state, the background becomes surface-container-highest (#dddddd) with on-surface text (#000000). The button-secondary variant uses a transparent background with a 2px secondary border (#6d30a7), allowing the brand accent to dominate; on hover, the background fills with secondary (#6d30a7)

Do's and Don'ts

**Do**

• Do use white (#ffffff) as the dominant background to reinforce clarity and luxury; negative space is a design asset, not wasted real estate.
• Do apply the secondary purple (#6d30a7) sparingly and strategically on CTAs, focus states, and brand-critical moments to maximize impact and recognition.
• Do pair Trajan Pro serif headlines with Riviera Nights sans-serif body copy to create visual contrast between authority (serif) and accessibility (sans-serif).
• Do use the 30px border-radius exclusively on primary CTAs to create a distinctive, recognizable button silhouette that signals brand presence.
• Do maintain 1px borders on cards and inputs with outline-variant (#999999) to define surfaces without visual heaviness.
• Do apply md-level shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and lg-level shadows (0 8px 24px rgba(0, 0, 0, 0.2)) to modals to create clear depth hierarchy.
• Do use letter-spacing (0.08em–0.1em) on labels and CTAs to enhance legibility and convey spaciousness aligned with the luxury aesthetic.

**Don't**

• Don't use the secondary purple (#6d30a7) for body text or backgrounds; reserve it exclusively for interactive elements and brand accents to maintain visual hierarchy.
• Don't apply border-radius greater than 4px to cards, inputs, or secondary UI elements; the 30px radius is reserved for primary CTAs to maintain distinctiveness.
• Don't mix serif and sans-serif typefaces within a single text block; use Trajan Pro for headlines and Riviera Nights for body/labels to avoid visual confusion.
• Don't use drop shadows greater than lg-level (0 8px 24px rgba(0, 0, 0, 0.2)) or apply multiple layered shadows; the minimalist aesthetic demands restraint.
• Don't reduce letter-spacing below 0.01em on body text; the brand relies on generous spacing to convey luxury and legibility.
• Don't use colors outside the defined palette (surface, secondary, tertiary, error) for UI elements; consistency across the ecosystem reinforces brand recognition.
• Don't apply background colors to links; use the 1px bottom border and secondary text color (#6d30a7) as the primary affordance, with hover-state background fill as the secondary signal.