The same blockframe, re-themed by swapping semantic token values — not by editing components. That separation is what turns a dark-mode toggle from an application-wide rebuild into a theme switch.
Cycloid was built on the Vuetify component library with a token structure that had drifted out of sync between design and engineering. Developers were reaching for primitive-level tokens or hard-coded values throughout the codebase, which made the system inflexible.
The immediate consequence: shipping a dark-mode toggle wasn't feasible without significant rework. That was the symptom — the cause was structural.
I built a three-tier token structure so any developer could tell where a token belongs from its name alone — no need to interpret design intent.
--blue-600: #2E51FF--bg-accent-emphasized → --blue-600--card-bg → --bg-accent-emphasizedChoosing the naming convention
I evaluated Material Design v3 first and rejected it — the vocabulary didn't suit the application. I adopted Chakra UI's approach as the basis: organised by usage context (foreground, background, border) rather than brand-colour roles. I extended it with variants — emphasized, primary, secondary — and three tonal steps per colour: main, muted, subtle. The name carries the intent.
With the structure in place, I built an AI-assisted pipeline to keep three sources of truth in sync. Claude built the tooling; once running, the pipeline operates as part of the normal build with no AI involvement.
I'd built the equivalent pipeline manually in a previous role. With Claude, this version shipped in under two weeks — a concrete baseline for what AI-augmented delivery actually buys you.
The token architecture and pipeline shipped and were welcomed by the team. Dark mode itself didn't ship during the contract: turning it on required application-wide component refactoring to ensure consistent token usage throughout the codebase.
That work was scoped, accepted, and placed on the product backlog and roadmap before the contract ended. Foundation delivered, remaining work handed off clearly — not left implied.
demonstrates
Hands-on token architecture: tiers, naming conventions, component-token mapping.
Choosing the right convention for context — Material v3 evaluated, Chakra adopted and extended.
AI applied to production tooling with a measurable outcome, not aspirationally.
Pragmatic delivery: foundation shipped, remaining work scoped and handed off.
