One design system for an AI-native enterprise console, built in code.
The console is where enterprises govern and observe their AI: who can use which models, what it costs, what data they see, and what every agent did.
I rebuilt its design system from the hex codes up, so the developers and the AI tools they build with could ship the whole product on it.
Senior Experience Designer
Role
Sole designer · 3–5 developers
Team
One month · 2026
Timeline
Colour · 12 steps
Type · Inter, 14px baseAaHeadingBody at weight 350Caption
Buttons
BrandPrimarySecondary
TertiaryDanger
Metric card
BUDGET$3,420
Spent 68% · Committed 12% · Remaining 20%
Badges
DraftBrandActiveNeeds reviewEscalated
FieldModel
Select a model
Table row
Tool decidertool_decider
NodeActive
Test nodetest_node_1
NodeDraft
Colour · 12 steps
Type · Inter, 14px baseAaHeadingBody at weight 350Caption
Buttons
BrandPrimarySecondary
TertiaryDanger
Metric card
BUDGET$3,420
Spent 68% · Committed 12% · Remaining 20%
Badges
DraftBrandActiveNeeds reviewEscalated
FieldModel
Select a model
Table row
Tool decidertool_decider
NodeActive
Test nodetest_node_1
NodeDraft
The system's pieces: colour, type, buttons, a metric card, badges, a field and a table row.
01 / The challenge
A system the product had outgrown.
Designers used the old system in Figma, and developers rebuilt finished screens by hand. Faint colours and overused gradients tried to look futuristic without feeling powerful, and the components weren't built for the product's scale. One flow of three to five screens took eight to ten days of back and forth.
The opportunity
How could the system let the product grow, instead of holding it back?
Budget approvalInitiated on 03/10/2026Approval workflow
A gradient on every card, carrying no meaning
Faint grey dates and types, hard to scan
One card per item: nothing to sort or filter
NameTypeStatus
Budget approvalbudget_approval
WorkflowActive
No decoration: the name leads
Full-contrast text, a readable id under the name
Columns you can sort and filter, status included
After: a row. One element from the console. Sample data.
02 / The direction
Futuristic to use, not just to look at.
I explored what the brand should say: a powerful middleware, not another AI assistant. The CXO backed the direction and asked for a proof of concept, so I redesigned a few screens and set rules for every page. That proof became the brief for the whole system.
Every screen should
Work first, then look good
Lead the eye to the right action
Make data easy to sort, filter and read
No screen should
Decorate for its own sake
Bury people in data
Look futuristic at the cost of feeling clear
03 / Foundations
Every choice starts from where it's used.
Twelve-step colour ramps that pass WCAG, with brand purple at step 9, replacing 417 tokens in two overlapping families. For type, Inter, because it stays readable in dense data tables: seven sizes on a 14px base, down from fifteen on 16px, with the body weight raised to 350 for long sessions.
123456789101112
brand
slate
red
amber
green
blue
bg-200-300-400-500bordersolidhovertext
123456789101112
brand
slate
red
amber
green
blue
bg-200-300-400-500bordersolidhovertext
123456789101112
brand
grey
red
amber
green
blue
bg-200-300-400-500bordersolidhovertext
123456789101112
brand
grey
red
amber
green
blue
bg-200-300-400-500bordersolidhovertext
Twelve steps per hue, each step with one job, in a light and a dark set. Drag to compare.
display · 600Budget72 / 1.00 / −2.2%
heading · 500Access rules36 / 1.20 / −1.2%
heading-smRehydration rules24 / 1.33
subheadingPlatform access control18 / 1.56
body · 350Choose what this role can do on each screen.16 / 1.50
body-sm · baseAllow user-123 to read any workflow from any source14 / 1.43
captionUpdated 24/07/26 · vs last month12 / 1.33
Seven sizes on a 14px base, body at weight 350.
04 / Components
Built in code, on a proven base.
I built every component in code with Claude Code, on PrimeReact, restyled to the system. They live in a Storybook inside the codebase, so the system and the product are the same thing.
brand
New WorkflowNew WorkflowNew Workflow
primary
ConfirmConfirmConfirm
secondary
Generate ReportGenerate Report
tertiary
Cancel
danger
DeactivateDisabled
DraftBrandActiveNeeds reviewEscalated+8.3%−0.4%
Button tiers, small by default, and the badges.
Budget
$3,420
this billing cycle
Spent: 68%Committed: 12%Remaining: 20%
1 · tooltip help
TOKENS6.8MTotal tokens used across all workflows
2 · trend icon
TOKENS6.8M↗ 8.3%
3 · single bar
BUDGET$3,420
4 · shipped
TOKENS6.8M+8.3%vs last month
The metric card, and the iterations that got it there.
05 / How the team builds
Developers prompt; the system answers.
Developers build by prompting AI, and whatever they build comes from the Storybook. When a component doesn't exist, Claude creates one from the existing styling and adds it to the Storybook. I review it every day and fix new components at the source, so developers never have to think about UI.
PromptA developer asks for a screen
StorybookClaude builds it from the system's components
New piece?Made from existing styling, added to the Storybook
Daily reviewI fix it at the source, once
↺ Every fix reaches every screen that uses it
06 / Rules for the AI
Guardrails, written down.
A CLAUDE.md in the codebase holds the rules the AI follows before it builds anything. When I gave the same correction twice, it became a rule.
CLAUDE.mdtokens.cssButton.tsx
1# Design system rules
2
3## Components
4- Use only components from the Storybook.1
5- Missing one? Build it from the existing components'2
6 styling and add it to the Storybook.
7
8## Tokens
9- Never write a hex code, even if asked.3
10- Colour, type, spacing and radius come from tokens.4
11
12## Pages
13- Function first, then visual design.
14- Data must be easy to sort, filter and read.
CLAUDE.mdtokens.cssButton.tsx
1# Design system rules
2
3## Components
4- Use only components from the Storybook.1
5- Missing one? Build it from the existing components'2
6 styling and add it to the Storybook.
7
8## Tokens
9- Never write a hex code, even if asked.3
10- Colour, type, spacing and radius come from tokens.4
11
12## Pages
13- Function first, then visual design.
14- Data must be easy to sort, filter and read.
An excerpt of the rules, paraphrased.
07 / Designing in code
Figma to explore, code to ship.
I design directly in code. Figma is for iteration: Claude mocks screens there through the Figma MCP, I explore and refine, and Claude builds the final screens from Figma through the same bridge.
MockClaude drafts the screen in Figma, from the system
ExploreI iterate on it in Figma
BuildClaude builds the final screen from Figma
ShipIn code, on Storybook components
↺ A flow is built and finalised in a day
08 / Light and dark
Every piece, in light and dark.
Each ramp has a light and a dark set, so every component ships in both from the same tokens, and every page built on them gets both for free.
Colour · 12 steps
Type · Inter, 14px baseAaHeadingBody at weight 350Caption
Buttons
BrandPrimarySecondary
TertiaryDanger
Metric card
BUDGET$3,420
Spent 68% · Committed 12% · Remaining 20%
Badges
DraftBrandActiveNeeds reviewEscalated
FieldModel
Select a model
Table row
Tool decidertool_decider
NodeActive
Test nodetest_node_1
NodeDraft
Colour · 12 steps
Type · Inter, 14px baseAaHeadingBody at weight 350Caption
Buttons
BrandPrimarySecondary
TertiaryDanger
Metric card
BUDGET$3,420
Spent 68% · Committed 12% · Remaining 20%
Badges
DraftBrandActiveNeeds reviewEscalated
FieldModel
Select a model
Table row
Tool decidertool_decider
NodeActive
Test nodetest_node_1
NodeDraft
Colour · 12 steps
Type · Inter, 14px baseAaHeadingBody at weight 350Caption
Buttons
BrandPrimarySecondary
TertiaryDanger
Metric card
BUDGET$3,420
Spent 68% · Committed 12% · Remaining 20%
Badges
DraftBrandActiveNeeds reviewEscalated
FieldModel
Select a model
Table row
Tool decidertool_decider
NodeActive
Test nodetest_node_1
NodeDraft
Colour · 12 steps
Type · Inter, 14px baseAaHeadingBody at weight 350Caption
Buttons
BrandPrimarySecondary
TertiaryDanger
Metric card
BUDGET$3,420
Spent 68% · Committed 12% · Remaining 20%
Badges
DraftBrandActiveNeeds reviewEscalated
FieldModel
Select a model
Table row
Tool decidertool_decider
NodeActive
Test nodetest_node_1
NodeDraft
The same elements in light and dark. Drag to compare.
09 / Impact
Faster, and consistent by default.
The entire product is being built on the system. Screens stay consistent across it, and the CXO and the developers backed it.
1 dayTo build and finalise a flow of 3–5 screensWas 8–10 days
1 specOf 12-step colour rampsWas 417 tokens in two families
7 sizesOf type, on a 14px baseWas 15, on 16px
10 / Takeaway
The system is the core of the UX.
“A system should scale with the product, not the other way round.”
It's built to keep the product consistent, not to constrain creativity. A design system isn't just colours, type and components: it's a set of guidelines for the product, and the core of its UX, not only its UI.