Working notes on systems in production: token architecture, governance and decisions somebody will have to maintain long after I leave the project.
There is a stage in a technical career where you keep writing code and also start deciding the architecture everyone else will use. The feeling of falling short on both fronts says nothing about the ability of the person feeling it: it measures the latency gap between two jobs that deliver their verdict on very different timescales.
On a large website with years behind it, the maintenance budget that gets approved and the one that gets spent look nothing alike. Part of it is debt taken on knowingly, with a due date. The rest is decay: components and CSS that pile up iteration after iteration because every single decision, taken on its own, was reasonable. AI-assisted generation multiplies that second part when there is no written architecture to steer it.
A dark campaign block inside a light page usually ends up as a parallel stylesheet and a second version of every component. The alternative is to treat the theme as a property of a container rather than of the page: what changes in the architecture, what stops costing money, and why the component that switches it fits in fifty lines.
The role layer is the one almost nobody implements and the one that decides whether a brand change costs one line or two weeks. What question each level answers, why the semantic layer and the role layer cannot be merged even though they look alike, and at what size of organisation this architecture stops being bureaucracy.
How I covered nine writing systems (Arabic, Chinese, Japanese, Korean, Hebrew, Thai and Indic) without downloading a kilobyte of fonts or touching a single component: a fallback family calibrated per script with unicode-range, size-adjust and local().
Anatomy of a button that has no idea what colour it is: the token chain that runs from the hexadecimal to the CSS property, the private-variable indirection that turns a component into an API, and why all of it makes a rebrand a two-line change and a new theme touch no component at all.