Design System V2: From Zero Components to a 50+ Component Language
Business context
Market situation:
B2B Payments Platform
Paybilt is a Toronto-based payments platform for Canadian businesses: real-time Interac e-Transfer payments, a fully branded online checkout (Hyper-Checkout), in-person point-of-sale and a unified dashboard. In this category, visual coherence is not decoration — inconsistencies on a payment screen read as risk, and every divergence between screens taxes both trust and engineering time.
Audit Findings
A screen-by-screen audit found every product surface assembled from scratch: no shared tokens, no semantic naming, no documentation. The same button, input and table were rebuilt per screen with drifting spacing, states and hierarchy.
No Component Library
The Figma file had zero components: every screen was assembled from scratch, with no shared tokens, semantics or documentation.
Core Flow Carried the Cost
Checkout and payout, the platform's core flows, carried the cost of that gap in inconsistency, rework and slow handoff.
Design System V2 Architecture
One token-driven component language, from audit to engineering implementation
One token language, from Figma components to Tailwind code
Design System V2
The team's single source of truth
Foundation
Token Layer
Components
Building Blocks
Surfaces
Core Flows
Pipeline
Design-to-Code
Design System as Infrastructure
Audit, map and document every screen, then rebuild the product language as atomic components with token-driven variables and semantics.
Checkout V2 End-to-End
Redesign the platform's core checkout and payout flow, from research through to engineering handoff.
AI Design-to-Code
Generate Tailwind components from design tokens, delivered via GitHub and implemented directly by engineers.
AI Design-to-Code Pipeline
How a component moves from token to shipped Tailwind code
Strategic interventions
Design System V2
Months of auditing, mapping and documentation, starting from a Figma file with zero components. The foundation was a three-collection token architecture: 269 Tailwind primitive tokens (24 hue families with 11-step ramps, plus alpha overlay ramps), 13 proprietary Paybilt neutrals (Paybilt/0–1000, with Default and Legacy Greyish modes), and 128 semantic tokens across backgrounds, borders, icons and typography — every one an alias back to a primitive, resolved per mode (Light Paybilt, Dark, and a Tailwind Standard Base). On top of it, 50+ atomic components with token-driven variants, and auto-generated CSS variables behind a data-theme switch keeping Figma and code in lockstep.
Checkout V2
Owned the platform's core checkout and payout flow from research through to engineering handoff: translating stakeholder requirements into clear problem statements, user stories and iterative solution hypotheses, with scope and sequencing aligned to product priorities. Paybilt's promise is a real-time rail — authorization, settlement and confirmation in one uninterrupted transaction — so every state of the flow had to read as instant and safe.
AI Design-to-Code Pipeline
Established a pipeline that generated Tailwind components from Design System tokens and delivered them via GitHub. The client's engineers implemented the AI-generated components directly, removing the translation step between design and code. William designs and generates the artifacts; client engineers ship them.
Delivery Facts
Scope delivered
Business Outcomes
Metrics with industry benchmarks and revenue impact
| Area | Start | Delivered |
|---|---|---|
Design System V2 | 0 components | 50+ components on 410 tokens |
Checkout V2 | Legacy flow | End-to-end redesign |
Design-to-Code | Manual handoff | Tailwind via GitHub, 3 engineers |
Growth trajectory
Metric growth during tenure.
Executive summary
From zero, with token-driven variables
269 primitives, 13 brand neutrals, 128 semantic
Research through engineering handoff