Trusst AI
A product design system rebuilt on a new brand.
- Timeline
- 2025
- Role
- Product Designer
- Deliverables
- Tokens, type styles, components, light + dark mode
Refract had just delivered a refreshed brand for Trusst. I rebuilt the product's design system to carry it: color and type scales, components, and light and dark themes, so the app reads as one piece with the new brand and holds together as it grows.
The existing system had drifted from the product. Color was inconsistent across surfaces, the type scale had stopped holding, and dark mode had been bolted on rather than designed alongside light. With the new brand landing, patching it wasn't going to be enough.
Three things behind the rebuild.
Insight 01
"The system had drifted from the product"
A system drifts the moment it stops tracking the product it serves, and the cost lands on everyone building on top of it. Sparkbox measured that directly: five of their eight developers built more consistent UI with a design system than without, and one moved from 14th of 16 to 1st once they had the system under them1.
Insight 02
"Inverting light into dark broke legibility"
The old dark mode was mostly the light theme flipped, which is where legibility goes. Pure white on black causes halation, a faint glow around the letters that makes them harder to read, and it's worse for the roughly two in five adults with some astigmatism2.
Insight 03
"One source of truth for every color decision"
Color values were scattered through the files, one hard-coded here, a near-match there, which is how surfaces drift apart in the first place. Dark mode raises the stakes on that, because every one of those values still has to clear WCAG's 4.5:1 bar for normal text, the same one light already met3.
The system had to carry the new brand through the whole app, hold up in both light and dark, and give the team a base they could extend without rebuilding the foundations each time.
Dark mode was the hard part. It couldn't be the light theme inverted, and every value in it still had to clear the same contrast bar light already met. That meant deriving both modes from one token base rather than maintaining two.
What shipped, what changed.
- Rebuilt the token layer, type scale, and component library on the new brand.
- Shipped light and dark at parity, both derived from the same tokens, so neither needs one-off overrides.
- Brought the product's surfaces back into one visual language, in Figma and in code.
A note
Specific product detail and metrics are under NDA. Happy to talk through the process and the decisions.
Next case study
PrismAI operations platform for professional services.