RAC

Overview

RAC is the UK's premier automotive services brand, delivering roadside breakdown cover, insurance, and car servicing with unwavering reliability and immediate action. The design system embodies 'Action-Driven Pragmatism'—a visual language that prioritizes clarity, urgency, and trust through bold color contrast and purposeful typography. The brand personality is confident, reassuring, and no-nonsense: users trust RAC to solve problems fast, and the UI reflects that promise through direct CTAs, high-contrast orange accents (#f95108), and clean, legible layouts that eliminate friction. The emotional response is one of calm confidence—when your car breaks down, RAC is there, and the interface says so immediately.

Voice and vocabulary are direct, action-oriented, and human. RAC speaks in short, declarative sentences: 'Roadside cover from £5.29/month.' 'Cheaper than AA or we'll beat it by 20%.' 'Skip the garage hassle – we come to you.' No corporate jargon, no hedging. The tone is warm but efficient, never breathless or overselling. Example: 'Our patrols fix 4 in 5 breakdowns on the spot—no tow truck needed.'

Colors

The RAC color system is built on bold, high-contrast primaries designed for immediate visual hierarchy and accessibility. Primary (#f95108) is the brand's signature action orange—used exclusively on CTAs, key links, and interactive focus states. It commands attention without aggression, evoking urgency and energy. Secondary (#47474a) is a warm charcoal gray, used for body text, navigation, and structural elements; it provides stability and legibility against the white surface (#ffffff). Tertiary (#1e9771) is a confident teal-green, reserved for success states, confirmations, and positive feedback (e.g., toggle switches in 'on' state, checkmarks). Error (#cb0102) is a deep red, used sparingly for destructive actions and validation failures.

Surface stack: The page background is pure white

Typography

The type system uses Frederick Simms as the primary typeface, paired with Helvetica Neue and Arial as fallbacks—a pragmatic, no-nonsense choice reflecting RAC's engineering heritage and reliability. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand statements. Headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) breaks up content into digestible chunks. Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and prominent copy; body-md (16px, 400 weight, 24px line-height) is the default for all body text, ensuring 1.5x line-height for readability on screens. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, bad

Layout

The layout system uses a 12-column grid with a max-width of 1320px, centered on the viewport. The gutter is 24px (md spacing), providing consistent breathing room between columns. Container max-width is enforced at 1320px for desktop; on tablets (991px breakpoint), the grid collapses to 8 columns with 12px gutters; on mobile (<576px), it becomes single-column with 12px side margins. White-space is generous: section separation uses lg spacing (40px) vertically, creating clear visual breaks between hero, feature cards, and footer. Card padding is consistently md (24px), with sm (12px) used for compact list items and form inputs. The spacing scale is semantic: xs (4px) for micro-interactions like icon-to-text spacing, sm (12px) for form field padding, md (24px) for card padding and button pad

Elevation & Depth

Depth in the RAC system is achieved through a restrained shadow hierarchy and subtle background color shifts, avoiding the heavy drop-shadows common in older enterprise design. Level 1 (Base): flat white surface (#ffffff) with no shadow, used for the page background and primary content areas. Level 2 (Standard Card): 1px solid border in outline-variant (#adb5bd) + box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and secondary containers. This shadow has a 3px blur and 8px spread, creating a soft, diffused lift without harshness. Level 3 (Elevated/Hover): box-shadow: 0 2px 5

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied strategically to soften the industrial precision of the brand without sacrificing clarity or usability. Buttons use md radius (0.75rem / 12px), providing a friendly, approachable feel while remaining distinctly clickable. Cards and containers use DEFAULT radius (0.5rem / 8px), a subtle rounding that suggests containment without visual heaviness. Input fields and form controls use DEFAULT radius (0.5rem / 8px) for consistency with cards. Modals and elevated surfaces use lg radius (1rem / 16px), signaling importance and se

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses background #f95108, white text, 14px label-md typography, 16px vertical padding, 24px horizontal padding, and md radius (12px). On hover, the background transitions to #fd7e14 (primary-container) over 0.2s. On active/press, the background darkens to #e64a00 with an inset shadow (0 2px 4px rgba(0, 0, 0, 0.2)) to indicate depression. Button-secondary is transparent with a 1px solid border in outline (#6c757d), same padding and radius as primary, and on-surface text. On hover, the background becomes surface-container-high (#dee2e6) and the border darkens to on-surface-variant (#47474a). Button-ghost is transparent with no border, used for tertiary actions; on hover, it gains a subtle background (rgba(249, 8

Do's and Don'ts

**Do**

• Do use primary (#f95108) exclusively for CTAs and interactive focus states—never for body text or backgrounds.
• Do apply 0.2s ease-in-out transitions to all hover and focus state changes to provide smooth, predictable feedback.
• Do maintain 1.5x line-height (24px on 16px body-md) and 40px section spacing to ensure readability and visual breathing room.
• Do use md radius (12px) on buttons and DEFAULT radius (8px) on cards to maintain functional softness without visual confusion.
• Do enforce a 4.5:1 contrast ratio between text and background colors; test all color combinations with WCAG AA standards.
• Do use the full M3 color token system (surface-container-lowest through surface-container-highest) to create subtle depth without heavy shadows.

**Don't**

• Don't use primary (#f95108) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and active states only.
• Don't apply shadows deeper than lg (0 2px 5px 0 rgba(0, 0, 0, 0.26)) or use multiple layered shadows; the system uses a single, clean shadow per elevation level.
• Don't mix Frederick Simms with system fonts or web-safe serif fonts; always fall back to Helvetica Neue, then Arial, then sans-serif.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break visual consistency.
• Don't apply opacity changes to text below 0.6 for disabled states—use surface-container-low (#ededed) background instead to maintain contrast.
• Don't use color alone to convey state; always pair color changes with text labels, icons, or other visual indicators for accessibility.