Lifting first-time conversion by 19%.

We built foundations in Figma — color, type, spacing, line-height — that Cirkul’s engineering team consumed directly in Tailwind. Tokens were named semantically, versioned, and documented inside the file so the system stayed legible to designers and engineers at the same time.

The result was a shared vocabulary that scaled from a single mobile screen to the full marketing site — and a foundation the team continues to extend without us.

Cirkul’s purchase isn’t a single SKU — it’s a hardware decision (which bottle) plus a flavor decision (which cartridges, how many). The old checkout asked customers to hold both in their head at once. We split the flow into two clear moves and rebuilt the cart, the bottle picker, and the flavor selector as components that shared the same spacing grid and interaction patterns.

Every component drew from the same token system, so spacing and alignment stayed consistent across screens and across the engineering team’s extensions.

We built the home page as composable modules — hero, feature blocks, flavor strip, social proof, footer — each one swappable. Different palettes, different lead photography, different headlines, all from the same toolkit. Cirkul’s team ran themed and copy-driven A/B tests on their own cadence without booking design time.

Mobile got the same treatment: a coherent flow from the first scroll through choosing a bottle, picking flavors, and reordering favorites — all expressed in the same component vocabulary.