CivicTheme is an open source, inclusive and component-based design system.
It was created so governments and corporations can rapidly assemble modern, consistent and compliant digital experiences.
It consists of 3 main assets:
CivicTheme is a true design system, based on atomic design principles.
UI kit is a Figma file that provides a visual representation of components and templates. It follows the same versions as the Component Library and Drupal theme.
Atomic design is breaking common website components into a finite set of elements such as:
- Atoms - these are the smallest building blocks on a site. They are usually the basic HTML elements such as Buttons, Links, Tables, Labels, Checkboxes and Text fields. Breaking these down any smaller will make them non-functional.
- Molecules - these can consist of a simple grouping of atoms to form slightly bigger and common UI reusable components such as Accordions, Attachments, Calls to Action (CTAs or Callouts), and Tables of Contents.
- Organisms - These are slightly more complex groupings of molecules that form even bigger (and common) components on a site. They mostly form distinct sections of the site. Examples are Alerts, Back to Top, Banner, Footer, Header, List, Navigation and Sliders.
Each of these elements plays a key role in the hierarchy of the interface design system.
The Component library is a CMS-agnostic library of components built with HTML, CSS and JavaScript.
The components have been built and assessed to comply with WCAG accessibility standards 2.1 AA out-of-the-box.
Drupal theme is an implementation of the Component Library for Drupal CMS.
The theme contains all necessary configurations and code to connect the CMS data with the components.
https://default.civictheme.io/ - latest stable build. Use "Generated content" menu item to view components in multiple variants.
https://government.civictheme.io/ - example of CivicTheme with the government industry content
https://higher-education-university.civictheme.io/ - example of CivicTheme with the higher education industry content
https://corporate.civictheme.io/ - example of CivicTheme with the corporate industry content
https://health.civictheme.io/ - example of CivicTheme with the health industry content