We invested a lot of time into documenting everything, or at least as much as we could. For every reusable element on our digital products, I wanted to show the life cycle of a component. That meant extensive record-keeping for all components and patterns—breadcrumbs, headers, inputs, or buttons, to name just a few. 

In my experience, this philosophy is a departure from the typical approach to documentation. In the fast-paced world of product development, for example, documentation is often written at the end of the project or abandoned altogether. But for design systems, documentation should be more than an afterthought. “A design system is never done; it needs continuous improvement.

Documentation is especially important for a design system when it is large. As people come and go within a team the big question was how can we make sure that everybody who joins the team can quickly go to any component and understand how it started, how it was edited, and what version they are using?”

This page contains examples of the numerous ways that a component shows up in a company’s digital product. In the case of a text field component, for instance, the inventory page would show how the text field looks on abb.com compared to how it appears on an iPhone compared to how it shows up on an Android device. “The inventory allows us to understand clearly what’s already there,” says Sial.

This page should also show the ways the component is being used incorrectly. “This allows you to look at your products and see where there are alignments and misalignments,” Sial says. He advises teams launching a design system project to begin by cataloging what already exists. “Start with inventory and it will guide you as you’re creating the design,” he says.