76
bibliothèques de composantscomponent libraries
Relevé complet et automatisé des 60 pages du fichier de conception. Chaque chiffre de ce document est mesuré sur le fichier, non estimé. A complete, automated survey of all 60 pages of the design file. Every figure in this document is measured against the file itself, not estimated.
Le design system est structuré, documenté et majoritairement prêt pour le développement. Sept des neuf sections sont déclarées prêtes. The design system is structured, documented and largely ready for engineering. Seven of the nine sections are marked as ready.
L'ensemble des couleurs passe par des variables plutôt que par des styles figés : un seul style de couleur subsiste pour 42 variables. C'est la condition technique du thème sombre, et elle est remplie. Toutes les bibliothèques exposent des propriétés lisibles et nommées, ce qui permet une correspondance directe entre le fichier de conception et le code. All colours are driven by variables rather than fixed styles: a single colour style remains against 42 variables. This is the technical prerequisite for dark theming, and it is met. Every library exposes readable, named properties, allowing a direct mapping between the design file and the codebase.
Les jetons de design — couleur, espacement, rayon, typographie, taille d'icône — sont regroupés en cinq collections. Design tokens — colour, spacing, radius, typography, icon size — are organised into five collections.
| CollectionCollection | JetonsTokens | ThèmesThemes | CouvertureCoverage |
|---|---|---|---|
| Colors | 42 | Clair · SombreLight · Dark | Marque, univers éditoriaux, gris, états système, fondsBrand, editorial worlds, greys, system states, backgrounds |
| Spacing | 15 | — | Échelle d'espacement et marges de grilleSpacing scale and grid margins |
| Radius | 10 | — | De 2 px à la pilule complèteFrom 2 px to full pill |
| Icon Size | 4 | — | 16, 24 px actifs · 14, 20 px retirés16, 24 px active · 14, 20 px retired |
| Font | 2 | — | Familles d'affichage et de labeurDisplay and body families |
54 styles répartis en six familles fonctionnelles : titres éditoriaux, titres de carte, corps de texte, corps d'article, libellés d'interface et métadonnées. Le corps d'article dispose de sa propre échelle sérif en trois graduations, distincte du corps d'interface — un article se lit comme un journal, une interface se lit comme une application. 54 styles across six functional families: editorial headings, card headings, interface body, article body, control labels and metadata. The article body has its own three-step serif scale, distinct from the interface body — an article should read like a newspaper, an interface like an application.
Grille unique de 4 colonnes, gouttière de 16 px, marge de 17 px, sur une base d'écran de 402 px. Largeur de contenu utile : 368 px. Les formats d'image sont normalisés en six proportions — 3:2 par défaut pour la photographie d'agence, 16:9 réservé à la vidéo, 1:1 pour les vignettes et portraits, 3:4 pour les affiches et couvertures, 9:16 pour les formats verticaux, 2:1 pour les bandeaux décoratifs. A single 4-column grid, 16 px gutter, 17 px margin, on a 402 px screen base. Usable content width: 368 px. Image formats are normalised to six ratios — 3:2 as the default for wire photography, 16:9 reserved for video, 1:1 for thumbnails and portraits, 3:4 for posters and covers, 9:16 for vertical formats, 2:1 for decorative banners.
La bibliothèque suit une organisation atomique : fondations, atomes, molécules, organismes, puis gabarits. Chaque composant expose des propriétés nommées — type, taille, état, et des interrupteurs de contenu — exploitables directement par les équipes de développement. The library follows an atomic structure: foundations, atoms, molecules, organisms, then templates. Each component exposes named properties — type, size, state, plus content toggles — which map directly onto engineering implementation.
| IndicateurIndicator | ValeurValue | LectureInterpretation |
|---|---|---|
| Bibliothèques aux propriétés illisiblesLibraries with unreadable properties | 0 | Conforme |
| Bibliothèques à axe non nomméLibraries with an unnamed axis | 0 | Conforme |
| Variantes en doublonDuplicate variants | 0 | Conforme |
| Bibliothèques construites mais non déployéesLibraries built but not yet deployed | 18 | À testerTo exercise |
| Objets marqués obsolètes et conservésObjects marked deprecated and retained | 62 | Politique de conservationRetention policy |
Aucun élément n'est supprimé du fichier. Les composants remplacés sont étiquetés deprecated et regroupés, ce qui préserve la traçabilité des décisions et permet un retour arrière à tout moment.
Nothing is deleted from the file. Superseded components are tagged deprecated and grouped together, preserving the decision trail and allowing any change to be reversed.
Indicateur central de la qualité d'un design system : la proportion d'éléments qui pointent vers un jeton plutôt que vers une valeur écrite en dur. Un élément lié se met à jour partout quand le jeton change ; un élément en dur doit être repris à la main. The central quality indicator for a design system: the proportion of elements that reference a token rather than a hard-coded value. A linked element updates everywhere when the token changes; a hard-coded one must be reworked by hand.
La mesure distingue les éléments situés à l'intérieur des composants — ceux qui partent en développement — des éléments dessinés directement sur les pages de documentation. The measurement separates elements located inside components — those that reach engineering — from elements drawn directly on documentation pages.
| ContrôleCheck | ConformitéCompliance | ÉlémentsElements | |
|---|---|---|---|
| Textes reliés à un styleText linked to a style | 94 % | 3 773 | |
| Couleurs reliées à une variableColours linked to a variable | 79 % | 8 980 | |
| Rayons reliés à une variableCorner radii linked to a variable | 73 % | 1 946 |
La conformité des rayons est passée de 19 % à 73 %, et celle des couleurs de 66 % à 79 %. L'analyse a montré que l'écart ne venait pas d'un défaut d'application mais d'une lacune de l'échelle : la valeur de rayon la plus employée du fichier — 2 px, 371 occurrences — n'existait pas parmi les jetons. Elle a été ajoutée, puis la liaison automatisée a été appliquée à l'ensemble du fichier. Radius compliance moved from 19% to 73%, and colour compliance from 66% to 79%. Analysis showed the gap was not a discipline failure but a scale omission: the most frequently used radius in the file — 2 px, 371 occurrences — did not exist as a token. It was added, then automated linking was applied across the file.
Deux valeurs de rayon restent hors échelle et concentrent l'essentiel du reliquat : 5 px (155 occurrences) et 1 px (60 occurrences). Une décision est nécessaire — les intégrer à l'échelle, ou les ramener vers les graduations existantes. Un résidu de valeurs non entières issues de redimensionnements accidentels est également identifié et localisé. Two radius values remain outside the scale and account for most of the remainder: 5 px (155 occurrences) and 1 px (60 occurrences). A decision is required — either add them to the scale, or normalise them onto existing steps. A residue of non-integer values caused by accidental rescaling has also been identified and located.
Contrastes mesurés selon la formule de luminance relative WCAG 2.1. Seuil retenu pour le texte courant : 4,5:1. Seuil pour le grand texte et les composants d'interface : 3:1. Contrast measured using the WCAG 2.1 relative luminance formula. Threshold for body text: 4.5:1. Threshold for large text and interface components: 3:1.
| JetonToken | Thème clairLight theme | Thème sombreDark theme | StatutStatus |
|---|---|---|---|
| Grey/900 | 19,17 | 14,95 | AAA |
| Grey/700 | 11,03 | 10,08 | AAA |
| Grey/600 | 6,90 | 8,04 | AA |
| Accent/Violet-50 | 9,45 | 5,47 | AA |
| Accent/Bleu | 8,56 | 5,13 | AA |
| Accent/Vert | 6,18 | 5,13 | AA |
| Accent/Bronze | 5,68 | 5,52 | AA |
| Status/Error | 5,65 | 5,25 | AA |
| Status/Success | 5,41 | 7,82 | AA |
| Status/Info | 5,23 | 6,49 | AA |
| Brand/Rouge | 4,88 | 3,49 | AA clair · grand texte en sombreAA light · large text in dark |
| Grey/500 | 4,29 | 5,98 | Insuffisant en clairBelow threshold in light |
| Accent/Corail | 3,96 | 4,76 | Grand texte seulementLarge text only |
| Status/Warning | 3,49 | 7,65 | Grand texte seulementLarge text only |
| SectionSection | ContenuContents | StatutStatus |
|---|---|---|
| Foundations | Grille, logo, couleurs, typographie, espacement, rayons, formats d'imageGrid, logo, colour, typography, spacing, radii, image formats | PrêtReady |
| Atoms | Icônes, avatars, badges, champs de saisie, boutons, séparateurs, médiasIcons, avatars, badges, form fields, buttons, dividers, media | PrêtReady |
| Molecules | Couvertures, tableaux et lignes, notificationsCovers, tables and rows, notifications | PrêtReady |
| Organisms | Navigation, offre d'abonnement, modales de connexion, quizNavigation, subscription paywall, sign-in modals, quiz | PrêtReady |
| Card System | Règles, bibliothèque et composants de cartes éditorialesRules, library and components for editorial cards | PrêtReady |
| Templates | Écrans d'accueil, recherche, vidéo, exploration, kiosque, profilHome, search, video, explore, newsstand, profile screens | PrêtReady |
| Gabarits d'articlesArticle templates | Blocs éditoriaux, articles, direct, dossiers, magazineEditorial blocks, articles, live, features, magazine | En coursIn progress |
Sept gabarits d'article sont construits — article par défaut pour lecteur abonné et non abonné, tribune, portrait, et trois formats critique (cinéma, musique, spectacle). Un jeu de briques éditoriales réutilisables les accompagne : blocs titre et texte, citation, liste, chiffre clé, séparateur de chapitre, modules cinéma et musique. Les sections dossiers et magazine restent à finaliser. Seven article templates are built — default article for subscribed and non-subscribed readers, opinion, profile, and three review formats (film, music, live performance). A set of reusable editorial building blocks accompanies them: heading and body blocks, pull quote, list, key figure, chapter divider, film and music modules. The features and magazine sections remain to be completed.
Le design system est en état d'être transmis aux équipes de développement pour les sections déclarées prêtes, soit six des sept sections fonctionnelles. Les points ouverts relèvent de décisions de direction artistique ou de finition, non de reprises structurelles. Aucun défaut bloquant n'a été identifié. The design system is in a state to be handed over to engineering for the sections marked as ready — six of the seven functional sections. The open items are art direction decisions or finishing work, not structural rework. No blocking defect was identified.
Méthode. Relevé programmatique de l'intégralité des pages du fichier de conception. Les pages d'archive et l'inventaire historique sont exclus des mesures de conformité et d'accessibilité. Les taux de conformité distinguent les éléments situés à l'intérieur d'un composant — ceux transmis au développement — de ceux dessinés sur les pages de documentation. Les rapports de contraste sont calculés selon la formule de luminance relative WCAG 2.1, sur fond blanc en thème clair et sur le fond d'application en thème sombre. Method. Programmatic survey of every page in the design file. Archive pages and the historical inventory are excluded from compliance and accessibility measurement. Compliance rates distinguish elements located inside a component — those passed to engineering — from elements drawn on documentation pages. Contrast ratios are calculated using the WCAG 2.1 relative luminance formula, against white in the light theme and against the application background in the dark theme.
L'Humanité — Design System Mobile app V0.1 · Juillet 2026July 2026