An AI-readable design system that turned demos into pilots.
First and only designer on a five-layer enterprise data platform. I rebuilt the system by hand and documented it with AI. An AI engineer and a salesperson built customer demos from it in two days each, and pilots went up 300% in the first two weeks.
At a glance.
Seven months. One designer, twelve engineers, and a system their AI tools could build from.
Stakes
A seed-stage company shipping a five-layer data platform that had never had a designer.
Leverage
One front-end dev, two AI engineers and nine full-stack developers worked
from oraion-design.md. Three lived in it daily. The system had to answer the questions I
wasn’t there for.
Outcome
In the first two weeks after the demos went out. An AI engineer and a salesperson built each one from the doc in two days. Routed through me, with the back and forth, I’d have put a demo at four.
Situation
- Joined Oraion as the company's first product designer.
- Sole design owner, making every design decision across a five-layer data platform: Ingestion, Data, Contextualise, Activate and BI.
- A Figma library existed, but nobody owned it as a system and it wasn't being used.
- Ten engineers wrote the front-end code, with three doing it daily:
- Front-end developer
- AI engineers
Task
- Build a system so they wouldn't need me for every decision. The goal was to stop being the bottleneck.
Actions
- Killed: the old Figma library. It didn't match what the front end had shipped, so engineers ignored it. I rebuilt the system by hand from what was already in production, with the engineers' feedback, before any AI tooling entered the workflow.
- Created Oraion's design.md as a standard for the company with figma-console MCP, and kept feeding it as more design work was done.
- Traded: names that read cleanly in code over names that read well in Figma. The naming was built to give the engineers' pipeline and their AI tools clean, predictable output, even where it reads worse in Figma's panel.
- Hidden: 40 primitive tokens. Only the semantic layer got published, so developers
built from meaning (
text/link) instead of raw values. - Every component went through an audit before it counted as production-ready, about 15 over the engagement. How the audit runs.
Naming conventions
All tokens follow a hierarchical, slash-separated naming system that maps directly to code variables. This is the part that made the doc readable by something other than a designer.
| Pattern | Example | CSS output |
|---|---|---|
category/name |
background/primary |
--background-primary |
category/subcategory/name |
text/heading/h1 |
--text-heading-h1 |
spacing/axis/size |
spacing/v/md |
--spacing-v-md |
- Semantic tokens alias to primitives. Hex values are never hardcoded in components.
- Colours live as Variables rather than Styles, so Dark and Light mode switching works.
- Primitives stay hidden from library publishing. Only Semantic and Contextual tokens are exposed.
Results
Pilots went up 300% in the first two weeks after the demos went out.
- An AI engineer and a salesperson built customer demos, with new features, working only from
oraion-design.md. Two days each, and I wasn't in the room. - The demos were used in customer pitches and in the raise.
- They were testing sales pitches and feature combinations on new customers, which is about as fluid as a brief gets.
- Neither of them had to ask me what a token meant or which component to reach for.
What went wrong
- The doc wasn't versioned and it wasn't in a repo. I shared the file directly, so improvements never
reached anyone already working from an older copy.
- People were making decisions based on a document I'd already corrected.
- The quick fix was moving it to a shared Drive so there was one current copy everyone pointed at.
- The proper fix, a real repo or a package, I identified and never built.
Most teams have designers. Fewer have someone who's built the substrate other people's work runs on. If yours needs one, let's talk.
Let’s talk
