Design System · Mobile App · V0.1

Card System l’Humanité

le cœur du réacteur

Le principe

Une card n’est pas un dessin libre : c’est un assemblage de slots. Un slot = un calque Figma avec un nom réservé. Ce nom est le contrat entre le design, le plugin d’audit, les devs Flutter et le CMS des journalistes. La structure interne (wrappers, auto-layouts) est libre — seuls les noms de slots comptent.

Les slots

CalqueContenuStyleStatut
TitreLe titre de l’articleLora (H1/H2/H3 selon format)Obligatoire
Rubrique« CULTURE & SAVOIR », « À LA UNE »…Hanken ExtraBold 11–13, capitalesStandard
ChapôAccroche de l’articleBody/L ou Body/MConditionnel
MediaL’image — le calque qui porte le fill image—Conditionnel
Zone-MetaConteneur : badge abonné · temps · date · maj—Standard
Zone-ActionsConteneur : bookmark · audio · share—Conditionnel
AuteurNom de l’auteur (Opinion, portrait)Avatar/AuteurSelon type
CitationExergue, titre d’opinion en italiqueLora Italic / QuoteSelon type

Et à l’intérieur des zones : Badge-abonné, Temps-lecture, Date, Icon-temps, Action-bookmark, Action-audio, Action-share.

L’arbre de calques type

Type=Article, Size=M ├── Media ← vignette ou image pleine largeur └── Zone-Content ├── Rubrique ├── Titre ├── Chapô ← togglable (prop bool) └── Zone-Footer ├── Zone-Meta │ ├── Badge-abonné │ ├── Temps-lecture │ └── Date └── Zone-Actions ← togglable (prop bool) ├── Action-bookmark ├── Action-audio ← togglable (prop bool) └── Action-share

Les wrappers intermédiaires (« Frame 10000032xx ») n’ont pas besoin d’être renommés — ils ne font pas partie du contrat. Seuls les slots jaunes ci-dessus comptent.

Les 4 règles

Ordre des slots

Rubrique → Titre → Chapô → Meta → Actions. Le Media se place en tête, en pied, ou en vignette gauche — jamais entre deux slots.

Baseline 4 px

Tous les espacements sont des multiples de 4. Padding card : 14 / 20. Gap entre slots : 12.

Slots conditionnels

Chapô · Media · Audio · Actions se masquent via les props bool du composant. Un slot masqué libère son espace — jamais de trou.

Interdits

Ne jamais réordonner les slots, ne jamais sortir un élément de sa zone, ne jamais styler un texte localement hors des text styles du DS.

Tous les slots ne sont pas partout — c’est voulu

Seul Titre est requis. Une brève XXS n’a pas de Chapô, un Dossier n’a pas toujours de Media, une Opinion remplace Rubrique par Auteur + Citation. La règle : si le slot existe, il porte son nom exact (majuscule et accent compris : Chapô, pas chapo) et respecte l’ordre.

Le workflow de vérification

  1. Sélectionne ta card → Plugins → Development → Humanité Grid Auditor → Overlay les zones : chaque slot reconnu s’allume dans sa couleur.
  2. Ce qui ne s’allume pas n’est pas nommé → double-clic sur le calque, tape le nom exact.
  3. Auditer la sélection pose le rapport : slots manquants, ordre, Media hors zone, espacements impairs, textes hors DS.
  4. Nettoyer les overlays quand tu as fini.

Zoning — tous les formats

Géométrie réelle extraite du fichier Figma. Clique un format, ou lance l’enchaînement façon Twitter. Les toggles simulent les slots conditionnels.

Formats ·

A  
RUBRIQUE TITRE CHAPÔ META ACTIONS MEDIA

Templates Articles

Les 9 templates de la page Articles, zones détectées automatiquement (Titre, Intertitre, Meta). Même logique de slots que les cards, étendue à l’article : Titre · Chapô · Corps · Intertitre · Citation · Media · Meta · Auteur.

⚠️ Les templates ne sont pas encore slot-normalisés dans Figma (leurs calques s’appellent encore « Frame x ») — c’est la prochaine étape : je passe le même renommage automatique que sur les cards, et le plugin pourra les auditer.