Attention Design System
From a mobile system stretched onto a web MVP in one month, to a three-layer token architecture connecting Figma Variables to semantic tokens to Ant Design, engineered so that designers, engineers, and AI coding tools all read design intent in one shared language.
"Build a system that is visually distinct, native to designers in Figma, native to engineers in Ant Design, and unambiguous enough that an AI reading either side reconstructs the same intent."
TL;DR
I inherited a mobile-only design system stretched onto a web product under a one-month MVP deadline, watched it collapse under its own inconsistency, and rebuilt it three times. Each failure taught something the next version used. The final version connects Figma Variables through a semantic contract layer to Ant Design, with one unambiguous vocabulary that both humans and AI coding tools consume directly.
The bottleneck shifted from implementation to product thinking. That is what a design system is supposed to buy an organisation.
The Problem
Tuxedo, Synaptic's design system, began as a mobile-only system. There was never a web product on the roadmap when I built it. Then an EIR pitched PortfolioIQ and leadership committed to a working MVP at SuperReturn in London, roughly one month away. Three designers, one month, zero review capacity. We made the right call: speed over consistency. Four months later, the debt came due from three directions simultaneously.
Engineering debt
Two separate libraries to maintain. Eight-plus button variants in production with no canonical answer. Every feature handoff produced new local components. Typography in three sizes — 12px, 13px, and 14px — coexisting with no governing rule.
Designer friction
The component library was too narrow for web feature work, so building local variants felt justified at the time. Handoffs required long clarification cycles. Design intent did not survive the trip to code because there was no shared vocabulary to carry it.
Product perception
The UI read as primitive: stark black-on-white, chunky forms, tables that failed basic scannability. Every page behaved differently. Founders, users, and stakeholders were all saying the same thing.
A design system is a product, and its users are designers and engineers. Ours was failing both. Every previous fix attempt treated this as a design problem or an engineering problem. The failure was in the bridge.
Folio: The System That Never Shipped
Before Attention, there was Folio: my first serious attempt at a replacement. Full tokenization, complete component mapping, deep theming capability. The team loved it when I presented it. Then I was pulled onto an urgent investor-facing project. Folio never entered implementation. It quietly died in Figma's junk files. This honest failure belongs in the case study — it is where I actually learned how token systems work.
Flexibility without engineering buy-in is prettier chaos
Folio was designed for designers, in isolation from the people who would implement it. A system that engineering has no stake in is a presentation, not infrastructure.
A system without an owner dies
The moment I left, Folio had no champion and no adoption path. The foundation was still wrong, so the product barely moved.
Keep the tuition receipts
Folio never shipped, and Folio is why Attention did. Staff-level work is not a highlight reel, it is compounding judgment.
Research: Two Tracks in Parallel
I benchmarked 10 to 15 well-regarded products: Linear, Causal, Mercury, Notion, and leading fintech interfaces. The dominant 2024–25 trend was unmissable — black-and-white minimalism, near-zero chroma. I built exploration rounds and presented them. The founders rejected it immediately. "Every SaaS product looks like this now. Where is our essence?" That pushed the brief from "look modern" to "look unmistakably ours." After four to five unconstrained exploration rounds, the direction that won was emerald on white: trust, growth, and financial stability at a glance.
Designers preferred shadcn. Fewer exposed tokens, high control, natural Figma mapping. Engineers preferred Ant Design. Every component ships complete with all states built in. When Ant Design improves a component, the team inherits the fix for free. I did not win this debate by choosing a side. I dissolved it with an architecture where the debate stopped mattering.
While this research was underway, AI-assisted coding crossed the adoption threshold. I sat with our engineering manager to understand how AI tools consumed our codebase. The insight: design tokens are already structured data, and AI is the missing translator between design and code. The fourth requirement became explicit: build a system unambiguous enough that an AI reading either side reconstructs the same intent.
The Architecture
Attention Design System is a three-layer token architecture. Each layer has a different audience; together they form one unambiguous chain from design intent to rendered output.
The naming convention was the load-bearing decision. Figma uses slash groups; CSS uses hyphens. Same segments, same order, different separator — an AI reading either side can translate directly.
I rebuilt each component in Figma in our visual language, matching Ant Design's states one to one. The Figma library and the code library became two renderings of the same contract, rather than two opinions.
Adoption: The 70 Percent Story
The front-end team built a real product page from the new Figma library on Ant Design, unassisted. They landed at roughly 70 percent visual and behavioral fidelity. Most teams would call that a win and ship. I treated it as a diagnostic. I paired with a front-end engineer on a dense screen and watched exactly how he worked: he consumed whole Ant Design components and changed nothing except the token mapping. The remaining 30 percent gap was not skill. It was ambiguity: undocumented paddings, focus-ring values, line-box math, casing mismatches. I eliminated the ambiguity at the source.
When implementation misses design, the spec is usually the bug. The 70 to 95 percent jump came entirely from removing ambiguity, not from anyone trying harder.
The AI Layer
Because the three layers share one unambiguous vocabulary, AI coding tools can traverse the whole chain. An engineer or designer prompts Claude Code with a feature spec referencing our tokens and components. The AI resolves intent through theme.ts and the Ant Design mapping, reuses existing components, and outputs code at 95 to 98 percent fidelity from a single well-scoped prompt. We built for these preconditions before they were common advice, because our own engineer's behavior showed us what an AI would need: he never modified a component, only mapped tokens. He was already working the way an AI works.
style={{
backgroundColor: '#065f46',
color: '#ffffff',
padding: '8px 16px',
borderRadius: '6px',
}}
// New component invented
const CustomButton = () => (
<button style={{...}}>
{children}
</button>
)
// antd-theme.ts: colorPrimary → primary
import { Button } from 'antd';
<Button
type="primary"
>
Add company
</Button>
// All states — loading, disabled,
// hover — included at no extra cost
Engineers can now build a feature in a day. I catch myself spending three days on product thinking for a feature that ships in one. That inversion — thinking as the constraint instead of implementation — is exactly what a design system is supposed to buy an organisation.
Impact
8+ button variants consolidated to one Button contract. 12/13/14px typography anarchy resolved to a single 13px base with defined line-boxes. Consistent emerald-on-white language across every surface. Direct positive feedback from users and stakeholders — the "primitive" critique is gone.
Current Frontier: Tables
The system is live, adopted, and governed. The problem I am solving now is the hardest one in the space: tables. Our front end uses AG Grid, which covers nearly every capability the product needs, but is deeply complex. Figma has never solved tables well — no native table primitive, and naive component approaches explode combinatorially.
I am treating it exactly like the system itself: interview both user groups, write the contract first with precedence rules and pseudocode covering hover overlay compositing, cell fill precedence, and state interactions, then build the Figma layer to match. A system is never done, and neither is the systems designer.
What I Would Tell Another Designer Doing This
Name the system's real users
A design system has two user groups, designers and engineers, and now a third, AI agents. Design for all three or watch the ignored one route around you.
Let engineering own the implementation layer
I did not win the shadcn versus Ant Design debate. I dissolved it with an architecture where the debate stopped mattering. The concession bought co-ownership, and co-ownership bought adoption.
When code misses design, fix the spec not the engineer
The 70 to 95 percent jump came entirely from removing ambiguity, not from anyone trying harder. The spec was the bug.
AI-readiness is mostly discipline, not technology
One vocabulary, mirrored casing, documented exceptions, governed change. Boring rigor is what makes one-prompt generation possible. The model is not the bottleneck. The contract is.