Making Design System Adoption More Visible in Live Products

Using custom user stylesheets to visualize component and style usage.

One of the more tedious parts of a design system team’s job is auditing component and token usage in live products. With products often in different states of implementing our design system, part of our job is to find inconsistencies, suggest the use of available components, or offer better uses for design tokens.

While working on Castor (Onfido’s in-house design system), we often ask ourselves: “Is that a Castor select component or a custom component that‘s been *styled* similar to a Castor select?”. We squint at various shades of dark-grey text to try and discern whether they are consistent. We try to recall if that media icon was part of our official icon set or not?

We have many tools and metrics to help us answer questions like: which products are using which components, what % of colors in a product are RGB or Hex values instead of using our design tokens (we call these values orphans)? We also use Figma’s analytics and asset management tools for the design side. The problem with these is they’re either high level or are non-visual. To get the information we need, we frequently have to open a web inspector on a page and hunt for clues (classes, values, CSS variables).