What is Nucleus?

Nucleus is the Design System of British Gas. Its purpose is to help provide cohesive and coherent web experiences.

The vision

To create an industry-leading design system that is well-known and respected.

The mission

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

The purpose

Empowering teams to collaboratively build reusable, coherent and accessible experiences that delight customers by using aligned principles and processes.

What is a design system?

A design system is a standardised set of reusable components for building applications, guided by clear principles.

Why do we have a design system?

Nucleus exists to enable the design of efficient, consistent and accessible experiences for our customers. Each element of the design system has been rigorously researched, designed, built and tested, to conform with a set of principles. By completing this discovery work, the hope is everyone can concentrate on creating consistent and coherent experiences for 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 the foundations.

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

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