l'Humanité · Application mobile

Design System Mobile
Point d'avancement

Version V0.1 Date 17 juillet 2026 Statut Fondations & composants consolidés

En synthèse

Les fondations du design system sont posées et consolidées : couleurs, typographie, grille, iconographie et l'ensemble des composants de base sont normalisés, tokenisés et prêts pour l'assemblage des écrans. Vos retours sur la découvrabilité ont été intégrés au cœur du système. La semaine prochaine, nous passons aux templates d'écrans.

Avancement par couche

Le système est construit en couches : chaque niveau s'appuie sur le précédent, du token élémentaire jusqu'à l'écran final.

FoundationsCouleurs · Typo · Grille · Spacing · Radius
100 %
AtomsBoutons · Badges · Inputs · Icônes · Avatars
100 %
MoleculesNavigation · Covers · Paywall · Modales · Toasts
100 %
OrganismsCards · Feed · Listes · Sliders · Sections
En cours
TemplatesÉcrans types de l'application

Vos retours, nos réponses

Les 12 points de vos retours sur la découvrabilité ont été analysés et priorisés. Les principaux chantiers :

La doctrine couleur

Trois univers, trois signaux — une lecture immédiate de la nature du contenu.

Rouge — ÉditorialArticles, rubriques, hiérarchie de l'information
Violet — VidéoContenus « Regarder », live, formats courts
Dégradé — MarqueMoments de marque, onboarding, temps forts

Le système de cards

Colonne vertébrale de l'application : 19 formats de cards construits sur une grammaire commune de zones (rubrique, titre, chapô, méta, actions, média). Cette normalisation garantit la cohérence des feeds et accélère la production des écrans.

Collapse SArticle XXS → XXXLOpinion M · LDossier S · M · LMagazine XL · XXLStream XLDessin L

Deux planches de zoning pédagogiques documentent l'ensemble du système (géométrie réelle, zones, slots) — disponibles dans le fichier Figma pour vos équipes.

Accessibilité — audit RGAA

Un audit d'accessibilité (RGAA 4.1 / WCAG AA) a été mené sur l'ensemble des composants de base — en amont, pour corriger au niveau du système plutôt qu'écran par écran.

Rouge Humanité validéContraste 4.88:1 sur fond blanc — conforme pour le texte, y compris en petit corps.
Contrastes secondairesCertains gris (textes secondaires, bordures de champs) passent sous le seuil — corrections planifiées au niveau des tokens.
Zones tactilesRègle des 44 px minimum documentée pour le développement sur les petits boutons et actions de cards.
Light & Dark natifsChaque couleur du système existe en mode clair et sombre — l'app s'adapte sans redesign.

Prochaines étapes

Sem. 20/07

Templates prioritaires

1. Article + Paywall (parcours réseaux sociaux) · 2. La Une / Feed · 3. Explorer & Recherche. Finalisation des organisms en parallèle.

Sem. 27/07

Univers vidéo & éditions

Templates « Regarder » (univers violet), en-têtes et fins d'édition, iconographie des formats éditoriaux.

Août

Prototype V2

Parcours complet re-maquetté sur le design system finalisé — support des prochains tests utilisateurs.