Nestor PeñaDesign Engineer · Product Designer

Case study 01 · Comfone AG · Aug 2024 – Oct 20261 min read

One design language for 80+ business apps, and a course that teaches it.

I designed the Pulse design system and built the e-learning platform that teaches it to PMs and developers.

Built with
  • Figma
  • React
  • TypeScript
  • Vite
  • Design tokens
80+business apps
600+mobile operators
4design pillars
View mode

Showing the result. Switch on the Thinking layer to see how I got there.Showing margin notes, sketches and the options I rejected.

Context and role

Final design owner = I also owned the explaining.

Design lead for 80+ business apps. One designer, no rebuild.

Pulse is Comfone’s platform for 600+ mobile operators. I reported to the COO and the board. Every app solved layout, charts and navigation its own way, and the people applying the rules were PMs and developers, not designers.

How I thought about it

Every "no" here was a real option someone asked for.

Decision 01Who the docs are for
  • ADesigner docs in Figma
  • BOne generic docs site

Chose C: An audience toggle: Developers, PMs, or both

Because developers need the code first, PMs the trade-off first.

Why not A: PMs and developers rarely open Figma to learn a rule.

Why not B: one voice for two audiences meant every page was half irrelevant to its reader.

Trade-off: every page written twice.

Decision 02How to teach it
  • AA Confluence wiki
  • BLive workshops

Chose C: A self-paced e-learning platform

Because it works without me in the room and shows who has learned what.

Why not A: a wiki gets read once, if at all, and nobody knows who read it.

Why not B: workshops depend on my calendar and are gone after the hour.

Trade-off: I had to build and maintain a product, not a page.

Decision 03Where to start
  • AA full component library
  • BPage templates per app

Chose C: Foundations: tokens, grids, charts, navigation

Because 80+ live apps can adopt foundations one at a time.

Why not A: components force a rewrite before any value shows up.

Why not B: templates freeze today's apps instead of fixing them.

Trade-off: less visible polish early on.

What I built

Foundations first. Tokens can be adopted one app at a time; a component library can't.

componentsbuttonstablesmodalsformscharts?who reads this?
Started component-first. Wrong audience.
Design System Wiki
Nobody finishes a wiki.
DevsPMsBothTokenscolor: var(--text-muted)gain / costswitch
Same page, two ways to read it.

Pulse Design System eLearn

Pulse Design System eLearn home: Design with confidence, learning path with four pillars
One path, for PMs, developers or both
Icons module: anatomy of the 512 by 512 icon grid
Icons
Grids module: the seven parts of a data grid
Grids
Charts module: tooltip structure with its five components
Charts
Command palette searching pillars and modules
⌘K search

Try the idea

Switch audience, press ⌘K or Ctrl K

Pulse Design System eLearn
1 of 4 complete

Pillar 1 of 4

Design Tokens

For developers · how to apply

Use semantic tokens, never raw values. A token describes its job, so it adapts to theme and contrast mode without code changes.

color: var(--text-muted);
background: var(--surface-raised);
padding: var(--space-4);

Impact

Done is not the same as adopted.

The honest result

Finished and documented. Rollout stalled without an owner in each app team.

A design system is a product with users, a roadmap and an owner. Governance starts before the first token.

What I'd do differently

  1. Agree on an owner and an adoption budget before building.
  2. Pilot with one app team, then use their result to sell the rollout.

Building a system that needs an owner?

Available immediately. Based in Bern, open to relocate, commute or work remotely.