Energy trading platform · 2017–2026

A design system that humans and coding agents both understand

Tokens, themes and components with machine-readable contracts – so a designer, a developer and an AI agent build the same screen.

Design tokens
React
Figma Code Connect
Agent contracts
Accessibility

Semantic tokens in use

--surface#ffffff
--surface-alt#f1f3f7
--text#16181d
--text-muted#5a6070
--accent#0b63ce
--buy#14804a
--sell#c2362f
--border#d9dde5
--space-row12px
--font-size15px

Component contract (read by agents)

# TradeTicket.prompt.md
purpose: place one buy or sell order
props:   side: "buy" | "sell"  (required)
         density: "comfortable" | "compact"
tokens:  only semantic --ds-* (never hex)
do:      confirm side in the button label
don't:   colour alone to signal buy/sell

Context

A trading platform used all day by traders and analysts: dense data, many themes, long-lived screens and several teams contributing.

Challenge

The same component looked and behaved differently across modules. With AI coding assistants entering the team, inconsistency would multiply unless the system itself could explain its rules.

Approach

Three-tier tokens (primitive, semantic, component) in Style Dictionary, with light, dark and high-contrast themes from one source.
React and Tailwind components connected to Figma via Code Connect, so design and code stay in sync.
A short prompt contract per component: purpose, allowed props, do and don't – readable by people and by agents.
Parity audits against the legacy front end before each component replaces the old one.

Outcome

One vocabulary for design, development and agents across teams.
Themes and density switch from tokens instead of hand-made overrides.
AI-generated pull requests can be reviewed against explicit component rules.

My role

UX architect and design-system lead, product owner in the team