What's Shell DS?

Our digital DNA

The Shell Design System is the heart of every digital product at Shell. It is the source of design principles, artefacts, reusable components, patterns and guidelines which Shell teams can trust to create accessible, human-centred digital experiences - quickly and at scale.

---

Structure of Shell DS

Shell DS is built on three layers: foundations, fabrics and frameworks.

Foundations - our brand in code and design

These contain the design language of Shell, reflected in the look and feel, colours, typography, icons, and other design rules and principles shared across the entire Shell Design System.

Fabrics - our intent

This is the theming layer used in a framework to adapt to the styling needs of an area of Shell business, or to provide a themed style, such as light and dark modes.

Frameworks - the building blocks

These consist of components which can be used individually or in combination to create Shell pages, sites and user interfaces.

---

What's inside

Each layer consists of design, code and documentation.

Design

Libraries containing styles and components are available in Figma.

Code

Repositories in GitHub contain code for components in React and React Native for use on web or mobile.

Documentation

The Shell DS site includes guidelines to assist you in following best practice, comprehensive detail on each component, and resuable patterns providing solutions to common user problems.