Shipping a design system that can scale
Shipped in
2022 – ongoing
My role
Founding Designer, Design systems architecture
Team
Myself + Front-end Engineer + Product manager
Building a design system from scratch is one thing. Building one that outlasts your direct involvement is another. At Metica, I designed and owned the system from the first prototype through four years of product growth, platform maturity, and a growing engineering team that eventually used it independently (with design review).
The impact
44 components shipped across Foundation, Shared, Form, and Core UI layers
4+ years in production without a rebuild, through two major product pivots
Full rebrand re-themed in hours not weeks (tokens system)
Year 0, starting with the basics
When I joined Metica in 2022, the product didn't exist yet. Four of us were figuring out what the market needed and how to turn that into something shippable. Before any real product decisions were made, I knew the design system foundations had to come first.
The first version was minimal by design: colour, spacing, typography, border radii, shadows. All translated into JSON tokens I wrote and owned from day one, versioned and synced into Storybook. Most early-stage teams skip this and bolt tokens on later, which means the system accrues debt before it has any real users.
Starting with the token schema forced every downstream decision, in Figma and in code, to be consistent by structure rather than by convention. When the brand was updated later and we needed to re-theme the entire product, it cost hours rather than weeks.
Tokens Studio for Figma, used to generate and maintain the JSON token file synced to Storybook
Building up atomically from the Foundations
Some components were obvious from the start. Inputs, dropdowns, alerts, badges, banners: the atomic layer that everything else would eventually sit on. These weren't designed speculatively. They were built because the product needed them immediately, and building them well meant every future component could inherit from something solid.
Others grew from product reality. Metica's first direction was giving game studios granular control over in-app purchase optimisation: every parameter exposed, every setting configurable. That meant building complex, state-heavy components from scratch, page headers with contextual actions, rule builders, configuration tables. Components that had no obvious precedent in a standard library.
Then the product pivoted. When AI took over the configuration layer and users shifted from controlling the system to monitoring it, the component priorities changed completely. Charts, metric cards, performance tables, and analytics views moved to the centre. Some were built on top of what already existed. Others required rethinking what the system needed to hold.
Four years in, the library covers the full product surface. The atomic layer from year one is still underneath all of it.