This environment is not optimized for viewing on small or mobile devices. Please view on a larger browser for the best experience.

If you have any questions, please contact us.

How It Works

The Digital Design System is a component-based structure that makes design (and development) reusable. Its comprehensive set of identity guidelines, UX principles and best practices allow for teams to build products with consistency, efficiency and scale.

Leveraging the Atomic Design Methodology

Atomic design allows us to create user interface (UI) components in a deliberate and hierarchical manner. In chemistry, atoms combine together to make molecules, the molecules combine together to make organisms and so on. We have applied the same principles to UI elements. The atoms (like typography and color) are combined with other atoms (like input fields) to create a molecule (like a search menu) or an organism (like a contact form).

To learn more, visit Atomic Design by Brad Frost.

Atom

Global Design System

Basic HTML elements that can't be broken down any further.

Molecule

Global Design System

Groups of UI elements that function together as a unit.

Organism

Global Design System & Product Style Guide

Complex groups of Atoms and/or Molecules, often forming a section within an interface.

Template

Product Style Guide

An empty page layout that content of a page can be populated with.

Page

Product Style Guide

A layout made up of atoms, molecules and organisms with product-specific content.