My take on design token documentation

Automating design token documentation

While working on automating design tokens and thinking about how to scale them, I tried to address the need to keep proper documentation up to date. There was some dead code I found in a Style Dictionary version that was the seed of generating the documentation along with the production tokens with every build process.


I completely hand-coded this proof-of-concept version of the GSG design system documentation site. The main goals was to utilize the design token JSON structure itself to generate the documentation which includes description fields. I added filters by type and by the hierarchy written into the tokens.

I've created this proof of concept that has filtering of the tokens by type and by where they are in the tokens structure. I'd love to hear your feedback on this.

GSG Design System Doc site - proof of concept

Like most PoCs, it's sitting on a dustheap, but I'm hoping it'll take on life in a future project.