Case study · Design system · Rebrand · 2019–2026

Four design systems, one foundation

How I helped turn four separate design systems into one shared foundation, then used it to take three brands through a rebrand without losing what made each one distinct.

  • RoleUX Designer → Senior Manager
  • Scope4 brands · Paysafe platforms
  • PartnersEngineering · Brand · Agency
  • Years2019–2026
Four libraries, one foundation: Skrill & Neteller, PaysafeCard, Marketing and Legacy Web libraries converging into a Global Design System of tokens, 50+ components and governance, themed for Skrill, PaysafeCard and PaysafeCash.

Outcome

A shared Global Design System replacing four separate libraries, and the foundation for a Skrill, PaysafeCard and PaysafeCash rebrand delivered on schedule to 10M+ users across Paysafe platforms, with 400+ product-ready assets produced by two designers fully dedicated to the rebrand.

Stakes

Paysafe ran four design systems in parallel: one for Skrill and Neteller, one for PaysafeCard, one for marketing, and a legacy web library. Every product rebuilt the same controls, engineering implementations drifted apart, and an accessibility fix had to be made four times.

Then a multi-brand rebrand arrived. It would either go through a shared system or multiply the inconsistency across every product.

My role

2019–2021 · Building the system

I became the design-system go-to person across designers, engineers and the brand team, working in a founding group of two designers, a dev manager and three front-end engineers on the first web components, tokens and the design–dev workflow, then extending them to iOS and Android.

2022–2023 · Governance and adoption

As I moved into leading product design, the focus shifted from building components to keeping the system healthy as more teams used it: a contribution process, lifecycle rules and full adoption across Skrill and Neteller.

2024–2026 · Rebrand and scale

I led Consumer Design through the Skrill, PaysafeCard and PaysafeCash rebrand and kept pushing Global Design System adoption as platforms changed.

Decision log

  1. 01
    Make the kit faster than rebuilding

    We built 50+ core web components and 100+ sub-components with tokens from the start. In 2020 we estimated the kit saved designers about 30% of their production time, which made using the system the easy choice rather than a rule.

  2. 02
    Control how the system grows

    New components went through intake, accessibility review and engineering alignment before release, and every component carried a lifecycle state: Draft, Review, Stable or Deprecated. That stopped the library sprawling as more than eight squads started contributing, and Skrill and Neteller moved to full adoption.

    How a component earns its place: governance steps Intake, Accessibility review, Engineering alignment, Release and Monitor, with lifecycle states Draft, Review, Stable and Deprecated illustrated on a primary button.
    Every component passed the same checks before release, so the library grew without sprawling.
    The working component process map from the design-system file: check whether the component exists, create or open its file, research, inventory, exploration, developer sync, design iteration and final design, then integration into the library, publishing and sharing.
    The working process map from the library file, from checking whether a component exists to publishing it.
  3. 03
    Rebrand through the system, not on top of it

    The new brand palette became semantic tokens with contrast-safe variants for WCAG AA, and 50+ components were updated to use them. Brand changes reached products through the system instead of one-off colour overrides.

    The same product screens rendered in three brand themes, Skrill, Neteller and PaysafeCard, each in light and dark mode, with focus states shown on every flow.
    One set of components in the Skrill, Neteller and PaysafeCard themes, in light and dark, with focus states on every flow.
    Skrill palette: primitive colour ramps for neutrals, brand primary, secondary, accent and indicative colours, mapped to semantic tokens for background, text and action in light and dark.
    Skrill palette: primitive ramps mapped to semantic tokens for light and dark.
    Zoomed-out view of the accessibility audit table: each component is a row, checked per brand theme in light and dark for colour contrast, scalable text, colour-blind accessibility, visual feedback, focus, responsive behaviour, motion, touch targets and alt text.
    The accessibility audit behind the tokens: every component checked per brand theme, in light and dark.

    Each component in the library was audited against nine categories. Colour contrast was checked separately for each brand theme, which made 15 checks per component, each marked compliant, partially compliant, not compliant or still to test.

    • Scalable text, to 200% zoom
    • Colour contrast, per brand theme
    • Colour-blind accessibility
    • Visual feedback
    • Focus states
    • Responsive design
    • Motion and animation
    • Touch target size
    • Alt text
    Excerpt of the accessibility audit table for two components, Banner and Accordion: each check is marked Compliant, Partially compliant, Not compliant or Needs test, with a severity tag and notes on next steps, across scalable text and colour contrast for PaysafeCash and Skrill in light and dark.
    How each check was recorded: a status, a severity tag where it applied, and notes on the next step.
  4. 04
    Push back where the brand broke in product

    The chosen typeface didn’t cover all of our markets. We flagged it, and the foundry built additional Cyrillic and Greek characters. We also reworked the PaysafeCash palette, which looked right in brand presentations but failed on contrast and clarity in real screens.

  5. 05
    Deliver the rebrand as product work

    The agency’s direction was a visual starting point. Two designers fully dedicated to the rebrand turned it into 400+ product-ready assets, consolidated 200+ icons, and adapted components and illustrations for real interfaces. The rollout landed on schedule across all three product teams in January 2025.

  6. 06
    Migrate rather than patch

    When we evaluated the standalone merchant design system, 5 of its 34 components already existed in the Global Design System, 26 could be extended from it and only 3 were new. I recommended migrating: it was estimated at about 1.5 months, against about 3 to fix the library in place, and it would remove another parallel system.

    Merchant library · 34 components

    • 5 already in GDS
    • 26 extend from GDS
    • 3 new

    ≈ 1.5 months, against ≈ 3 to fix the library in place

    Most of the merchant library already existed in the shared system.
  7. 07
    Drive adoption when platforms change anyway

    In 2026 I argued for adopting the shared Angular component library during the PaysafeCard web migration, framing it as an engineering accelerator rather than a design request: the rebrand had to be applied anyway, and building custom UI first would mean paying twice. Adopting the library was estimated to remove about 40% of the UI build. I also proposed fixing PaysafeCash accessibility component by component rather than screen by screen, since around a dozen components covered most of the product.

  8. 08
    Hand over a living system, not a file

    When the consumer design team was wound down in 2026, the library and its documentation could transfer on their own. Ownership could not. I wrote a continuity brief that separated the two: what was already captured in Figma and Confluence, and what needed a named owner from the first day after we left. It listed six decisions, each with an owner and a date, including the three adoption decisions still open. A design system without an owner stops being a system.

    Handing over a living system: what transfers through documentation (component library, icons and tokens, process and standards, the design-system audit, the merchant migration plan, the consolidation rationale) against what needs a named owner (accountability, new components and versioning, three open adoption decisions, triage, brand and WCAG alignment), with the three adoption decisions open at handover for PaysafeCard web, PaysafeCash and Merchant.
    The library could transfer through documentation. Ownership had to be assigned.

Impact

Reflection

Product design joined the sub-brands early, so issues like missing character sets and a low-contrast palette were fixed before launch.

Three lessons I’d take into any organisation. Bring product design in before brand decisions are locked. Push adoption when platforms are being rebuilt anyway, because that’s when switching to the system costs least. And name an owner before the team changes, because a design system survives through ownership, not documentation.