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

UI kit

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.

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.

Component library

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

​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.
Last modified 26d ago