Built from scratch on a primitive → global → component token architecture, so engineering can ship new screens without reinventing buttons, colours, or radii.
PTI ships planning software for field service crews at some of the largest utility and telecom companies in the Netherlands - KPN, VAT, VAL, Eneco, Ziggo. Their software tells field engineers where to be, what to do, and in what order. Mission-critical stuff.
They hired me for a UX audit. The audit surfaced one root cause behind nearly every complaint: zero design consistency. Different button styles per screen, different headings, different colours, different spacings. Multiple applications stitched together where users could literally see the seams.
The root of the root: PTI had brilliant engineers but no in-house UX. When a feature needed a screen, a dev built the screen. Free reign on buttons, type, spacing. Multiply that across years and four applications and the visual chaos was inevitable.
No research budget. The biggest lever was consistency itself - so we built a design system.
The first deliverable was a written audit. The second was the design system that addressed it.
Every design decision flows top-down. Change a primitive, the whole system updates. Change a component, only that component updates.
Hex codes, pixel scales, font sizes. The only place a hard-coded value exists in the system.
Names that describe intent. "brand", "error", "surface-secondary" instead of raw hex.
Every component has its own scoped tokens. Reference globals, never primitives.
Every component lives in Figma with all variant axes mapped. Engineers pick the variant by name and it lands in code the same way.
Move ORD-2026-04-512 from M. de Vries to another engineer. The customer will get a notification.
A design system isn't a deliverable. It's a multiplier.
The first instinct was to fork an existing system - Material, shadcn, Untitled UI. We almost did it. But PTI's product needs were specific - field-service workflows, map-heavy screens, dense data tables - and the trade-off between "fast start" and "easy to tweak" was real. We went custom.
What I'm proud of: the three-layer architecture survived every "but what if we want X" question. Engineering can rebrand the entire system by changing the primitives layer. The Figma library matches the code library 1:1. That alignment is the win.
What I'd do differently: get an engineer in the room from day one of token naming. We did the second pass together and the names got 30% better. Should have been the first pass.