Building for the web and mobile experiences requires systems of design. Design systems ensure reusability and scalability of applied design. Working collaboratively early in the design process allows developers and designers the opportunity to catalog shared tokens and components within the design system. Once a design system is established, coding components with the intention of integration to other systems is streamlined.


  1. All frontend builds start as design systems. We apply design systems to frameworks.

  2. All design systems are actually hundreds of design tokens. All components of a design system should be built from preexisting tokens.

  3. Every component in a design system must declare its schema. Design cannot exist without a data shape. No components can be written until information architecture is established. Make a spreadsheet.

  4. Any component using constants (numbers, font names, pixel values) within its styles is a code smell. All "proton" level variables should already be defined.

  5. Developers should be involved in the design process at the point where components are being defined onward.


  1. An understanding of stakeholders and the design/develop workflow

  2. Collaboration with designers in establishing the design system

  3. Rapid mocks using components and tokens identified in the collaboration step

  4. Coding/prototyping all appropriate pieces of the design system using Atomic Design principles

  5. After sign-off of prototype, integration of appropriate components to the integrating system (Drupal, Wordpress, custom React app, etc)

  6. Training and establishing Governance Processes