Are we Design Tokens yet?

This site’s goal is to track how design tokens are making their way into our stylesheets. It grabs CSS files from a set of predetermined paths, then scans for CSS properties that should (ideally) be backed by a token.

Some values—like unset, inherit, and friends get a free pass and don’t count toward the stats. Same goes for files that don’t have any relevant properties: they’re left out of the calculation.

You can read more about how this site works here

Design Token Propagation

Explore Paths

Please note: The percentages reflect propagation without taking into account the size of the files involved.

Average Propagation: 48.19%

Site built by the 🌰 Acorn Design Systems Team at Mozilla