Every token, component and screen in this site, derived from source and drawn as one graph you can point at

The design system in this repository is a contract: a fixed list of semantic tokens, and a rule that UI code spends those and nothing else. Contracts like that are easy to write and hard to hold, because the failure mode is silent. A raw hex in a component looks fine in review. So does a leftover default-palette class — and that one is worse, because in this setup the default Tailwind palette is not installed, so the class emits no CSS whatsoever and the element simply renders with no color while the diff reads as perfectly ordinary.

The other half of the problem is direction. Before any broad change — renaming a token, editing a brand file, retiring a component — the question is what else moves, and the honest answer was always a guess dressed up as a grep. Not knowing made every sweep more cautious and slower than it needed to be, and it meant the tokens nobody used stayed in the contract indefinitely, because nothing could prove they were safe to remove.

The script starts from the contract and expands each namespace into every Tailwind utility that namespace can generate — every color prefix, every spacing prefix, every radius corner. Collisions in that table are a build error rather than a warning, which is what lets the rest of the tool match blindly and trust the result. Then it walks the source: class strings, custom-property references, imports. Files become nodes, imports become compose edges, matched utilities become token edges, and the layer a node belongs to falls out of where it lives.

None of it is written to disk. There is no generated manifest to regenerate, no cache to invalidate, and no committed snapshot that can quietly drift from the code it claims to describe — the graph is re-derived from source every time anything asks for it, including the page you are reading, which derived its own figures when it was built.

A dependency graph is usually shown one query at a time, which asks you to hold the shape in your head. This shows the whole thing. Every node is a bar whose length is its weight — for a token, how often it is spent; for a component, how much styling it carries — so each column ranks itself without a single number on screen. All five thousand or so edges are drawn once underneath at five percent opacity, where they stop being lines and become weather.

Interaction is the two questions the CLI answers, drawn instead of printed. Hovering is the shallow one — direct neighbours, downstream in one colour and upstream in another. Clicking is the deep one: the transitive closure in both directions, which for a base primitive is most of the picture and for a leaf screen is almost none of it. The asymmetry is the useful part, and the version at the end of this study is the one to try it on.

The first thing it produced was a ledger: every token in the contract, ranked by how many places actually use it. The head is unsurprising and reassuring — a border color, a muted text color, a small type size, each carrying several hundred sites. The tail was the point. A handful of tokens turned out to have never been used anywhere: a whole namespace reserved for a native kit that no web surface has ever spent, and a nested radius nothing reached for. None of that was findable before.

The check command runs the same extraction with the opposite intent. Anything off the contract is a finding, split into two tiers: dead defaults and raw colors exit non-zero, because both are bugs rather than opinions, while arbitrary values are collected into a review list instead, because sometimes a magic number really is the right answer and the tool is not in a position to know which.

The version of the question that comes up most is about brand files. Every brand in the system defines some namespaces and inherits the rest, so editing one is a targeted change with an untargeted reach, and the tool can resolve exactly which surfaces sit inside it and which token namespaces it actually redefines. Selecting a node does the same thing visually: the picture dims to just that node's reach, and the amount of canvas left lit is the answer.

The figures above were derived from this repository at build time, and the site itself is one of the layers in them — the components that render this study are nodes in the graph the study is about, and the tokens spent laying out this paragraph are bars in the first column. That is not a trick; it is just what happens when the tool reads the source rather than a description of it. It is also the closest thing to a proof that the picture is current.

The reason it is in this section rather than a tools folder is that it changed how the design system gets worked on. Sweeps start with a query instead of a search, a token rename is a bounded change rather than a nervous one, and the two classes of styling bug that used to be invisible now have a command that names them. The derivation and the drawing both landed the same day, which is the part that still surprises me most.