All servicesBuild

Product design

An interface that holds together, carried by a design system your developers can keep alive without us.

Deliverable
A design system delivered as code — tokens, components, states — and the screens that use it.
Typical duration
3 to 5 weeks
From
€6,000 per project

The problem

A product’s design is not a layer applied at the end. It decides whether a feature gets used or endured.

We deliver a design system as code rather than a set of mockups: mockups expire the moment a developer interprets them, code is the source of truth. And accessibility is a design constraint, because retrofitted it costs a rewrite.

What is included

  • Colour, type and spacing tokens, in light and dark themes
  • Components with every state: rest, hover, focus, disabled, loading
  • Key screens in high fidelity, including empty states and errors
  • WCAG 2.2 AA checked before delivery, not after
  • Usage documentation, so the system outlives its author

How it works

  1. 01

    Ground

    Colour, type, density and visual tone. What gets decided once and governs everything after.

  2. 02

    Compose

    Components come out of real screens, never out of a theoretical catalogue.

  3. 03

    Test

    Contrast, keyboard navigation, reduced motion. Accessibility is a design constraint, not a review pass.

  4. 04

    Hand over

    The system ships as code, with what it takes to extend it without betraying it.

Frequently asked

Do you deliver mockups or code?

Code. A mockup expires the day a developer interprets it; a delivered component is both the reference and the implementation.

Can you start from our existing brand?

Yes. We audit it first: a print identity does not survive a screen unchanged, and we would rather say so up front.

Does accessibility cost more?

Handled during design, no. Retrofitted, it costs a component rewrite — which is why it is not optional here.

Other services

Talk about this service

Act

Dark themePin the site's appearancesetTheme({theme:"dark"})
Light themePin the site's appearancesetTheme({theme:"light"})
System themeFollow the system preference againsetTheme({theme:"system"})
Switch the site to FrenchFrançaissetLocale({locale:"fr"})
Labs — ProductFilter Labs by typefilterLabs({type:"Produit"})
Labs — PrototypeFilter Labs by typefilterLabs({type:"Prototype"})
Labs — ResearchFilter Labs by typefilterLabs({type:"Recherche"})
Labs — Reset filtersClear every Labs filterfilterLabs({reset:true})
Journal — EngineeringFilter the Journal by categoryfilterJournal({category:"Ingénierie"})
Journal — SecurityFilter the Journal by categoryfilterJournal({category:"Sécurité"})
Journal — Agent-NativeFilter the Journal by categoryfilterJournal({category:"Agent-Native"})
Journal — StudioFilter the Journal by categoryfilterJournal({category:"Studio"})
Journal — Reset filtersClear every Journal filterfilterJournal({reset:true})
Tutorials — BeginnerFilter tutorials by levelfilterTutorials({level:"Débutant"})
Tutorials — IntermediateFilter tutorials by levelfilterTutorials({level:"Intermédiaire"})
Tutorials — AdvancedFilter tutorials by levelfilterTutorials({level:"Avancé"})
Tutorials — Reset filtersClear every tutorials filterfilterTutorials({reset:true})

Services

DiscoveryFrame the product before the first line of code, so the budget builds instead of correcting.openService({service:"discovery"})
Product designAn interface that holds together, carried by a design system your developers can keep alive without us.openService({service:"design"})
Web developmentA fast web application that holds up over time, with the tests and delivery chain to match.openService({service:"web"})
Mobile developmentAn iOS and Android app from a single codebase, published on both stores.openService({service:"mobile"})
Infrastructure & securityInfrastructure described as code, and Zero Trust access that does not rest on a text message.openService({service:"infrastructure"})
Maintenance & evolutionA product kept current, watched and fixed, with someone who answers when it breaks.openService({service:"maintenance"})
Agent-Native Architecture AdvisoryMake an existing product agent-operable without rewriting it — and without opening more than it should.openService({service:"agent-native"})

Go to

YorroProduct engineering studio in Abidjan and Paris. We design, we build, we ship.navigate({page:"home"})
ServicesBuild a product end to end, or advise a team on its agent-native architecture.navigate({page:"services"})
LabsWhat the studio has built: products, prototypes and research, with where each one actually stands.navigate({page:"labs"})
TutorialsStep-by-step guides drawn from real projects, grouped into tracks by topic.navigate({page:"tutorials"})
JournalThe studio's notes and positions.navigate({page:"journal"})
ContactDescribe your project; you get a framing back, not a boilerplate quote.navigate({page:"contact"})
AboutWho runs the studio, how it works, and what it turns down.navigate({page:"about"})
↑↓ move↵ runesc closeOne Actions layer