Creating a Design System That Works and Scales for People and AI
A design system designed to grow with AI from the very beginning
Team
2 Designer
Team
2 Designer
My role
Product designer
01- Context
Design systems today are documented for people, not the AI now building alongside them.
Egg is our attempt to fix that: a design system built to scale and grow with AI from day one, not added on later. It's still growing, this is version 1.
02- Goals
Before anything else, we set the rules...
Before building anything, we set four rules: reduce it to what mattered, write it so machines could read it too, make it scale, and tokenize it right from day one.
A look at the final system
"Simple as Egg, functional as Egg!"
04- The Process
Before we started building, we followed a path that kept human decisions separate from the tools.
Explore
Inspiration first, from tools like Clay, Salesforce, and Attio. Then early wireframes, built with AI.
Deciding
What the tokens and components needed to be decided before opening any tool.
Foundation
Tokens first then skills written for the agents in use, so the work stayed consistent.
Building
26 components: buttons, tables, cards, chips, and more, all on that foundation.
04- The foundation
Before components, before layouts, this came first.
Four layers of color tokens
Color splits into four layers, with brand and neutral kept separate. That's what makes it possible to change the brand color without touching the rest of the system.
Type, spacing, and radius
23 text styles on Host Grotesk and Inter, one spacing scale, and radius values kept separate on purpose.
The documentation for AI-legible system
While building, skills were written to document each design decision, keeping the work fast, and usable across different tools.
Still growing
You can check the full document here.
Egg, inside a CRM dashboard
Egg is built for a CRM dashboard product, still in development. These are a few screens showing the components in use.
04- Takeways
From now on, every design decision has to work for two readers at once, the person building next to it, and the AI reading it with them.
A decision that never becomes part of the system gets forgotten the moment the tool or the team changes, that's exactly how design debt starts.
04- What to next
This is v1, more to come
Completing components, expanding layouts
The layout layer only covers a few pieces today, like the header and sidebar. That's not enough to assemble a full page without extra custom work. The next phase adds more layout components.
Feedback, and continuous improvement.
A design system stays accurate only if it keeps changing with how it's used. Egg is built to take that feedback in, log it, and update the system itself, not just the screens built on top of it.
Spotted an issue? Report it here, it goes into the backlog for the next update.
More Works
