Agentic Design System

The platform started as a single prompt box. Within months it was a multi-agent workspace covering requirements, code generation, testing and infrastructure, and the UI had grown organically to keep up.

That came with a cost. Components were duplicated, accessibility was inconsistent and engineering time was going into UI defects instead of features.

I ran 30-minute interviews across product management, AI engineering and frontend engineering. Each team had built up its own unwritten conventions. I wanted to find which of those the system should absorb and which it should replace.

What I heard fed straight into the two biggest decisions below: separate raw values from intent, and give the AI parts of the product patterns of their own.

1. Start flat, earn the tokens.

   When the product had four screens, I shipped flat values. By month nine it ran across three product areas, so I rebuilt the system around a three-tier token model that could scale without re-skinning every component.

2. Separate the value from the intent.

   Primitive tokens hold raw values. Semantic tokens say what a value is for. Component tokens say where it's used. A change happens in one place and flows through the rest.

3. Give AI patterns their own layer.

   Agent workflows needed parts a generic library doesn't have: a prompt composer, an agent canvas, a context inspector and run history. They sit in their own layer on top of the atomic taxonomy, built from the same atoms as everything else.

4. Grow the library with the product.

   Foundations and atoms shipped in the first quarter. The complex AI compositions came later, as the agent workflows matured, so the library never ran ahead of what the product needed.

Every value in the product goes through the same chain, from a raw value to the component that uses it.

The library follows atomic design, with one extra layer at the top for the AI-specific compositions.

Type, colour, motion and tone came before the first high-fidelity screen, so every component inherited the same voice.

TYPE SCALE · GEIST

Scaled to fit this page. Every style uses a 150% line height.

COLOUR

• #00D5BE
• #FDC700
• #141414
• #FFFFFF
• #51A2FF

The library grew from 10 components to 42 and anchors all three product areas. New features ship from a shared, governed system instead of being rebuilt from scratch, and the AI patterns have a home of their own.

If you're starting a system of your own, I also built FigGenie, a Figma plugin that generates the foundations, components and development-ready tokens for you.