Clarity Design System vs GOV.UK Design System
Clarity Design System
clarity.design
GOV.UK Design System
design-system.service.gov.ukSide by side
| Figure | Clarity Design System | GOV.UK Design System |
|---|---|---|
| Price from | Free | Free |
| Free plan | Yes | Yes |
| Free trial | — | — |
| Open source | — | — |
| Web | Yes | Yes |
| Self-hosted | — | Yes |
| Plans published | 1 | 1 |
| Spec score · UI Kit Libraries | 7.8 (#11) | 7.9 (#9) |
| Accessibility | Clarity follows WCAG 2.1 AA guidelines and has a dedicated accessibility team. | The team describes accessibility work as continuous and iterative, and says using the system alone does not make a service accessible. |
| Accessibility testing | Clarity tests accessibility across multiple tools, screen-reader and browser combinations against the WCAG 2.1 specification. | The team tests component accessibility with a mix of tools, automated deployment tests and manual testing. |
| Components | The toolkit includes 30+ components and over 200 icons. | It provides reusable interface components with usage guidance and coded examples. |
| License | The code is licensed under the MIT License. | The system's code is public and freely available under the MIT license. |
| Purpose | Clarity is an open-source, enterprise-focused design system centered on inclusion. | The system helps teams make government services consistent with GOV.UK and learn from research and experience across service teams. |
Plans
In their own words
Clarity Design System
Clarity Design System is a free, open-source toolkit for enterprise-focused interface design, with inclusion at its center. It combines design assets—including Figma themes, icons, color libraries, fonts and downloadable SVG icons—with more than 30 components and over 200 icons. Clarity Core provides reusable Web Components for Angular, React, Vue, other JavaScript frameworks, or projects without a framework. It is compatible with Webpack, RollupJS, Parcel and most framework CLIs. React projects need the additional @cds/react wrapper because React does not fully interoperate with custom elements. The datagrid supports more than a dozen features and thousands of data entries. Clarity follows WCAG 2.1 AA guidelines and has a dedicated accessibility team; accessibility checks cover multiple tools, screen readers and browser combinations. The code is licensed under MIT. Community questions go through GitHub Discussions, while issues and feature requests are tracked in GitHub Issues. Each major release is actively supported for six months after the next major release becomes available. Clarity Core currently requires a JavaScript bundler to import its dependencies.
GOV.UK Design System
The GOV.UK Design System helps government teams build services with shared styles, reusable components and patterns for user-focused tasks. Its guidance covers page structure, typography, colour and images; components include coded examples, and patterns address particular tasks and page types. Published guidance includes details about user-research testing. Teams can add GOV.UK Frontend through npm or include compiled files. In production projects, components can be used as HTML or as Nunjucks macros when Frontend is installed with npm and the application uses Node.js. Prototyping requires GOV.UK Prototype Kit version 7 or later. The code is public under the MIT License, and the listed plan is free. The system aims for WCAG level AA compliance, but its use alone does not make a service accessible; component accessibility checks combine tools, automated deployment tests and manual testing. The Government Digital Service maintains the system, with a focus on central UK government digital services. Support may be limited for other contexts. Compiled files include all Frontend CSS and JavaScript, without selective component assets or a customizable build.