The 50 Best · Design SystemSystème de design
Strategy recapRécap stratégie v1.0 Pre kick-offAvant kick-off

One source,
three surfaces,
zero chaos. Une source,
trois surfaces,
zéro chaos.

A unified Figma architecture for The 50 Best ecosystem — built to scale across web, back-office and the voting app, without ever duplicating a single token. Une architecture Figma unifiée pour l'écosystème The 50 Best — pensée pour scaler sur web, back-office et application de vote, sans jamais dupliquer un seul token.

01 HubHub
03 LibrariesLibrairies
03 TemplatesTemplates
05 Golden rulesRègles d'or
— 01

The architecture L'architecture

A single source of truth — the DS Hub — feeds three context-specific libraries. Each library powers its own clean template file. Playground and Archive sit aside as dedicated zones for exploration and version control. Une source unique — le DS Hub — alimente trois librairies par contexte. Chaque librairie alimente son propre fichier de templates clean. Playground et Archive restent à part, en zones dédiées à l'exploration et au versioning.

Source · Tokens · Foundations · AtomsSource · Tokens · Foundations · Atoms
DS Hub — 50Best
Variables · foundations · shared atomsVariables · foundations · atoms partagés
↓
Libraries · Per-context componentsLibrairies · Composants par contexte
Back-office
Admin componentsComposants admin
Web & Marketing
Website componentsComposants site
Voting App
Mobile componentsComposants mobile
↓
Templates · Final mockupsTemplates · Mockups finaux
Back-office clean
Reference mockupsMockups de référence
Website clean
Reference mockupsMockups de référence
Voting app clean
Reference mockupsMockups de référence
· · ·
Aside · Sandbox & archiveÀ part · Bac à sable & archive
Playground — 50Best
Tests · explorationsTests · explorations
_Archive — 50Best
Old versions · deprecatedAnciennes versions · dépréciées
— 02

Five golden rules Cinq règles d'or

01
Tokens change in the DS Hub only. Never in a downstream library. Les tokens ne changent que dans le DS Hub. Jamais dans une lib en aval.
02
Atoms live in the Hub. Contextual components live in their library. Les atoms vivent dans le Hub. Les composants contextuels dans leur lib.
03
Templates assemble components — they never detach them. Les templates assemblent les composants — jamais ne les détachent.
04
The Playground is isolated. Never imported into a production library. Le Playground reste isolé. Jamais importé dans une lib de production.
05
Every breaking change is announced at the Wednesday sync. Tout breaking change est annoncé au sync du mercredi.
— 03

Shared atoms Atoms partagés

All atoms below live in the DS Hub and are consumed by all three libraries through Figma variables. One Button, three contexts, zero duplication. Tous les atoms ci-dessous vivent dans le DS Hub et sont consommés par les trois librairies via les variables Figma. Un seul Button, trois contextes, zéro duplication.

Inputs & controlsInputs & contrôles
Button Icon Button Input Textarea Select Checkbox Radio Switch Slider Date picker
Display & feedbackAffichage & feedback
Badge Tag Chip Avatar Icon set Tooltip Spinner Progress bar Skeleton Toast
Typography & structureTypographie & structure
Label Helper text Link Divider Heading styles Body styles
★

The variable that changes everything — density = comfortable (web) / compact (back-office) / touch (mobile app). One Button, three contexts, no duplication. La variable qui change tout — density = comfortable (web) / compact (back-office) / touch (app mobile). Un seul Button, trois contextes, zéro duplication.

— 04

Three libraries, three missions Trois librairies, trois missions

— I
Back-office
Admin · data-heavyAdmin · données denses
NavigationNavigation
Sidebar nav · Topbar admin · Breadcrumbs · User menu · Tabs · Pagination
DataDonnées
Data table · Row actions · Filter bar · Search · Empty state · KPI card · Chart wrappers
Forms & overlaysFormulaires & overlays
Form layouts · Field groups · Date range · File uploader · Modal · Drawer · Confirmation dialog
Domain-specificSpécifiques métier
Status pill · Permissions matrix · Activity log item
— II
Web & Marketing
Editorial · conversionÉditorial · conversion
NavigationNavigation
Top nav (mega menu) · Footer · Sub-nav · Editorial breadcrumb
Hero & sectionsHero & sections
Hero variants · CTA section · Newsletter · Quote block · Logo wall
Signature 50 Best cardsCartes signature 50 Best
Ranking card · Restaurant · Hotel · Bar · Article card · Award rosette · Sub-brand badge
Editorial contentContenu éditorial
Image gallery · Video · Map · Editorial filter bar · Pagination
— III
Voting App
Mobile-firstMobile-first
Native navigationNavigation native
Bottom tab bar · Top bar · Bottom sheet · Pull-to-refresh
Voting flowVoting flow
Voting card · Vote counter · Submit confirmation · Selection state · Progress indicator
Lists & searchListes & recherche
Mobile list item · Search autocomplete · Filter chips · Empty state
Onboarding & authOnboarding & auth
Onboarding slides · Login · Profile blocks · Mobile toast & modal
— 05

The ownership rule La règle de propriété

A single rule keeps duplication out of the system. Apply it every time a new component is created. Une seule règle pour éviter la duplication dans le système. À appliquer à chaque création de composant.

If the component is…Si le composant est…
It lives in…Il vit dans…
Universal — button, input, badge, iconUniversel — button, input, badge, icon
DS Hub
with variablesavec variables
Specific to one context — data table, ranking card, bottom sheetSpécifique à un contexte — data table, ranking card, bottom sheet
Its own librarySa lib uniquement
Used in two libs but with different behavioursUtilisé dans 2 libs mais avec comportements différents
DS Hub
with context overrideavec override par contexte
— 06

The action plan Le plan d'action

— 00 Before kick-offAvant kick-off
ValidationValidation
Send this document to Chris & Lucas. Get written sign-off on the architecture and the three open questions before touching Figma. Envoi de ce document à Chris & Lucas. Validation écrite de l'architecture et des trois questions ouvertes avant de toucher Figma.
— 01 Day 1—2Jour 1—2
File setupSetup des fichiers
Create the six empty Figma files inside Project Gemstone (William Reed workspace). Création des six fichiers Figma vides dans Project Gemstone (workspace William Reed).
— 02 Week 1Semaine 1
FoundationsFoundations
Import Untitled UI Variables v8 into the DS Hub. Adapt color/typography tokens to the three sub-brands. Validate light & dark modes. Import d'Untitled UI Variables v8 dans le DS Hub. Adaptation des tokens couleur/typo aux trois sub-brands. Validation des modes light & dark.
— 03 Week 2Semaine 2
AtomsAtoms
Build the shared atoms in the DS Hub with documented states and variants. Publish the library. Construction des atoms partagés dans le DS Hub avec états et variants documentés. Publication de la lib.
— 04 Week 3+Semaine 3+
Parallel library kick-offDémarrage parallèle des libs
Each library imports the DS Hub and starts building its context-specific components. Chaque lib importe le DS Hub et démarre ses composants spécifiques.
— 05 PilotPilote
First clean templatePremier template clean
Web & Marketing as the pilot — maximum business visibility and proof of concept for the full workflow. Web & Marketing en pilote — visibilité business max et preuve de concept du workflow complet.
— 06 OngoingContinu
GovernanceGouvernance
Wednesday sync. Outlign status report on Fridays. Shared DS Hub changelog for every release. Sync mercredi. Rapport Outlign le vendredi. Changelog DS Hub partagé pour chaque release.
— 07

Resources verdict Verdict sur les ressources

✓ RecommendedRecommandé

Untitled UI — Pro Variables v8

The reference for a clean Figma variables architecture. Saves 2—3 weeks of token setup. Light/dark modes already wired. Semantic token structure aligns perfectly with WCAG 2.2 AA goals. Use it as the foundation of your DS Hub. La référence pour une architecture de variables Figma propre. Économise 2 à 3 semaines de setup tokens. Modes light/dark déjà câblés. La structure sémantique colle parfaitement aux objectifs WCAG 2.2 AA. À utiliser comme base du DS Hub.

— SkipÀ éviter

Layout Lab — Atomic 10

Imposes an atomic-design structure that conflicts with the validated platform-context IA. Risk of dismantling more than reusing. Keep it as inspiration only — never as a structural base. Impose une structure atomic design qui entre en conflit avec l'IA platform-context validée. Risque de démonter plus que de réutiliser. Garder en inspiration uniquement — jamais comme base structurelle.