Building a shared white label design system for multiple platforms.

  • Design systems
  • Figma
  • Product design
  • iOS
  • Android
  • Web
  • Responsive
  • Accessibility
  • User testing
  • Design tokens
  • AI workflows
  • Optimization
  • Illustration
  • Icon design
  • Branding
  • Design advocacy
Client
Entercard Group AB
Role
Design lead
Duration
5 years (ongoing)

The problem

Entercard had a white label product with multiple brands across multiple languages and platforms. This was an unsustainable approach.

Objectives

  • Create better alignment between engineering and design.
  • Procure better design tooling.
  • Automate manual and time-consuming workflows.
  • Create better focus in the design team.
  • Create and establish design principles.
  • Document components and patterns, making sure they scale and are followed over time.
  • Update the visual language to better fit the product.
  • Increase accessibility compliance and knowledge.

Challenges

  • Very low design maturity across the organization.
  • A fully offshore development team.
  • Limited design resources.
  • An outdated design stack.

Foundation

Aligning the approach

Implementing a design system in an organization with low design maturity is challenging, and we knew there would be little room for error. With that in mind, I led workshops and conducted surveys to make sure everyone was aligned on the approach before starting.

This helped us establish a solid foundation and introduce the system incrementally over time.

BusinessPlayful
Position: 50 percent from Business toward Playful.
CustomNative
Position: 86 percent from Custom toward Native.
Keep it simpleMore is better
Position: 1 percent from Keep it simple toward More is better.
Off brandOn brand
Position: 76 percent from Off brand toward On brand.

Architecture

Shared parts, swappable brands

We used atomic design principles and separated foundations from components and product production. Brand, typography, and icon layers could be swapped quickly, making it practical to test different visual directions without rebuilding the interface.

The modular structure supported both app and web work and made the system easier to maintain as more platforms and brands were added.

Atomic design: shared foundations form components, patterns, templates, and complete products.

Iconography

Custom UI icon family

I built an icon set using shared keylines and anatomy, then defined how the icons should be used in the system to prevent inconsistencies. I also prepared export-friendly versions with simpler layer structures, reducing file size for production while keeping the design source easy to edit.

Illustrations

Illustrations that fit the white label

I created an illustration set that was:

  • Generic enough to work across different brands.
  • Refined enough to be well received by stakeholders.
  • Easy to maintain and expand over time.
  • Consistent with the system’s other graphical elements.
Fifteen illustrations with a shared line style and orange accents: shopping, environment, feedback, notifications, digital wallet, rewards, top-up, welcome, success, error, eligibility, credit increase, history, information, and settings.

Tokens

Brand variation without drift

A key part of aligning code and design is making sure they use the same source and reducing manual handoff. Design tokens played a central role here. Introducing them helped eliminate incorrect colors and typography in code while reducing maintenance and QA effort.

"Primary": {
    "ds__color__primary": {
      "$value": "#f28d00",
      "$type": "color",
      "$description": "Default brand color"
    },
#ED7102#00AA46ref.primary.500ref.primary.400ds.color.primary

Accessibility

European Accessibility Act as a catalyst

The system was built with accessibility in mind from the start. When the European Accessibility Act (EAA) became a compliance priority, we used that momentum to advocate for further investment: a developer dedicated to the design system and a refined design-system tech stack for web.

  1. Figma
  2. Tokens Studio
  3. Style Dictionary
  4. Component library
  5. NPM
  6. Storybook

Change

Design maturity is a team practice

The system grew in an organization that had only recently added designers. I spent time coaching developers and designers, and advocating to stakeholders for the value of a better user experience and solid foundations.

Showing real product examples was more effective than selling an abstract future state. Documentation and careful decisions take time up front, but they give teams a more dependable base for later work.

Looking ahead

Speeding up work with AI

As LLMs become better at coding, we have started using them to bring design and development closer together, with the aim of reducing time to market and improving quality. Examples of how we use AI in the design system include:

  • Accessibility compliance.
  • Code maintenance.
  • The QA process.

The result

Results

A design system is never finished. The important progress here was establishing a simple, credible foundation that teams could use while the organization’s design practice matured.

  • A modular foundation for shared components across multiple brands, web portals, and native apps.
  • Design tokens and iconography connected to production needs.
  • A working foundation that can evolve over time.
  • A working proof of concept showed how the library could adapt across brands and platforms.
  • Token definitions in GitHub gave development teams a concrete implementation reference.
  • The shared library gained internal use while the broader system remained in progress.