Ongoing · Flutter Entertainment / GST
Ivory existed before it was a design system. It started with around 28 components — built organically over time to serve product needs, without a foundation underneath them. No token structure, no naming conventions, no documented principles. The components worked, but they weren't connected.
When the team decided to formalise Ivory as a proper design system, that meant going backwards before going forwards. Not rebuilding everything, but doing the work that should have come first.
The first step was an audit. I went through every existing component to understand what we actually had — what was consistent, what had drifted, and what decisions had been made implicitly that now needed to be made explicitly.
From there, I started structural adjustments: cleaning up inconsistencies, aligning components to a shared visual language, and establishing the rules that would govern how new components get built going forward.
Ivory didn't have a token structure. To add one, I evaluated two paths: Token Studio, which is already used by other teams at Flutter, or the native Figma Variables API.
Token Studio had the advantage of org-wide familiarity. The Variables API meant one fewer tool dependency, native Figma integration, and a tighter pipeline to code. We chose the Variables API — Figma becomes the source of truth, and Token Studio sits as an export layer only for teams that need that format.
The token structure follows a three-layer model: Global → Semantic → Component. Naming uses Chakra UI dot notation throughout, which keeps tokens readable and consistent across both design and development.
A design system is only as useful as the context it can provide. As AI tools become a real part of the workflow — whether that's Copilot generating component code, or Claude answering questions about the system — they need structured, reliable information to work from.
I built the DESIGN.md format to address this: a specification file for each component that gives LLMs the context they need to generate correct, system-aware code. Without it, AI tools guess — and they guess wrong in ways that are hard to spot.
Paired with Figma MCP, this means Claude can connect directly to the live design file, query token values, and understand the system's conventions in real time. The documentation isn't just for humans anymore.
This is active work. Every new component gets built against the token layer. Every update to the foundations ripples through. The system is being used while it's being built, which is the reality of design systems inside product teams — you're never done, and that's fine.