N° 01 — SERVICEBARCELONA

Design systems your engineers actually use.

We build design systems as products: tokens, components, documentation, and governance, with the Figma library and the code library kept in step. For teams shipping more than one platform, more than one brand, or both.

N° 02 — What we do

From audit to a system that runs itself.

Interface audit

An inventory of what is actually in production: every button, colour, spacing value, and pattern, across platforms. Output: the gap between the product you have and the system you need.

Design tokens

Colour, type, spacing, radius, elevation, and motion as named tokens, layered so one system can carry several brands and a dark theme without forking.

Component library

Components designed with every state and edge case, built in Figma and matched one-to-one in code — SwiftUI, Compose, React Native, or web.

Accessibility built in

Contrast, focus order, touch targets, and screen-reader labels decided at the component level, so every screen built from the system starts accessible.

Documentation

Usage guidance written for the people who open it: when to use a component, when not to, and what it looks like in code. Kept next to the components, not in a slide deck.

Governance & adoption

Versioning, a contribution model, and a release rhythm, set up with your in-house team so the system keeps working after we hand it over.

N° 03 — Why us

We ship the products the system is for.

  • 15 years designing and building mobile and web products — the system comes out of product work, not the other way round.
  • Figma and code parity: our engineers build the components we design.
  • Multi-brand experience across banking, insurance, and retail, where one system serves several products.
  • 10 international design awards (FWA, Stevie, Awwwards).
  • Delivery in English, Spanish, and Turkish, from Barcelona and Istanbul.
N° 04 — Selected work

Products built on our systems.

N° 05 — FAQ

Common questions about design systems.

Do we need a design system?
Usually when the same component has been rebuilt three times, when a second platform or brand is on the way, or when design and engineering disagree about what is in production. A single small product with one team often does not need one yet.
Can you start from our existing product?
Yes, and that is the usual case. We begin with an audit of what is live, keep what works, and migrate screen by screen rather than asking the team to stop shipping.
Do you deliver code or only Figma?
Both. The Figma library and the code components are built together and match one-to-one. If your team prefers to build the code side, we review it against the system.
Can one system serve several brands?
Yes. Tokens are layered: a shared base, then a brand layer on top. Components stay the same; the brand layer changes the look.
How does a design system engagement end?
With your team owning it. We set up versioning, a contribution process, and documentation, and work alongside your designers and engineers until they are releasing changes without us.

An idea,
a product, a brand.
Let’s talk.

Email
marvin [at] studionord [dot] org
Studio

Carrer dels Salvador
08001 Barcelona, Spain

Get directions →