A design system built to unify an agency at scale
When I joined dentsu Benelux as a mid-level developer in 2022, the agency's internal tools had grown organically for years — each product slightly different, each team making their own UI decisions. By 2025, as a Senior UX/UI Engineer, I was leading the effort to fix that.
Note
Due to the internal and proprietary nature of this work, no visual assets are shown for this project.
The problem
An agency's internal tools, built by many hands over many years
dentsu Benelux runs several internal SaaS products that media planners, campaign managers, and account teams use daily. Over years of growth, these tools had accumulated inconsistent UI patterns — different button styles, conflicting spacing scales, duplicate components with slightly different behaviours, and no shared language between design and engineering.
The cost wasn't just visual inconsistency. Every new feature required re-solving problems that had already been solved elsewhere. Designers and engineers were "aligned" in Figma but diverged in code. Accessibility was applied unevenly. The codebase had grown heavy.
Token architecture
Three tiers: primitive, semantic, component
The system is built on a three-tier token model. Primitive tokens are raw values —
specific colors, spacing units, font sizes. Semantic tokens give meaning to those values
in context: --color-surface-primary references a primitive
but carries intent. Component-level tokens override semantics for specific UI contexts
without breaking the chain.
This separation means a rebrand updates primitives and semantic tokens propagate automatically. It also means Figma variables and CSS custom properties share the same naming structure — which became the foundation of the design-to-code workflow.
Design-to-code workflow
Closing the gap between Figma and production
One of the most concrete improvements was restructuring how design and engineering collaborated in sprints. Previously, design hand-off was a Figma link and a hope. New components would arrive in code slightly different from spec, and there was no shared ground to resolve the difference.
By aligning Figma component naming, token naming, and Storybook story naming — and making that alignment a sprint definition of done — we reduced back-and-forth significantly. Designers review in Storybook before a component is merged. Engineers know exactly which token to reach for. The system increasingly speaks one language.
Quality & performance
40% codebase reduction, real audits, real outcomes
Consolidating duplicate components and normalizing utility patterns reduced the codebase by approximately 40% — not by deleting features, but by eliminating redundancy and replacing bespoke one-off implementations with system components.
I led a round of accessibility audits applying WCAG 2.1 AA criteria across the core platform, initiating a team-wide effort to address the findings systematically rather than one-off. Lighthouse CI was added to the pipeline so performance regressions surface before merge, not after a deploy.
Impact
A shared language the whole team speaks
The design system is now the foundation for all new features on the agency's largest SaaS platform. New product owners scope work by referencing existing system components. Designers prototype faster because they're using the same constraints as production. The gap between "designed" and "built" continues to narrow.
The most meaningful outcome isn't a metric — it's that design and engineering now share vocabulary. When a designer says primary action and an engineer says btn-primary, they mean the same thing.