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 interactive elements failing WCAG AA.
Components rebuilt from scratch every sprint because no shared library existed to pull from.
Four different purples across the codebase, none of them the brand color.
Seven pages. Frames versioned by suffix: v1, v2, v4, v5, DNU.
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.
TOKENS
Tokens first. Everything else follows.
Before touching a single component, I built the token architecture. Every color, spacing value, shadow, and motion decision is a named token before it becomes CSS.
The 8-hue palette gives each feature a distinct identity. Real-Time AI in Navy to Blue, AI Coach in Lavender to Peach, AI Roleplay in Pink to Lavender, Practices in Lime to Cyan.
Three principles held throughout: semantic tokens always, never primitives. Developers reference --interactive-brand-primary, never lavender-700. Six of eight hues are decorative only, never on interactive text or buttons. The brand primary was corrected from #7B5CF7 (4.453:1, a WCAG fail) to #6340E8 (6.124:1 ✓).
FOUNDATIONS
Basics aren't basic when you define them precisely.
Typography
Three fonts, hard roles, no exceptions. Sora for headings only. DM Sans for all UI text, buttons, labels, and nav. JetBrains Mono for tokens, data, and table headers only.
Spacing
Three tiers, nothing in between. 8pt for layout and page structure. 4pt for component padding and gaps. 2pt for micro, badge and chip inner padding only.
Elevation
Shadows in light mode. Progressively lighter surfaces in dark mode. Contrast stays consistent across both.
HANDOFF
Everything engineering needs in a single file.
amotions-tokens-v1.1.json in W3C DTCG format. Drop into Figma Tokens Studio or run through Style Dictionary. One command generates CSS, JS, iOS, and Android outputs.
Documentation delivered as a single HTML file. Opens in any browser. No install required. 18 sections. Complete token tables. WCAG audit results. Three live screen examples. Engineering confirmed the token file was enough to start implementation in 3 to 5 days across all product pages.
RESULTS
One token file. Zero failures. Measurable impact.
50% reduction in designer-developer miscommunication.
Zero WCAG AA failures across 54 audits.
A confirmed 3 to 5 day full product rollout.
One token file replacing four conflicting hex values.
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.
