Components / DesignSystems
<DesignSystems />
One source of truth, five frameworks, hundreds of developers.
<RgButton variant="primary">Add to cart</RgButton>At Carrefour, Romain led the team behind Marcel: a design system serving Vue 2, Vue 3, React, Angular and Web Components to hundreds of internal developers, fully aligned with the Figma design library.
The work covered the whole chain: design tokens (CSS, SCSS, JSON), a shared icon library (SVG + webfont), Storybook documentation, npm distribution on a private registry, release management, tech support, and an internal contribution model.
Props
| Prop | Type | Value | Description |
|---|---|---|---|
system | string | "Marcel" (Carrefour) | Multi-framework component library, built and maintained 2021–2026 as Tech Lead of a team of 3. |
frameworks | string[] | ['vue2','vue3','react','angular','wc'] | Every component shipped for five runtimes from one source of truth. |
tokens | TokenFormat[] | ['css','scss','json'] | Design tokens synced from Figma and published for every stack. |
distribution | string | private npm registry | Versioned packages, changelogs, migration guides, office hours. |
adoption | strategy | contribution-model | Internal teams contribute back — a design system is a product, not a repo. |
Do
- Hire for the boring parts: versioning, docs, release discipline, support.
- Treat designers and developers as one audience with two dialects (Figma ↔ Storybook).
- Measure adoption, not component count.
Don’t
- Build a "component library" and call it a design system.
- Fork per framework — one source of truth or nothing.
- Ship v2 breaking changes without codemods and a migration path.
Every Marcel component shipped with keyboard support and ARIA reviewed against WCAG.
Accessibility criteria are part of the component definition of done, not a follow-up ticket.