Pillars of the Canada.ca design system

Every building needs a solid foundation, four walls, and a roof. These are nonnegotiable. The foundation holds the walls, the walls hold the roof, and the roof keeps us safe and dry. If our design system fails to provide these essentials we would certainly be considered a failure. We are under an obligation any time we are involved in the creation of a new web property.

We will discuss what we should call the five pillars of frontend architecture for design systems. These five groups of topics, technologies and practices are the foundation of a scalable ans sustainable design system. They set up a series of discussions that will help set the expectations in code quality, the time and effort needed to finish each user story, and the workflow process that will get all of this done in a timely manner.

The pillars

The code pillar

In this pillar we focus on how to approach the HTML, CSS and JavaScript of the design system.

The design pillar

In thins pillar we focus on how to approach the visual language specifications, mainly through design tokens.

The process pillar

A build process continue to grow in complexity as do the tools that we use to create them. These tools bring incredible gains in productivity, efficiency and consistency as well as the risk of over-engineering and unnecessary abstraction.

The testing pillar

In this pillar, we look at 3 different methods for testing our site. A solid understanding of each of them will be valuable when communicating with other teams.

The documentation pillar

This pillar look at the various types of documentation our team needs to write, the tools used to make publication easier, and the types of end users that will ingest the content.