Design System Chronicles (Tenet UI)
Post #10 - Component design workflow | Post #11 - Designing behavior before code | Post #12 Hitting reset
I try sharing product design insights and workflows in FourZeroThree. But its also a place where I experiment. I try approaches, break them, figure out why, and write about it. Most times, it's less of a journal and more of a lab. What I work through here transfers naturally to work, and what I learn at work feeds back into what I explore here.
Design System Chronicles has been the clearest proof of that. I had 9 posts documenting how I built Tenet UI in Figma - token architecture, colour systems, typography, component thinking. Phase 2 was supposed to do the same for the code side. Take Tenet from canvas to code, document the journey and learn.
Phase 2 didn't go as planned. I did a few things I could have done way better. But thankfully, those mistakes informed how I approached design system work at my day job and that experience in turn has shaped how I'm restarting this.
What I built so far
Tenet UI is a personal design system and UI kit in Figma, published to the Figma community. Tenet UI Studio is the reference app - not Storybook, but a place to showcase the philosophy, token architecture, a playground and copy-paste components.
So, I got the token foundations - primitives and semantics into code, built three pages of the shell app and got as far as icons on the component side, before things started feeling wrong.
What went wrong
The problem wasn't dramatic. At that time, documentation used to overwhelm me - it was always something that came "after" the design. So there was no canonical source of truth for the AI and drift was constant. I was building ad hoc and correcting output as I went. I also had no clear plan for how to build the components. I was going with the flow.
On the contrary, documenting as you build is the way to go because it forces system decisions onto paper rather than keeping them in your head. And more than anything, they become the “context layer” that keeps your system coherent. AI stays aware of how the system is built. Drift reduces significantly.
What made it click was work (day job). The mistakes I made in Tenet meant I arrived at my day job already more informed than I would have been. And working on a real design system with real stakes sharpened everything further. Also, experimenting with Figma console MCP has been a gamechanger.
I’ve learnt so much at work, and that has informed me to come back and kind of restart what I attempted with the code side of things with Tenet. In fact I wrote a detailed piece as to how documentation is what keeps a design system coherent, and why it's the most important thing you can give an AI before building in code.
So that's the honest account of Phase 2. What I built, what I missed, and what working on a real system taught me about doing it properly. The restart is underway - back into Figma first, do some polishing, write some documentation and then into code with a proper context layer this time. The next few posts in the Chronicles will get into the specifics, one decision at a time.