Spotlight · Digital Brains
A design system for scientist-builders
Our design system lived in Figma, where only designers could use it. We rebuilt it as a web app in which scientist product owners, scientists and engineers can build new workflows themselves, validated automatically against what runs in production.
01
Introduction
Scientist product owners need to build new features in their product faster. That goes through the creation of new workflows, which must be presented at the weekly scientific meeting. Part of the team also builds proofs of concept, and wanted prototypes closer to reality.
So we built the design system as an application, not as a file: a place where they can assemble, test and show real interface pieces without being designers.
Tokens — colors named by function, copyable as HEX, RGB or RGBA
02
Challenge
The design system was first maintained in Figma, with many components and variants. Using it required understanding Figma's own methods, CSS and frontend development. We did not want a dusty cardboard box full of yellowed photos of what had been done in the app. It had to be 1) not read-only, and 2) not the business of the design team alone.
It also had to work for four audiences at once: product owners, scientists, software engineers and the AI agent. No compromise was possible, or it would serve no one. And with technical debt and inconsistencies between Figma and production, we also needed a validator able to tell the design system when a component, a segment or a molecule was out of date in the deployed app.
03
What we changed
We adapted the React components to a common methodology, then rebuilt that methodology inside the design system. Every new element, in production or in the design system, goes through an automatic validator. In the Component builder, a user starts from a molecule or a component, configures it, gets it validated and publishes it.
We made the tokens and the typography more agnostic of design vocabulary: colors are named by what they do, not by what they look like, and a dictionary explains each design and frontend term. The constraints raised by the scientists, such as accessibility and the affordance conveyed by tokens, molecules and components, came out of shared discussions on concrete cases.
01 / 06
Typography — typeface, size, leading and tracking for every style
04
Real impact
We accelerated the validation of new features and new neuroscience workflows by more than 60%. Everyone who validates these changes could open the proof of concept or the prototype directly, without worrying about the validity of the elements it was built with. Engineers also implemented faster, thanks to the libraries developed on top of the design system.
In hindsight, we would have done this much sooner, and used Figma as a bridge rather than as the source of truth.
AI assistant — answers about tokens, components and terms