A shared foundation for the SNCF Group’s brands: one Figma library of components, one set of semantic tokens with a mode per brand, and documentation that links each component to its WCS web component in code.
SNCF Groupe, SNCF Voyageurs, SNCF Réseau, SNCF Holding: each brand has its own colours and identity, but their teams build the same kinds of products: business applications, forms, dashboards, headers, search.
The idea: build these components once, in a single library, and let each brand apply its own look on top.
Make one library flexible enough for every brand, without making it harder to use for the designers and developers who rely on it every day.
Values live in three layers of variables: primitives (the raw palette, sizes and weights), semantic tokens (what a value is for), and component tokens. Each brand is a mode of the semantic layer: switching from SNCF Groupe to SNCF Voyageurs swaps the values, while components never change.
Each component comes with its documentation page: what it is for, its anatomy, usage guidelines, and a status showing whether it is already available in WCS, the group’s web components library. Every variant and state is designed: sizes, focus, filled, error, loading, clearing a value.
Alongside the components, the logo and pictogram libraries are shared with every team, so that one search in Figma gives access to everything a brand needs.
