System Glossary

Accessibility is the practice of making your website or software usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.

A reusable piece of UI, as small as a button or as big as a table, that is designed within the system. Components are built to be flexible for various use cases.

Our library of components built within React. The component library is built and maintained by OpenGov developers. We use a federated model, meaning there is no one centralized team maintaining the library, and instead everyone contributes to its construction and maintenance.

Our React components are built using CSS modules. A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. This allows us to create styles without risk of making unintential changes to other parts of the application by duplicating CSS class names.

A design system is a series of style, components and patterns that can be reused in different combinations. Design systems allow you to manage design at scale.

We use a federated model (as opposed to a centralized model) to design and build Capital Design System. This means that there is no one CDS team, and instead all designers and developers take part in contributing to the system.

We use NPM Packages to distribute CDS related code. At the moment we have two libraries available (component-library and capital-style), both private to the OpenGov organization.

Reusable patterns or guidelines for designing OpenGov applications. Patterns are made up of style definitions and components. They are use case specific and are not as flexible as components.

A tool used by engineers to develop and test components. The storybook displays components and component documentation.

A SCSS Stylesheet for CDS styles and components. The stylesheet is used when an application cannot make use of the React Component Library.

An agnostic way to store variables such as typography, color, and spacing. They are compiled from JSON into SCSS, JavaScript, and any other format needed.

Functions defined within the component library that aide the use of components. These are repeatable patterns seen within applications. The goal of creating utiliity functions is to separate functional logic from visual display where possible, and allow applications more flexibility.