THE SITUATION
A product growing faster than its UI could keep up.
Amotions AI is a real-time sales coaching platform. Live emotion detection during calls, AI-generated suggestions, Post-call analysis, The product was growing. The UI wasn't keeping up. The stack was Chakra UI. It worked for a generic product. Amotions isn't generic.
THE AUDIT
Team knew something was broken. The file confirmed it.
Three crucial elements failing WCAG AA.
Components rebuilt from scratch every sprint because no shared library existed to pull from.
Four different blues across the codebase, none of them the brand color.
Color styles named Primary01, Primary02, Grey01 through Grey04, numbered, not named for function. No indication of what Secondary01 means, what it's for, or where it belongs.
Developers were handed frames from a workboard where the most recent design lived somewhere between AMO-400_v5 and AMO-411-v1-DNU.
THE CASE
Why Chakra couldn't be fixed. Only replaced.
No Brand Expression
Chakra's theming fights you at scale. The Amotions palette has 8 hues with distinct functional roles, each AI feature needing its own visual identity. That kind of expression can't be bolted onto a generic system.
The Wrong Components
Real-time coaching has patterns that don't exist in any standard library: Live emotion signals, Phase progress during active calls, Transcript bubbles with feedback actions, Session status headers. These components had to to be custom designed every time and it was becoming messy.
WHAT'S NEXT
The foundation is built. The product grows on top of it.
Next: a linting rule that flags any hardcoded hex value in the codebase, making regressions structurally impossible.
A Storybook component library wired directly to the token file so design and engineering reference the same source of truth simultaneously.
This is just one story. See what else I’ve designed
There’s a lot more where that came from. Browse through my other projects to see how I tackle problems, experiment with ideas, and create meaningful experiences.
