Citizens Advice Design System
Working with a front-end engineer and two product designers, we created a design system that now powers almost all public facing digital products at Citizens Advice.
The design system uses ITCSS and the BEM nomenclature to provide a low-specificity, readable and easily maintainable collection of styles and utilty classes that encourgae semantic HTML markup. There are a couple of simple javascript modules for common components like accordions, disclosures and headers. These are distrbuted via npm. Common components are extracted into ViewComponents and tested via a demo app.
CADS has saved countless engineer hours over its lifetime, enabled rapid prototyping, ensured consistency for our users and shared baked-in accessibilty features across our digital estate.
