ENPT
← All work

The DS that cut the cost of onboarding new clients

How design stopped starting from scratch with every client, and began to scale with the business.

Role
Senior Product Designer at Accedo, technical lead of the design system
Client
Accedo (internal product; clients under NDA)
Period
Sep 2024 – Sep 2025 · 2-month POC + 8 months of build · the system kept evolving after I left
Platforms
Core, Web, iOS, Android, CTV · 8+ devices
Team
3 designers in Canada, Hungary and Singapore, scoped and reviewed by me · 1 developer on the POC · Elevate engineering
Results
↓56% design and dev hours on client setup
Reels Design System pieces in a bento grid: TV navigation bar, a show hero on TV, channel cards, an icon set and the app on a phone

About the client

Accedo sells video streaming in two ways: it builds the app from scratch, or it delivers Elevate, its white-label product that each client customizes with its own brand. Both paths serve the same kind of client, with almost identical needs.

But with every new client, even on pure consulting work, design started from zero. Engineering had a large component library. Design had nothing centralized.

The Reels Design System became one source of truth between design and code.

  • ↓56%

    design and dev hours on client setup

    Internal estimate, based on the historical average of sold hour scopes

  • 4-5 days

    to create a new feature, down from 2-3 weeks

    Internal estimate, same base

  • 8+

    devices on one system

    Accedo, internal

The challenge

Inconsistency across web, mobile and TV turned into constant rework, as early as ideation.

The system had to do three things at once: be platform-agnostic, be shareable with the client and be customizable right in Figma. All without losing consistency across dozens of client and platform combinations.

I led the solution as its technical lead: I set the scope and reviewed the work of three designers in Canada, Hungary and Singapore.

Numbers that won the argument

Not everyone bought the idea. Design tokens, code, a hybrid way of working: part of the team saw it as a risk.

So I spent two months with a developer on a proof of concept for CTV, our main platform. One library, two token levels: primitive and semantic.

Elevate’s engineering pushed back: too much time to build. What turned it around were the POC’s own numbers, a real cut in the time and cost of setting up a new client.

Diagram of the CTV proof of concept: one library with primitive and semantic tokens feeding a TV screen, and the estimated cuts in design and dev time
The CTV proof of concept: one library, two token levels.

One core, four platform libraries

The simple structure wouldn’t hold at real scale. A semantic token reused too often tied everything together. Files got heavy. And every operating system’s rules, in one library, became too much to manage.

So we split it. A third token level, component, lets us adjust one piece without breaking the rest. And libraries by scope: a Core with the brand foundations, plus one each for Web, iOS, Android and CTV, with their own breakpoints and components.

More power brought more complexity. Onboarding got harder, so we added videos and documentation. We built for eight months and launched every platform at once, because no real client uses just one.

Diagram of the Core library, with primitive, semantic and component tokens, feeding the Web, iOS, Android and CTV libraries
Brand foundations in the Core, platform rules in each library.

Figma variables straight to GitHub

Tokens live as Figma variables and turn into code in GitHub through Style Dictionary, with no plugin in between. Engineering built the connection. I checked what it generated and the token IDs.

Diagram of the token flow: Figma variables, a GitHub Actions workflow, Style Dictionary transforms and the generated CSS, iOS and JS code
One token, from Figma to code.

Reviewing work across three countries

The team was in Canada, Hungary and Singapore, and each region read the interface differently. Those differences became regional component variants inside the system.

It was my first time running design operations at this scale. Leading people turned out to be harder than leading tokens.

Selfie of Petry with Nikki, Aitana, Dora and Victor, smiling outdoors by the water
The team behind the system, together in person.
Same base, two brands.

Where it landed

  • ↓56% in design and dev hours to set up a new client (internal estimate, based on the historical average of sold hour scopes).
  • From 2-3 weeks to 4-5 days to create a new feature (internal estimate, same base).
  • From reactive to proactive: components are validated once, at the source, not on every delivery.
  • 8+ devices on the same system.
  • Designers stopped redrawing screens and started solving the client’s problem. For me, probably the biggest result.

Highlights

  • Led the design system as its technical lead, scoping and reviewing the work of three designers in Canada, Hungary and Singapore.
  • Built a CTV proof of concept with a developer and used its numbers to win over Elevate’s engineering.
  • Defined the token architecture in three levels and the split into a Core and four platform libraries.
  • Checked token generation and IDs in the Figma-to-GitHub pipeline.