Skip to main content


To get you up and running with Nucleus.

Our vision 🌟#

To create an industry leading design system that is known and respected across the community.

Our mission 🚀#

Nucleus is an inclusive, community driven design system. It brings together our brand personality and world class experiences.

Our purpose 🧩#

To enable teams across British Gas to deliver consistent, accessible experiences that delight our customers.

What is a design system?#

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.”

  • InVision’s Design Systems Handbook

Why do we have a design system?#

Nucleus exists so we can efficiently design consistent and accessible experiences for our customers. Each element of the design system has been rigorously researched, designed, built and tested, to conform with our principles. By completing this discovery work, we hope that everyone is able to concentrate on creating consistent and coherent experiences for our customers.

How has the design system been created?#

Nucleus is built from small elements, such as typographic styles, colours, scale and visual assets - these form our foundations.

These foundations are brought together to form components. These range from elemental items such as a CTA - which is comprised of an icon and text, to more complex organisms containing multiple typographic styles and/or visual elements.

Through continuous exploration and implementation we also have begun to develop patterns. These are highly complex structures, which contain groups of elements or components.

Join our Slack channel#

The easiest way to stay updated on what's going on is to join our Slack channel, #product-nucleus.