Abacum + Remuner · 2022–2025
From scattered components to a production design system
Overview
At Abacum and Remuner, product teams were building complex B2B workflows without a shared system. Components were duplicated, interaction patterns diverged, and engineering kept absorbing the cost.
I led the design system work at both companies: token architecture, component library, and the pipeline connecting design decisions to production. Neither was a dedicated role, both ran alongside regular squad work.
Context
My role
I defined and evolved the design system at both Abacum and Remuner, working directly with design and engineering at each company.
At Abacum I took ownership of the work alongside my squad responsibilities, built the business case with the head of design, and presented it to engineering leadership to secure buy-in. Once we had it, I defined the token architecture, set up the icon system, and worked with an engineer to build the pipeline connecting Figma to the frontend. The result was Abax, a named design system with its own npm packages, a Storybook in Chromatic, and ESLint rules to enforce adoption.
At Remuner I built the component library from scratch and defined the roadmap. For the token pipeline I adapted the setup we had established at Abacum to fit the new team's needs, with an engineer reviewing and approving the final configuration before it went into production.
The second time also meant doing some things differently. At Abacum we started with a large token set that created maintenance overhead early. At Remuner I started small and grew from there. Icons also got their own dedicated file and repository, separate from components, which made updates cleaner and kept the system easier to maintain.
At neither company was this a dedicated role.
The problem
Two companies, the same root cause
At both Abacum and Remuner, product teams were building complex B2B workflows without a shared system. As the products grew, the cost became harder to ignore.
At Abacum, five product squads were making independent decisions about spacing, color values, and component variants. Designers were building in Figma using components that didn't match what was in the codebase. Developers were hardcoding values instead of referencing a shared source. Inconsistencies were caught late in review cycles, slowing delivery and creating unnecessary back-and-forth.
At Remuner the situation was more stark: the product had been designed without a systems mindset, leaving no component library, no typography scale, and no shared approach to color. Every new feature required design decisions that should have already been made.
As both products grew, the lack of a shared system became harder to work around. What started as scattered decisions compounded into a real drag on delivery.
Approach
Building the foundation and getting people to use it
The foundation: token architecture and pipeline
The first decision was the token architecture. Two tiers: primitive tokens for raw values like hex colors and pixel sizes, and semantic tokens that gave those values meaning in context, things like "surface-primary" or "text-disabled". This separation let visual changes propagate from the primitive level through the entire system without touching individual components.
The pipeline connected every layer: Figma variables as the design source, Token Studio to manage and push changes, Style Dictionary to transform tokens into usable formats, and a GitHub repository that the frontend consumed as a submodule. A design decision made in Figma could reach production without manual handoff.
At Abacum
I led the technical setup together with the head of design and an engineering partner. We defined a named system, Abax, with two npm packages (tokens and components), a Storybook in Chromatic, and ESLint rules that flagged non-system usage at code-review time.
We kept MUI as the underlying framework rather than replacing it. Replacing it would have been a significant engineering investment for limited immediate gain. Abax sat on top of MUI, extending and overriding it with the system's tokens and patterns. A pragmatic call that kept development speed up while still moving toward a more unified visual foundation.
Adoption was the harder problem. Most people hadn't worked with a design system before, and the benefits weren't immediately visible. Julian and I built a formal presentation to make the cost of not having a system concrete: bugs from mismatched values, duplicated code, design inconsistencies caught late in review. We got DS work selected as a Maker Days initiative, which gave us a full week every quarter of dedicated contribution time across design and engineering. That cadence was what made sustained progress possible alongside regular squad work.
Without a dedicated team, the system needed a light governance layer. We documented contribution processes, naming conventions, and usage guidelines. The ESLint rules acted as a passive guardrail so no one had to police usage manually.
At Remuner
The scope was larger and the starting point was zero. I built the Figma component library from scratch, defined the roadmap, and set up the full token pipeline myself: Figma variables, Token Studio, Style Dictionary, GitHub submodule. An engineer reviewed and approved the setup, but the implementation was mine.
Building from zero meant defining the system properly from the start, not retrofitting it onto existing patterns. With only three designers on the team, adoption was faster, but the discipline of doing it systematically — instead of just creating components as needed — was what made the system stick.
The icon library had its own Figma file, repository, and release cycle, separate from components. This meant icons could be updated independently without touching the component packages or introducing version conflicts across the system.
Accessibility was part of the foundation from the start in both companies. I contrast-checked color tokens against WCAG standards and built focus states into component specs from the beginning.
Outcomes
Abacum
Handoff time on standard components went to near zero. Engineers consumed tokens and components directly, not re-implementing from spec.
Color inconsistencies that had been caught repeatedly in design reviews stopped appearing in new work. Designers across five squads were pulling from the same component library instead of creating their own versions of the same elements. By the time I left, Abax components were being used by default in new work, and the ESLint guardrails were catching non-system usage before code review.
Getting DS work selected as a Maker Days initiative was its own outcome. It meant the work had been legitimised as a company priority, not just a design team side project. That required building a case, presenting it to engineering leadership, and competing against other initiatives for dedicated time. It happened more than once, which meant the results were visible enough to justify doing it again.
Remuner
At Remuner, the system covered the full surface area of the product within roughly six months of starting from zero, and was the default for all new feature work by the end.
The clearest signal came from the CTO. Without being prompted, he said the product had gone from a 2010 app to a 2020 app. That's not a metric, but it's the kind of observation that only happens when the change is visible enough to reach people outside the design team.