Design Systems as nodes

Documentation is the bedrock of the design system. However, you will often hear the phrase "nobody is going to read that". That is true. Nobody is going to want to read your 10-min write up over something that they can just reach out to you and ask.

There is one thing we need to do given the already long list of responsibilities that we have, which is to have fun. We need to toy with the idea of visualizing our documentation. Gives people a nice way to decode what is going on.

I was inspired by @golitmitless as well as Applied Category Theory. Using mermaid to create this diagram, just imagine having all of the design tokens mapped out for a global view perspective.

Just an abstraction of what the token should be like

Similar to how obsidian and heptabase are built, being able to show information flow and highlight relevant nodes, it would help users see the connections much more easily. When you are designing your component documentation, it should detail the different layers of tokens that the system is using.

An abstraction of what happens when you hover over a particular attribute

This micro-view could even have colorType.inverse.Darkest as a link that goes back to the global design token view.

Still building on this idea of design systems as nodes and will build a working prototype to illustrate this. I see that it should eventually be a page system with 3 vertical panels on a single view similar to your finder views so that you can toggle back very easily.