Welcome to the
Shell Design System

Shell DS consists of working code, design examples and guidelines to help you build accessible, delightful digital experiences at Shell.

Get started with Shell DS

Guidelines

Guidelines are design suggestions for creating seamless user experiences. Rely on guidelines to create efficient, accessible and consistent products at Shell.

Explore guidelines

Accessibility

Important suggestions for creating inclusive digital products.

Typography

Recommendations to be followed for type styles used to organise content across Shell's digital products.

Colour

Foundational tips to be followed for colour usage across different user interfaces of Shell.

Components

Components are the building blocks of the Shell Design System used to build the foundations of products at Shell. Every component combines to create seamless user experiences with consistent interactions.

Explore components

Button

A button allows a user to initiate an action.

Text Input

A text input allows users to enter data.

Alert

An alert is used to present the user with important messages.

Resources

A collection of assets and UI kits to enable our design community to build consistent, accessible and on-brand digital products.

Contribution

The Shell Design System thrives on feedback and community contributions. Find out how you can get involved.

Figma Libraries

A rich repository of shareable design components and styles.

Fonts

Choose fonts from the Shell Design System collection for all text content.

Illustration library

Browse the Shell Design System gallery of illustrations to build beautiful, on-brand designs.

Logo library

Select the ideal logo for your digital product from the Shell Design System collection.

Icons

Browse the complete icon library for Shell DS.