Introduction
Welcome to CivicTheme! CivicTheme is an open-source, government-grade design system led by open-governance with a vision.
CivicTheme's vision
Build an enterprise-grade atomic design system & community of practice to deliver common UI patterns & governance infrastructure to accelerate consistent, accessible, brand-aligned, research-backed UX.
The origin story of CivicTheme started from having experienced the pains of the frequent reinvention of solutions and inconsistencies in design across multiple projects, resulting in inefficiencies and fragmented user experiences. A unified, world-class design system, co-created with the community, is essential to standardise solutions, enhance user experience, and drive innovation by addressing common problems and desired outcomes.
For every citizen.
CivicTheme overview
CivicTheme is an open-source design system developed through an open-governance model, driven by a collaboration of government agencies, digital agencies, and community members who actively use the product. It was created to enable governments and organisations to rapidly build modern, consistent, and compliant digital experiences.
CivicTheme's development is shaped by contributions from the community, ensuring it evolves to meet the needs of various sectors. Initially developed as a Drupal theme, CivicTheme aspires to support a broader range of languages and frameworks in the future.
Key Components of CivicTheme
CivicTheme is comprised of three key components:
1. Design System
CivicTheme is built around the principles of atomic design, meaning it provides a scalable, reusable set of components that can be combined to build digital interfaces. The Design System exists as both a visual guide in Figma and a component library in Storybook.
Figma: The Figma file is a visual representation of CivicTheme's components and design templates, allowing designers to work directly with pre-built UI elements.
UI Kit: The UI Kit is a collection of components built with HTML, CSS, and JavaScript, aiming for WCAG 2.2 AA accessibility standards out-of-the-box. This ensures accessibility compliance across all digital services that use CivicTheme.
Storybook: Storybook provides a live, interactive environment for developers and designers to explore components, understand their behaviour, and integrate them into different projects.
2. Supporting Tools, Policies, and Guidelines
CivicTheme is more than just a design system; it also offers a set of supporting tools, policies, and guidelines to ensure a smooth development process, maintain consistency, and promote best practices. This includes:
Development guidelines to ensure proper integration of CivicTheme components.
Accessibility standards to ensure components meet government-grade compliance.
Policies to guide contributions and ensure that every addition aligns with CivicTheme’s inclusive and open-source nature.
3. Community of Practice
At the heart of CivicTheme is a community of practice composed of government agencies, digital agencies, and individual contributors. This community actively uses, maintains, and improves CivicTheme.
CivicTheme relies on community contributions to grow and evolve, with an open-governance model that invites users to participate in shaping the design system.
Contributors can engage through CivicTheme’s GitHub repositories, its Slack channel, and other community forums to provide feedback, submit enhancements, or suggest new components.
Expanding Beyond Drupal
Although CivicTheme originated as a Drupal theme, it is designed to be flexible and adaptable to support other frameworks and content management systems in the future. Currently, the Drupal theme provides all the necessary configurations to integrate CivicTheme’s UI Kit components with Drupal CMS. The components aim to meet WCAG 2.2 AA standards, as compliance and accessibility are core features.
Demo Sites
To explore CivicTheme in action, you can view a variety of demo sites tailored to different industries:
Default CivicTheme Build – Latest stable build. Use the "Generated content" menu item to explore multiple component variants.
Government Demo – CivicTheme adapted for government sector content.
Higher Education Demo – Example of CivicTheme tailored for higher education.
Corporate Demo – CivicTheme for corporate industry content.
Resources
CivicTheme continues to evolve as an essential tool for delivering consistent, accessible, and modern digital experiences, driven by its community and contributions. To be part of the evolving journey of CivicTheme's vision, check out our contribution documentation.
Last updated