Creating a scalable and consistent design system

Rolls-Royce started a rebranding process with Pentagram, delivering new brand guidelines, and their digital positioning was affected. Collaborating with Pentagram to find a new digital status for Rolls-Royce was challenging; there were heritage files from 8 years past or more, and each page of the website was in separate Photoshop files, confusing, not scalable and complex to understand the source of truth.

- Files scattered on google folders

- Brand refresh not ready

- Migration to Sketch

- New requirements from RR

- Time constrain to do a launch

- Accessibility issues identified

- Heritage pages and components

- Three distinct usages of the brand

Components created in the library, expanding their flexibility with design

Text styles were carefully designed to be used on all platforms

Atomic symbols inside the design system to support scalability

User interaction increased after the launch of the new design system