A small but passionate crew: three developers, a fellow designer, and a product manager. We shared responsibility for evolving the UI Kit, strategy, documentation, and adoption. Close collaboration with lead front-end developer Simon created a tight feedback loop for testing ideas and stress-testing components across real use cases.
In Form V1.0, changing a single color required 10 full days of developer time — manually mapping tokens from a spreadsheet and updating styles across the codebase. A proof of concept with a variable system brought the same update down to 5 minutes. The ROI was clear: with 440 users at an average internal cost of NOK 1,100/hour, a smarter architecture would save hundreds of thousands annually.
Reshape Form into a scalable, multi-brand-ready system that streamlines collaboration between design and development without compromising usability. A flexible framework that could grow as teams and brands evolved.
Figma and the Figma API for UI and token management, Slack for updates, ZeroHeight for documentation, Storybook for previews, and Jira for tracking. Our workflow follows a structured path: initiation with scope definition, design with regular check-ins, pre-development review, development, and final documentation publishing.
The first architecture attempt was too rigid. Brand-specific details like varying border radius on each card corner made it unscalable. After engaging leadership on the tradeoffs between brand preservation and cross-brand reuse, I rebuilt the system. The second architecture allows brands to plug into a core structure without interfering with each other — 1,500 variables for color, spacing, motion, and radius flowing through brand themes with minimal friction.
Components were built around real-world usage, balancing accessibility, responsiveness, and reusability. Each supports consistent usage across teams, reducing the temptation to reinvent with every new brand or context.
ZeroHeight became our primary platform, with each component documented with clear usage guidelines, accessibility considerations, and links to both Figma and code. Regular onboarding sessions, shared tutorials, and office hours for design system support.
Across 18 teams with major differences in tech stacks, resources, and design maturity: 7 teams primed for immediate impact with a six-month rollout plan, 4 teams adoptable with technical adjustments, 2 not suitable, and the remainder high-risk with deep tech debt. A staged designer adoption framework includes onboarding, contribution processes, workshops, and gamification for engagement.
Complex systems fail if they aren’t usable. My first variable system had power but lacked flexibility — simplicity wins. Scaling a design system requires organizational alignment, not just technical architecture. And strong brand identities and scalable systems can coexist with smart defaults and minimal overrides.