TSA colour tokens

The Sarz Academy is a music education platform built for four user types (students, instructors, mentors and admins) that spans 200+ screens.

The product needed to move quickly, so I made a pragmatic call: build screens and get the design done. I put together a handful of core components (buttons, inputs) and a few base colour styles, just enough to keep moving consistently.

I deliberately started with Styles rather than Variables. No colour tokens existed.

By the time the design was complete, colour was consistently applied across the product. But the system lacked the structure needed to scale: there was no primitive layer, no semantic naming and no clear separation between what a colour is and what it means in context.

I did a reverse colour audit using AI to do what would have taken days manually. I audited the entire design and retrofitted a colour token system from what already existed.

I used Claude with a connected Figma MCP to audit the actual design file. I audited the four portals separately to understand how colour was being used across the product. The audit surfaced every unique fill, opacity variant and frequency of use, allowing me to consolidate near-duplicates and identify the colour roles the system needed.

Before asking the AI to create variables directly in Figma, I had it generate a visual HTML artifact showing the colour styles and their usage. This gave me a visual checkpoint to review the proposed system and catch potential mistakes before building variables in the Figma file and consuming unnecessary AI credits.

Once I validated the proposed token structure, I used the Figma MCP to have Claude build the system directly in Figma, creating 27 primitive variables and 30 semantic tokens, correctly aliased and documented with usage descriptions.

Claude also generated the colour reference table inside the Figma file, showing each semantic token, its primitive source and where it is used across the product.

I then reviewed the generated system to ensure the aliases, naming and usage matched the intended architecture.

This proved that AI can shrink a full day of tedious, repetitive clicking into seconds of execution.

However, the experience reinforced that automation is only as powerful as the strategic intent behind it. The AI can write the data, but it still requires a designer who deeply understands the product context.