Invoicing System
- fintech
- tokens
- Figma
A multi-brand token-based design system for a fintech platform serving 12 product teams. Built in Figma with full Storybook documentation.
- Client
- Foundry
- Role
- Design Systems Lead
- Duration
- 10 months
- Year
- 2023
- Team
- 3 members — staff frontend engineer, content designer, and accessibility specialist
Overview
Foundry was built to replace four inconsistent component libraries maintained by separate product teams, each with their own conventions and Figma files. The system is structured around a three-tier token architecture: global primitives, semantic aliases, and component-level tokens. This allows each of the platform's white-label brands to swap a single theme file and maintain consistent interaction patterns. The Figma library ships with 240 components across 14 categories, each linked to a Storybook story with prop documentation, accessibility notes, and usage guidelines. Adoption reached 100% across all 12 teams within two quarters.
Impact
- Components
- 240
- Team adoption
- 12 / 12
- Contribution PRs
- 180+
across 14 categories
within two quarters
external contributors in first year
discovery
Discovery
Four parallel libraries, no shared primitives, and a quarterly drift problem. Each white-label brand was patching components in isolation, with accessibility regressions appearing weeks after merge.
A two-week audit of the four libraries cataloged 87 unique button variants and 14 different definitions of "primary color." The cost wasn't aesthetic — it was the engineering hours rebuilding equivalent components across teams.
concepts
Concepts and testing
Three tiers — primitives (raw values), semantic aliases (intent), and component tokens (binding). Each tier is owned by a different group, which reduced cross-team negotiation from days to hours.
The architecture was prototyped on two components (Button, Input) and sanity-checked with two pilot teams before rolling out the full library.
mockups
Mockups
testing
Final testing
Pre-GA, two pilot teams ran the new library against their existing screens for a full sprint. Friction logs from that sprint drove the final naming pass — semantic aliases were renamed from intent verbs to noun pairs after engineers consistently misread the verb forms.
learnings
Challenges and Learnings
The hardest part was governance, not architecture. Each tier needed a clear owner and a clear contribution path; without that, contributions stalled in review and teams quietly forked components again. The RFC template and a weekly office-hours slot did more for adoption than any single technical decision.
next
Next steps
Token tooling is moving from Figma variables to a Style Dictionary pipeline next quarter so brands can be theme-swapped at build time. The component contribution path is being formalized with a reviewer rotation across the 12 product teams.