simon.fyi

DPG Media
Freemium Publishing Platform

React + Next.js Design System development across 10 brands and multi-language

2020-2025Design SystemStorybookNext.jsTypeScript
At DPG Media, I worked as a React / Design System developer on a large-scale freemium publishing platform powering major titles such as AD.nl, ED.nl, and HLN.be. One shared codebase to support multiple brands, themes, requirements, and requests.

My focus was two-sided: working on the React platform, and building a consistent, scalable UI foundation from scratch that supports multiple brands, languages, and teams.

The work sat at the heart of a large migration: moving from an existing live platform to a new platform built from scratch—while keeping delivery moving and quality consistent.


The challenge

High-traffic publishing platforms have a constant stream of change: breaking news, product experiments, paywall flows, and multiple teams shipping in parallel. In that environment, small inconsistencies quickly become expensive—so the UI needs a system, not a collection of pages.

On top of that, the organization needed to move from an existing live platform to a new platform built from scratch—meaning the UI system had to support migration, parallel development, and safe adoption.
ad.nl
ad.nl

My role and contribution

As a React / Design System developer, I helped shape the design system approach and delivered production-ready UI that teams could rely on.

A big part of the job was bridging design and development: translating design intent into tokens and components, aligning on patterns, and ensuring the system remained usable for real product work.

This also involved removing all the inconsistent “design exceptions” from both the code and the design. Once those exceptions are gone, teams stop negotiating UI details feature by feature and can focus on product work.

We aligned on a single source of truth for foundations (tokens), component behavior (APIs and states), and documentation (Storybook), reducing review loops and making implementation decisions more predictable across squads. That consistency also made onboarding easier: new developers could follow the same patterns, and designers could trust that “approved” patterns would stay intact when shipped.

What I worked on

Design System with Design Tokens and Storybook

I worked on setting up and evolving a design system that includes:
  • A Storybook setup for documentation, communication, testing, and scalable component development.
  • Design tokens as the foundation for consistent spacing, typography, color, and UI decisions.
  • Importing and transforming Figma Design Tokens to a valid and typed Theme.
  • Theming to support all 10 brands within one codebase.
  • Components that are typed and predictable, Ready for production constraints (edge cases, responsiveness, content variability).
This combination makes the system easier to adopt: designers can see patterns, developers can build and test in isolation, product owners see what’s available, and teams share a single UI reference. We finally had one name per component, which made communication clearer.

Accessibility (a11y)

Implementing accessibility requirements as part of the component approach, so teams don’t need to “remember” accessibility on every feature. The goal: accessible-by-default components that scale across squads and titles.

Internationalization (i18n)

Implementing i18n patterns to support multiple languages and title-specific needs. This includes building UI components and layouts that behave predictably across varying string lengths and locales.

Next.js large-scale migration

I supported a major migration from a live platform to a new, built-from-scratch React platform. Practically, that means:
  • Building components, patterns, and flows that can be adopted incrementally.
  • Maintaining consistency while both old and new worlds coexist.
  • Handling API + data and adding types to all used data.
  • Bridging design, development, and product owners for proper alignment.
  • And much more, from indexing components to quality control, PR reviews, etc.

Bridging design and development

A large part of the value was alignment:
  • Index current styling and remove inconsistency.
  • Shared naming convention for components and patterns.
  • Behaviour/property naming and alignment between components.
  • Token-first decisions instead of ad-hoc styling.
  • Design-to-code feedback loops to prevent “looks close enough” drift.
  • Agree on what to expect and the preferred approach to remove inconsistency.

Tech stack

  • Next.js, React
  • Styled Components
  • TypeScript
  • Storybook
  • Unit, Visual, and Regression Testing
  • Cloud hosting
DPG Media

Why this work matters

This is the kind of environment where “consistency is king”, and daily/weekly alignment is a must. When a team builds across multiple brands and languages, a token-driven design system and well-documented components prevent design drift, improve delivery speed, and make quality repeatable.

Packaged and used on a Next.js React platform, making feature development more consistent with clean code.

Beyond speed, the real impact is risk reduction: when ten brands share one platform, any inconsistency becomes multiplied across titles, and any change can unintentionally ripple through the system. A token-driven, typed theme and documented component layer creates a controlled surface area for change—updates become intentional, traceable, and testable.

That’s what makes a multi-brand, multi-language Next.js platform sustainable: teams can ship continuously, migrate safely, and maintain a coherent experience without rebuilding the UI from scratch every time priorities shift.