Design System

I worked extensively on the development of the npower Design System including creating style guide documentation and the component library in Sketch.

The project required bringing together disparate historical components in a centralised design system. The design system is organised using an atomic structure and includes documentation and a component library that covers everything from the most fundamental intangibles, such as colours, through to complex elements like complete page templates.


As a part of the project, I developed a bespoke solution for the online style guide documention. This documentation is an imporant part of the design system as it increases visibility of design and design patterns across the business and is a tool for encourgaing consistency across all platforms. The solution was integrated with the company's Azure DevOps workflows allowing for version control of the documentation and automatic deployment of updates.

Component library

Every component in the design system was built into a component library in Sketch. This allows designers to quickly create designs inline with npower's design language from a single centralised library. Components were built for maximum reusability allowing them to be resized easily and including overrides to allow for quick customisation of attributes such as icons, colours and text.

Sketch plugin

Additionally, I created a Sketch plugin to allow designers to quickly setup artboards and grids inline with those defined in the design system. The plugin also accommodates additional artboards for common image sizes used in components within the design system.