Taming the Fintech Monster

HydrogenPay grew fast — and its interfaces grew with it, in every direction at once. Three product teams shipped three button styles, three definitions of “primary”, and three subtly different shades of the same blue. Onboarding a new screen meant reverse-engineering whichever pattern happened to be nearby.

Poseidon is the design system that ended that. It gave design and engineering one shared language — tokens, components, and accessible patterns — and cut the distance between a Figma frame and production code.

The problem

Every team was solving the same problems in isolation. The cost wasn’t just visual inconsistency; it was velocity. Designers re-drew components that already existed, developers re-implemented them, and QA chased regressions that a shared library would have prevented.

The approach

We built Poseidon on atomic design — foundations first, then components, then patterns — so every decision compounded. Colour, type, spacing, and elevation became tokens: a single source of truth shared by Figma and the codebase.

Built with engineering, not for them

The system was authored alongside front-end developers from day one. Token names, component APIs, and state coverage were agreed together, so adoption wasn’t a hand-off — it was a habit.

For the first time, design and code spoke the same language. We stopped arguing about pixels and started shipping.

Front-end Lead, HydrogenPay

The outcome

New screens now start from accessible, on-brand components instead of a blank canvas. Accessibility stopped being a final-stage audit and became the default — every component ships meeting WCAG AA contrast and focus requirements. Most importantly, the teams move faster because the system carries the consistency for them.