João RiedoProduct Designer — Home
Ver em português: PTEN

Design System · 2026

Design System Multi-tenant

I structured the Design System for Supernova’s international white-label operation, also applied to Play4tune and Multibet.

Role
Product Designer · Design System architecture
Duration
Feb–Sep 2026
Platform
Web (multi-tenant)
Team
Me (architecture) + lead (refinement) + teammate (application) + Engineering

Screens in production

Real production screens, from mobile to desktop, built with the same design system tokens and components.

Home
Home — desktop
Home — mobile
Gamepage
Gamepage — desktop
Gamepage — mobile
Welcome Bonus
Welcome Bonus — desktop
Welcome Bonus — mobile
Storybook
Component library documented in Storybook. Only the catalogued names are shown, with no real screens, for confidentiality.

Challenge

When I joined, there was no real component reuse across brands. Every new screen meant digging up a component from wherever it had last been used, and those files went out of date almost immediately.

With no single, up-to-date source, each designer worked from a slightly different version of the interface. The result was visual inconsistency across Supernova, Play4tune and Multibet, and constant rework between design and development.

Solution

I replaced the scattered files with a shared foundation, built together with Product and Engineering.

  1. Token architecture

    I created primitive and semantic tokens in Figma variables, with primitive → semantic aliasing, so every visual decision got a name and a single place to change it.

  2. Per-tenant themes

    Instead of swapping color by color, screen by screen, I built a theme layer on top of the semantic foundation that generates each brand’s identity. It came to serve all 3 tenants.

  3. Reusable components

    I migrated legacy components to the new standard and fixed the ones without full responsive coverage, alongside the system’s evolution rather than after it.

  4. Bridge to Engineering

    I structured the implementation with Figma and Storybook and set up a handoff standard with Engineering, with specs and design decision records (DDRs), which cut down recurring questions.

Result

The Design System went into production across all three operations. With tokens, reusable components and per-brand themes, I contributed to an estimated 80% reduction in screen creation time, based on the UX team’s task completion times.

screens powered by the design system
87
components reused across tenants
200+
tenants in production
3
screen creation time (estimated)
−80%