Case Study · Design and motion system
One system, two completely different tech stacks.
Unifying WCAG contrast fixes, focus handling, and motion language across the Cadensa app and its landing page, without rewriting either codebase.
Surfaces2 live products
Contrast bugs fixed4
Microinteractions5
Product showcase26s
The system question
How do you keep the brand consistent across two technologically unrelated surfaces?
The Cadensa app runs on MUI, the landing page on Tailwind/shadcn. The question wasn't which is better, but how the same decision layer translates to both without rewriting either.
What it covers
Not a new UI library, but a shared decision layer over existing code.
Contrast audit
Focus handling
Form and error states
Microinteractions
Product showcase motion
Documented decision log
Key decisions
Same principle, two different translations.
- 01
Measure, don't assume
We measured actual contrast on both surfaces, and found two previously undocumented bugs by doing so.
- 02
Stack-faithful translation
Native MUI tools on MUI, framer-motion on the Tailwind side: same behavior, different language.
- 03
Brand over contrast, not instead of it
Where the brand color alone didn't pass, we changed the text color, not the brand.
- 04
Ship the new pattern where risk is lowest
The new motion pattern went live where nothing used it yet. Rewriting the Dialog carried zero consumer risk.
Next evidence
The third surface and a measurable design-time saving are still open.
third surfacedesign time on a new flowteam feedback
Next step
Building a design system across multiple surfaces?
The Interface & Motion System proves exactly this: one decision layer that stays consistent across tech stacks.