CivicTheme, an open-source design system for government
Everyone builds the same components, separately: navigation, cards and accessible forms
Every public-sector website needs the same handful of things:
- a navigation people can actually use
- a card, a button, a form that works with a screen reader
- pages that read unmistakably as official
Most organisations pay to build all of it again, from scratch, on every project.
The cost is not only the first build. It shows up again when a component changes and nobody can say which of your sites carries which version, and again when accessibility arrives late as a remediation ticket rather than early as a default. And the sites drift apart until services meant to feel like one government no longer do.
A shared design system converts that repeated spend into a single maintained asset. Designing one is the easy half. The hard half is maintaining it so that the teams downstream can take an update without fear.
What CivicTheme is: a UI Kit, a Drupal theme, modules and a Figma source
CivicTheme(Opens in a new tab/window) is an open-source, component-based design system published by Salsa Digital(Opens in a new tab/window). Its own documentation puts the purpose plainly: it was created "so governments and corporations can rapidly assemble modern, consistent and compliant digital experiences".
4 parts ship, and they stay in step:
- a CMS-agnostic UI Kit of components built with HTML, CSS and JavaScript, browsable in Storybook
- a Drupal(Opens in a new tab/window) theme that connects the content model to those components
- supporting modules, including one that adapts the theme to the federal GovCMS(Opens in a new tab/window) platform
- a Figma design source that carries the same version number as the code, so a designer and a developer are provably looking at the same release
Accessibility sits in the baseline rather than in each agency's budget. The documentation is explicit: "The components have been built and assessed to comply with WCAG accessibility standards 2.1 AA out-of-the-box."
Our part in the work: architecture, release engineering and maintenance since 2021
Salsa Digital publishes CivicTheme, hosts it and runs its community. We wrote its first commit in September 2021 and have provided the engineering behind it ever since:
- architecture of the component system
- development of the components, the theme and the supporting modules
- release engineering, to drupal.org and to npm
- ongoing maintenance as Drupal, PHP and GovCMS move forward
Everything is developed in one repository and published out to the separate ones people install from. Develop together, ship separately: that one decision lets a small team keep a theme, a component library, companion modules and a documentation site moving in step.
Underneath it, the build and continuous integration run on our own open-source project tooling, the same tooling we bring to client platforms. For a client, that reads as inheritance: the build and test discipline behind a public design system arrives with us on your own platform.
Making an update safe to take: visual regression and schema update tests
Components exist in 2 forms, Twig templates and Drupal Single Directory Components, so that Drupal consumers and non-Drupal consumers each get the implementation they need. Keeping 2 versions of every component honest by hand would be untenable, so parity is machine-enforced: tooling synchronises them, and a check command fails the build the moment they drift.
The primary defence is visual. A unit test cannot tell you that a button moved 4 pixels, and teams downstream notice.
So every pull request captures screenshots of the components, publishes a side-by-side comparison and posts the link back into the review conversation where someone will actually read it. The same pipeline does double duty: one comparison catches a visual regression against the released version, the other catches drift between the 2 component implementations.
Then there is the question every organisation actually asks: what happens to our site when we take the update? Because the system ships configuration for content types, fields and site settings, updates are rehearsed against committed database snapshots, both schema-only and schema-with-content, before they reach anyone.
For a team downstream, that is what makes an update routine rather than a project: the change has been rehearsed against a database shaped like yours before it reaches you.
Release rules follow the same instinct: on drupal.org, where a release cannot be deleted, only the development branch is ever pushed.
Where it is now: Drupal 10 and 11, GovCMS, and 4 content profiles
Live and in service. Published on drupal.org and on npm, documented at docs.civictheme.io(Opens in a new tab/window), with the component library and a live demonstration site online.
4 industry content profiles ship alongside a default:
- Corporate
- Government
- Higher Education
- Health
Each is a complete worked example rather than a starter shell, so a team can watch the system do the job before committing to it.
It tracks the platform forward: Drupal 10 and Drupal 11, current PHP, GovCMS support kept current. A steady release cadence has carried it across 4 years, with a pre-release channel so teams can test a release candidate before they take it.
A single maintained design system, 4 industry content profiles, and 4 years of steady releases.
4 years on, we are still the engineering behind it.
For teams rebuilding the same components on every site
Everything on this page is 4 of our services running on one public open-source design system: the architecture of the component system, the development of the components and modules, the DevOps and release engineering that ships them, and the ongoing support and maintenance that keeps all of it current. The same standard applies to our AI-assisted delivery: whatever writes a component, the visual comparison and the schema update tests are what decide it is safe to release.
If you run a government agency, a university, or any organisation with a family of sites that keep drifting apart, this is the shape the engagement takes: a component library that is genuinely shared, accessibility in the baseline rather than in a remediation ticket, and updates rehearsed before they reach your site.
If you are weighing up CivicTheme for your next site, or you already run it and want taking an update to be routine, tell us which sites you are trying to keep in step.