Skip to content

Working with Nucleus


Where to start

In general, follow these three steps:

  1. Use this documentation to get accustomed to Nucleus and explore what it offers.
  2. Seek feedback through Nucleus channels on Github or Teams.
  3. Reach out to any member of the Nucleus team, start a conversation and ask questions.


Depending on which stage of their design or discovery work a person is at, the Nucleus team has a growing body of reusable assets, tools, methods and knowledge that can help them create feasible design mock-ups and prototypes. The team can help visualise ideas and would encourage individuals to:

  • Familiarise themselves with the provided documentation and component examples.
  • Check out the Nucleus Playground for an easy, visual way to prototype with the components.
  • Use the Playground support channel on Teams for any queries.
  • Take prototypes into testing on any browser and device, as well as test for accessibility using different assistive technology.
  • Use the Nucleus Figma UI kit library comprising Components and Foundations for mock-ups, which is automatically available to anyone who joins the British Gas workspace.
  • Reach out to the dedicated Figma support Teams channel for any questions.
  • Work with the Nucleus team to explore the feasibility of their concepts.
  • Collaborate with their engineers and involve them in their discovery work.


When building with Nucleus, users are able to utilise pre-tested, plug-and-play front-end components. A dedicated wiki for implementing the design system within Ember applications can be found at

The Nucleus team has had numerous successful collaborations with engineers from various teams and welcomes input to further improve the design system. Interested parties are encouraged to speak with the team directly.


Once development is completed, the Nucleus team ensures that the quality of the design system meets their standards.

Testing plays a vital role in validating and checking the quality of their work. Additionally, regression testing is performed to confirm that any recent additions or changes have not adversely affected existing features.

There are various ways to access, which the Nucleus team strive to make accessible to all visitors.

See the current list of browsers and devices identified as the most popular used by customers.

Product owners and business analysts

While they might not need in-depth knowledge of the shared UI styles and components, understanding the principles and requirements will help when reviewing current Proposals and discussing work ahead. Product teams should be pushed to explore the feasibility of existing assets before resolving to build custom, once-off components. After all, it is believed that the former will lead to better results for the business in the long run.

The Nucleus team is working towards an evidence-driven and purposeful use of all UI components. If an asset is performing particularly well, or poorly, in a certain context, it is encouraged to let the team know, as it will help them curate and improve their shared assets and documentation.

Content managers

It’s important to note that sometimes things can get squeezed in where they shouldn’t be. To combat this issue, shared documentation and tools are available to ensure that everyone is on the same page. One way to achieve this is through the use of shared, brand-aligned, plug-and-play assets. Additionally, tools like the example configurator in the documentation can make it easier to stress test and collaborate on content.

By following guidance and suggesting better solutions, individuals can improve their workflows and achieve their goals more efficiently.

Last updated: