Antiqua Design Language
Design · Code · Choreography
Designed once.
Alive everywhere.
A design language that carries interaction intent from Figma into a reusable React library—and carries working assets into engineering.
The problem
The most expensive gaps were hiding in the handoff. Figma held the visual rules, but states, transitions, responsiveness, accessibility, and rationale still had to be rebuilt in engineering.
The idea
Interaction is part of the component
Behavior belongs in the system—not in the handoff gap.
Antiqua makes design the continuity layer. Entry, change, feedback, interruption, recovery, and reduced motion are designed as component behavior, then preserved in working code.
The execution
We moved from linked-screen prototypes to code prototypes that could express real behavior. Interactions were tested, refined in working code, and connected back to Figma so engineering could start from an asset already shaped by design learning.
Side sheet — entry, focus, content shift, and recovery choreographed as one component.
3-way toggle — Working in code allowed us to invent new interaction patterns.
No more having to go back and forth on interaction feasability.
The Antiqua code library is now at 2 templates, 52 components and 84 icons with their necessary interaction states.
The impact
Prototypes stop being throwaway—and become engineering assets
The prototype becomes part of the design process—not just a representation of it.
Testing happens on richer behavior. Engineering refines the working asset instead of rebuilding it.
01 TEST
Richer
behavior
Usability testing happens on working interactions and states.
02 REUSE
80–90%**
code carries forward
Engineering starts from working code, then standardizes it.
03 ACCELERATE
5 → 1**
days
Observed in an early internal component build.
04 SCALE
5×**
component output
Five component builds in the time previously required for one.
** Observed early internal results; subject to engineering refinement and continued validation.
My role
Design system lead
Strategy, component design, motion direction, and React implementation. I shaped Antiqua from interaction intent through tested behavior and reusable production assets.