Spherepay - Design system & Webflow development

Client: Spherepay Role: Design System, Webflow Development, Web Animations (GSAP) Live: spherepay.co

Spherepay is building the infrastructure for global stablecoin payments: a developer toolkit and business dashboard that lets companies send, receive, convert, and settle across currencies and chains through a single API. The product is technically sophisticated, and the site had to communicate that credibly to two very different audiences at once, developers who judge by technical precision and business buyers who need the outcome made clear.

Spherepay already had a design team and a clear visual direction, so this was not a design-from-scratch project. The risk in that setup is the familiar one: a strong design that degrades on the way to production, or a system that looks right on the first page and falls apart as the site grows. My job was to be the structural and engineering layer. Bring rigor to the foundation before development started, build the site in Webflow at the quality the brand demanded, and leave their team a system they could carry forward without me.

Design system as foundation, not decoration. Before writing a line of code, I worked alongside their design team to establish the web design system: theme tokens, primary and secondary button states, typography, spacing, and a full alpha scale, all mapped for both light and dark mode. The goal was a system that stays consistent as the site scales and reuses across every Spherepay web property, not just a set of styles for the marketing site.

Translation without loss. Every variable defined in design was mirrored one to one in Webflow on the Lumos framework. Design decisions reached production exactly as intended, with no drift between Figma and the live site. This is where most design to development handoffs quietly lose quality, and the structure was built specifically to prevent that.

Built for a global audience. Spherepay sells across borders, so the site needed to speak to international visitors in their own language. I set up full localization in Webflow. Because localization was planned into the structure from the start, adding or updating a language stays a content task for their team, not an engineering project.

Motion with restraint. I implemented scroll-driven reveal animations across the homepage and every product page (API, Dashboard, Private Desk, Embedded Ramp) using GSAP and custom JavaScript. For a product sold on technical trust, the motion had to add polish without ever reading as decorative or getting in the way of the content. Restraint over spectacle.

Each product page was enhanced with reveal animations, making the browsing experience feel more dynamic and alive.

A site that holds up technically and visually for a product operating at the infrastructure layer of global finance, credible to developers and business buyers alike. The design system is the part that keeps paying off: it survives handoff and now underpins Spherepay's web properties, so the team ships consistently instead of rebuilding. It also speaks to a global market in multiple languages, matching the reach of the product itself. The animation adds energy to the experience without costing any of the developer-first credibility the product depends on.