​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:
  1. 1.
    ​Design system​
  2. 2.
    ​UI kit​
  3. 3.
    ​Drupal theme​

Design system

CivicTheme is a true design system, based on atomic design principles.
​Design System is a Figma file that provides a visual representation of components and templates. It follows the same version as the UI Kit and Drupal theme.

What is atomic design?

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.

UI Kit

The UI Kit 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

​Drupal theme is an implementation of the UI Kit for Drupal CMS.
The theme contains all necessary configurations and code to connect the CMS data with the components.
​ - latest stable build. Use "Generated content" menu item to view components in multiple variants.
​ - example of CivicTheme with the government industry content
​ - example of CivicTheme with the higher education industry content
​ - example of CivicTheme with the corporate industry content
​ - example of CivicTheme with the health industry content
Last modified 1mo ago