Portrait of Vincent Koopmans, design systems lead
Vincent Koopmans Design systems lead · design engineer

design systems for humans and agents

I build design systems and the teams that run them: tokens, paired components, specs that survive the handoff. Agentic design systems especially, made for agents to build with, not just read.

No two design systems are alike.

Technically they shouldn't differ this much. Ask a machine and it hands you a near-identical answer every time.

But systems are built by people, for brands. They carry a team's structure and history, its taste, and most of all what the brand is trying to be. That is why every one is different, and honestly why the work stays interesting. The variation isn't noise to standardise away. It's the point.

The work always had one reader: people. Lately it has a second. The agents now pulling from our tooling read a system literally, and they don't forgive one that only half exists. Same job, higher stakes: consistent and verifiable enough for the machines, human enough to still carry the brand and the people who made it.

Work

Unica design system project

Unica · 2026

humans & agents

A design system Unica can read, and so can their AI agents.

View case

Problem

Design intent kept getting lost between Figma and production. Agents could not read the system at all.

Role

Design Engineer: token architecture, paired components, machine-verifiable specs.

Outcome

A system humans and agents can both consume, so teams ship with intent intact.

ANWB design system strategy

ANWB · 2024–25

the road ahead

View case

Problem

An evolving design system that teams struggled to adopt at scale.

Role

Rethought foundation and strategy, then ran training and workshops.

Outcome

An agile framework product teams could actually run with.

Infinitas Learning design tokens

Infinitas · 2025

language for learning

View case

Problem

A new visual language to roll out across products for teachers and pupils.

Role

Optimised tokens, components and the Figma library, aligned with dev.

Outcome

A streamlined token pipeline integrated across the portfolio.

Exact component architecture

Exact · 2025–26

component architecture

UX strategy and component architecture for Exact's product suite.

View case

Problem

Product surfaces needed a coherent, scalable component architecture.

Role

UX strategy and component architecture across the suite.

Outcome

A clearer structural foundation for the product to build on.

E.ON Drive multi-brand design system

E.ON Drive · 2022–23

two brands, four skins

A multi-brand design system three people built and ran, one codebase, live across the Nordics.

View case

Problem

Many brands and markets, one small team without multiplying codebases.

Role

Design Lead: token architecture, unbranded components, React pipeline.

Outcome

Two brands in light and dark from one build; visual changes reached live code in hours.

I work independently, through CreateNew (the first designer-owned cooperative, which I co-founded). Recent design-system engagements include:

  • Design Engineer · Unica2026–now

    Building Unica's design system to be read by humans and agents alike: tokens, paired components, machine-verifiable specs.

  • Design System Specialist · Exact2025–26

    UX strategy and component architecture for the design system at the Dutch business-software company.

  • Design System Specialist · ANWB2024 & 2025

    Two engagements: first rethinking the system's foundation and strategy, then returning to refine it and train the product teams to run with it.

  • Design System Specialist · Infinitas Learning2025

    A new visual language across their products for teachers and pupils: token structure, components, and the Figma-to-code pipeline.

  • Design System Specialist · Brenntag2024

    Design-system work for the digital products of the global chemical-distribution group.

  • Design Lead · E.ON Drive2022–23

    Multi-brand design system: one React-and-tokens codebase, two brands in light and dark, live across the Nordics.

Full CV on LinkedIn ↗

Lab

The work I make when nobody asked. Three decades in, and I still can't leave an interaction alone. How should a surface feel under a cursor? How do you build something a machine can read without draining the life out of it? I have to know, and knowing means building it. Most of it starts inside real work: something to make my own process faster, or part of a client project, a custom tool left behind as an artifact. Some is still on the bench; a few might end up as repos.

running on this page

Glass refraction buttons

Controls that bend the light behind them, so the interface reads as a material, not a rectangle.

one feDisplacementMap fed by a blurred mask, not a filter per button

SVG filtersfeDisplacementMappointer-tracked
running on this page

Dithered portrait

A photo rebuilt as theme-aware dots, so a bitmap can live inside an editorial layout.

Bayer 4×4 ordered dither on a canvas, recolored to the active theme

canvasBayer 4×4theme-reactive
running on this page

This portfolio

The site you are reading, used as a running notebook for interaction craft.

every effect in this list ships here first, in hand-written HTML and CSS

vanilla JSview-transitionsno framework
prototyping

Multi-brand token ramps

Generating and checking color ramps for several brands from one source of truth.

OKLCH lightness steps, validated for contrast before they ever reach a token

OKLCHcontrast AAtoken pipeline
prototyping

Contrast-safe palettes

An OKLCH generator that guarantees readable pairs across every brand and mode.

reject a step at generation time if it fails AA, before anyone hand-checks

OKLCHWCAG AAgenerator
prototyping

Motion as tokens

Packaging physics-based spring easings as tokens, so interaction survives the handoff.

store the spring as a linear() ramp, so CSS and code read the same curve

motionspringdesign tokens
exploring

Token diff viewer

Git-style visual diffs for design tokens, so a reviewer sees a ramp shift before approving the merge.

render the before and after swatch inline, not the hex string

design tokensdiffingreview
exploring

Handoff linter plugin

Flagging hardcoded values and unbound variables in Figma before a pixel reaches engineering.

walk the node tree, match every fill against the bound-variable set

Figma plugindesign tokenslinting
exploring

Component usage map

Reading the codebase to show which components actually ship versus which only live in the library.

count real imports, not the component inventory

static analysisdesign systemadoption
exploring

Agent-readable DS specs

Structuring system docs so an LLM agent can consume tokens and components without guessing.

still finding the shape: what an agent needs from a spec that a human reader does not

design tokensMCPstructured docs

Contact

If you've read this far,
we should talk.

A system to build, a foundation to reset, a team to get running on its own: that's the work I like best. I take it on independently through CreateNew, from the Netherlands, remotely across Europe. If that's the problem on your desk, let's have a coffee.

Vincent Koopmans portrait