Design system
ANWB styling module
Eighteen apps sharing one ANWB look, ready for where Mendix is heading.
- Role
- design, rebuild and migration
- Period
- delivered October 2025; second phase (AI consolidation) October 2026
- Client
- ANWB, Mendix team
- Type
- design system / company module
- Key technology
- SCSS, Mendix 10.24 (React client), Atlas, Claude Code
About the project
ANWB's Mendix apps shared a styling module dating from the Mendix 9 days. It runs on Dojo, the old client (the part of Mendix that builds the pages in the browser), but Dojo is on its way out of Mendix. That means every app has to move to the new React client, and that's exactly where the old styling falls apart. So I rebuilt the styling module from the ground up and delivered it in October 2025. The new module replaces the old one, and every app pulls it in through the internal marketplace.
The challenge
Each of the eighteen apps came with its own history. Between them they had more than 20,000 styling elements, some duplicated, some outdated and some broken during earlier migrations. The new module had to keep the familiar ANWB look without carrying those bugs over. Every app also needed a clear route for making the switch.
What I built
- An inventory and consolidation of every styling rule in the landscape. That produced 1,270 mapping rules: some move into the central module, some stay local to the app, and the rest are dropped.
- 46 SCSS partials, separate SCSS files for each part, in a fixed structure: base, elements, inputs, widgets, layout and page structure. The tokens for colour, spacing and typography follow ANWB's Nomad design system.
- An analysis of 24 migration issues. I solved 15 of them centrally in the module, among them the move to the new data grids and clearing out Dojo dependencies.
- A migration plan per app, with conversion scripts to go with it. In the pilot apps, not one reference to the old module was left after the script had run.
Key features
Future-proof.
There are no Dojo selectors in it, not even as a fallback, and no selectors on internal Mendix names.
Atlas stays untouched.
Atlas is Mendix's standard theme. Customisations go through tokens and dedicated selectors, so a Mendix update won't break the styling.
Showcase module.
Page templates and building blocks gathered in one place, so developers can see what's available.
How I build
A year after delivery, in October 2026, came the second phase: consolidation across all eighteen apps. I ran it as a phased AI pipeline in Claude Code. Each app got its own automated run. Scripts took care of the routine work, and I used separate subagents for writing and for reviewing. I set the rules myself (what goes central, what stays local and what gets dropped), and I assessed the outcome myself too. The counting across twenty thousand elements I left to the AI.
Key figures
18
apps in scope
±21,000
styling elements inventoried
1,270
mapping rules
46
SCSS partials
15 / 24
migration issues solved centrally
Tools used
- Styling
- SCSSMendix Atlasdesign tokens
- Mendix
- Mendix 10.24React clientinternal marketplace
- AI
- Claude Code (headless runs, subagents)Python scripts
What I learned
- 01
Setting up a design system at scale:: going from twenty separate styles to a single source.
- 02
SCSS architecture: with tokens, partials and a strict rule for overrides.
- 03
Migrating without a big bang:: giving each app its own route, and fixing centrally whatever can be fixed centrally.
- 04
AI pipelines for bulk work:: I set the rules, and the AI applies them consistently.