Welcome to SDS 2!

Explore the new features exclusively available in this version of the Shell Design System.

Welcome to the

Shell Design System

Guidelines

Guidances for applying Shell’s design principles to create better user experiences.

Components

The building blocks used to create digital products at Shell.

Patterns

Reusable combinations of components in flexible, best-practice design solutions.

Designers

Get started with our Figma UI library of 40+ components

Developers

Get started with our frameworks in code

Design templatesWith best in class examples of Dashboards, Mobile Apps, Emails and Websites - SDS Figma templates are your best place to get started with designing on-brand, accessible and delightful products at Shell.

Contribution

Contribute

If you would like to get involved but unsure where to begin, look no further. Designers and developers like you have helped to make Shell Design System great, we’re glad you’re here.

Resources

Fonts

Download the latest versions of Shell Font from the Brand Central site.

Illustration library

Browse our gallery of illustrations to build beautiful, on-brand designs.

Icons

Browse the complete SDS icon library of over 1000+ icons for use in your apps and projects.

Brand Central

Learn more about the Shell master brand and the latest Brand Expression features.

Creative Hub

Access to thousands of Shell approved images, videos, sounds and logos.