Direction Artistique

Direction artistique

Statut : 🟡 Brouillon · Màj : 2026-09-28 · Tickets : #81 #135

Cette page reprend tout ce qui a été validé sur maquette du 22 au 25 septembre 2026 (entrées D-003 à D-033 du Design-Changelog). Les valeurs sont dans design/design-system/tokens.json, source unique pour Claude Design et pour le thème de l'app ; le design system Widoo dans Claude Design utilise le même fichier. Les maquettes sont sur cinq canevas Claude Design, Découverte (E-01 à E-05), Sortie (E-06, E-07, E-08, E-15, mouvement, icônes), Compte (E-09, E-10, E-16, E-17), Éditeur (E-11 à E-14) et Sandbox (pistes écartées), et exportées dans design/.

Toute évolution d'une valeur passe par une entrée D-xxx, puis tokens.json, cette page et le design system sont mis à jour ensemble. Dans le code, on référence un token par son nom (blue-ink), jamais par sa valeur.

tokens.json

Clé	Contenu
color	59 couleurs, thème light (Clair, validé) et dark (Sombre, proposition non validée)
type	Plus Jakarta Sans, 20 styles en trois groupes (Titres, Chiffres, Texte)
spacing, radius, size, shadow	espacements, rayons, tailles de composants, ombre de la barre d'onglets
mappings	familles d'activité, catégories de lieu (places.category) → famille → icône, icônes des filtres et de l'interface (Phosphor), pastilles, surfaces sombres, tooltip de la carte (mappings.mapTooltip, D-041), règles d'accessibilité chiffrées, ton, mouvement (mappings.motion, D-030, D-042)

Principes

• Blanc, doux, photo. Fond blanc pur, surfaces en gris chaud, photos grandes. Les surfaces se distinguent par leur couleur et leur rayon, jamais par une bordure.
• Une seule surface sombre, et rarement. L'encre (surface-strong) est réservée à la chip active, à l'onglet actif, à la tooltip de la carte (troisième surface sombre, D-004), au bouton et à la pastille Premium (D-014), à la pastille « Fin du parcours », au toast (D-025), à la page immersive du parcours en cours et à son mini-lecteur (E-07, D-029), et au segment actif de l'onglet Parcours (E-08, D-035). Rien d'autre n'est sombre.
• Une seule ombre. shadow-tabbar sous la barre d'onglets flottante (D-003), le toast (D-025) et le mini-lecteur (D-029), les éléments qui flottent ; tout le reste est à plat.
• Un mouvement sobre. De 200 à 350 ms, sans rebond, identique sur iOS et Android ; un geste suit le doigt ; « Réduire les animations » respecté (D-030). Voir Mouvement.
• Le parcours avant le lieu. Une card ou une fiche montre d'abord ce qu'on va vivre (photo, titre, ambiance), puis ce qui rassure (budget en chiffre clé, durée, distance).
• Accessible par défaut. Voir Accessibilité.

Couleurs (thème clair)

Plus de palette de travail : #FAF9F6 (fond) et #BFD7EA (bleu clair) sont abandonnés, l'accent chaud est le corail du favori.

Fonds, texte et filets

Token	Valeur	Usage
bg	#FFFFFF	Fond de tous les écrans, des sheets, de la fiche et de la barre d'onglets. Blanc pur (D-003).
surface	#F6F5F1	Gris chaud : cards, disques de boutons, tuiles, encarts, champ de recherche dans la sheet, chips au repos dans la sheet, bouton secondaire « Programmer ».
surface-strong	#14171F	Seule surface sombre, réservée à : chip active, onglet actif, tooltip de la carte, bouton et pastille Premium, pastille « Fin du parcours », toast (D-025), page immersive du parcours en cours et mini-lecteur (E-07, D-029), segment actif (E-08, D-035). Rien d'autre.
ink	#14171F	Texte principal, icônes, titres, chiffres.
muted	#5F6B80	Texte secondaire : sous-titres, métadonnées, libellés de tuile, lignes d'état discrètes, icônes secondaires. 5,38:1 sur bg, 4,93:1 sur surface.
on-strong	#FFFFFF	Texte et icônes posés sur surface-strong, blue (clair), une famille d'activité ou une photo voilée.
on-strong-muted	#D5D8E0	Texte secondaire sur surface-strong (ligne d'étape ou « 4 étapes en 7 h » dans la tooltip).
line	#ECEBE7	Filets : bord haut des barres collées, séparateurs de listes et d'avis. Décoratif.
handle	#D9DCE3	Poignée des sheets. Décoratif.
skeleton	#E8E7E2	Squelettes de chargement, fond du bouton désactivé « Aucun parcours ».
rail	#D0D4DC	Pointillés de la timeline entre les étapes. Décoratif.
control-border	#7F8A9C	Contour d'un radio ou d'une case non cochés (D-007 : #C3C8D3 échouait à 3:1).
control-border-disabled	#C3C8D3	Contour d'un contrôle désactivé (tri par distance sans position). Composant inactif, hors exigence.
scrim	rgba(20, 23, 31, 0.40)	Voile sous une sheet modale (filtres, tri).
photo-shade	rgba(20, 23, 31, 0.45)	Haut du dégradé posé sur la photo de la fiche, pour la barre d'état blanche.
photo-veil	rgba(20, 23, 31, 0.62)	Fond du compteur de photos « 1 / 6 » (blanc dessus : 5,03:1 au pire cas).

Bleu (action)

Token	Valeur	Usage
blue	#4E74C8	Action principale : boutons pleins (« C'est parti », « Voir N parcours »), liens sur bg, marqueur sélectionné, tracé du parcours, compteur de filtres, « Voir tout », anneaux de chargement. 4,51:1 sur bg ; jamais en texte sur surface (4,1:1). Fond de la page Premium (E-17), seule page bleue (D-040).
on-blue	#FFFFFF	Texte et icônes sur blue.
blue-on-strong	#5A7FCF	Icône pleine de l'onglet actif, sur surface-strong. Aussi le bleu du logo : fond de l'icône d'app et de l'écran de lancement (E-18, D-060). Jamais derrière un texte blanc (3,91:1) : la page Premium garde blue (choix d'Ilan, D-060).
blue-ink	#3A4FA8	Texte bleu sur surface ou blue-soft : lien « Activer », « Voir le profil », suggestions « +12 », texte de la pastille Signature, initiale d'avatar (D-007).
blue-soft	#E4ECFA	Fond d'avatar, fond de la pastille Signature (translucide sur photo).

Accents et alerte

Token	Valeur	Usage
coral	#F2592A	Cœur du favori actif (3,37:1, composant).
amber	#F5B301	Étoiles de note, soleil de la météo, couronne Premium. Icône seulement, jamais du texte (1,85:1 sur bg).
alert	#8C5A00	Alerte « lieu signalé » : texte, icône triangle, point « ! » sur la pastille d'étape (fiche et parcours en cours). 5,87:1 sur bg (D-014, D-033).
alert-soft	#FFF4D6	Encadré d'alerte en tête d'une étape signalée (fiche) et alerte d'étape de E-07, lieu signalé ou bientôt fermé (alert dessus : 5,36:1, D-033).
error-ink	#B42318	Rouge du refus : texte et icône de la pastille « Refusé » d'un parcours refusé par la modération (5,75:1 sur error-soft, 6,57:1 sur bg, D-038). Jamais pour une alerte de lieu.
error-soft	#FDECEA	Fond de la pastille « Refusé » (D-038).

Pastilles et chips d'ambiance

Token	Valeur	Usage
badge-verified-bg	rgba(227, 243, 236, 0.86)	Pastille Vérifié posée sur photo. Contraste mesuré sur le fond de pastille (règle D-007) : 5,57:1 ; 4,05:1 au pire cas sur une photo noire.
green-soft	#E3F3EC	Fond de la chip Nature et de la pastille Vérifié.
green-ink	#1F6B52	Texte vert : « Vérifié », « Ouvert », « Vérifié par N visiteurs », chip Nature. 6,40:1 sur bg.
badge-signature-bg	rgba(228, 236, 250, 0.86)	Pastille Signature posée sur photo (parcours de l'équipe Widoo, D-014). Contraste mesuré sur le fond de pastille (règle D-007) : 6,17:1 ; 4,49:1 au pire cas sur une photo noire.
badge-premium-bg	rgba(20, 23, 31, 0.86)	Pastille Premium posée sur photo : « Premium » en on-strong et couronne amber (D-014).
plum-soft	#F3E4EC	Fond de la chip Culture.
plum-ink	#7A2A4A	Texte de la chip Culture, point d'ambiance Culture.
violet-soft	#ECE7F8	Fond de la chip Shopping (D-010).
violet-ink	#5A3FA8	Texte de la chip Shopping (6,40:1 sur violet-soft).
coral-soft	#FFE4D9	Fond de la chip Gastronomie.
coral-ink	#A63D12	Texte de la chip Gastronomie.

Points d'ambiance propres (les autres reprennent plum-ink, family-nature, violet-ink et coral)

Token	Valeur	Usage
mood-romantic	#D0405F	Point d'ambiance Romantique (4,58:1 sur bg, 4,20:1 sur surface).
mood-unusual	#9A3FC0	Point d'ambiance Insolite (5,46:1 sur bg, 5,00:1 sur surface).
mood-instagrammable	#BC3797	Point d'ambiance Instagrammable (5,08:1 sur bg, 4,66:1 sur surface).
mood-relax	#1F87B5	Point d'ambiance Détente (4,05:1 sur bg, 3,71:1 sur surface).
mood-sport	#5E8F12	Point d'ambiance Sportif (3,88:1 sur bg, 3,56:1 sur surface).

Chips des cinq autres ambiances (D-050)

Plus aucune chip d'ambiance grise : Romantique, Insolite, Instagrammable, Détente et Sportif prennent une teinte tirée de leur point, texte et icône au moins à 6:1 sur leur fond (valeurs sombres : proposition, au moins 4,5:1).

Token	Valeur	Usage
mood-romantic-soft	#F9E6EA	Fond de la chip Romantique.
mood-romantic-ink	#9A2F46	Texte et icône de la chip Romantique (6,11:1 sur mood-romantic-soft).
mood-unusual-soft	#F2E6F7	Fond de la chip Insolite.
mood-unusual-ink	#7E349D	Texte et icône de la chip Insolite (6,09:1 sur mood-unusual-soft).
mood-instagrammable-soft	#F6E5F1	Fond de la chip Instagrammable.
mood-instagrammable-ink	#952B77	Texte et icône de la chip Instagrammable (6,02:1 sur mood-instagrammable-soft).
mood-relax-soft	#E2EFF5	Fond de la chip Détente.
mood-relax-ink	#165E7F	Texte et icône de la chip Détente (6,08:1 sur mood-relax-soft).
mood-sport-soft	#EAF0E0	Fond de la chip Sportif.
mood-sport-ink	#40610C	Texte et icône de la chip Sportif (6,15:1 sur mood-sport-soft).

Toast et parcours en cours (D-025, D-029)

Token	Valeur	Usage
success-on-strong	#4CC38A	Icône du toast de succès sur surface-strong (8,09:1 ; 6,12:1 sur sa pastille) ; « Ouvert » dans les sections de E-07 (D-029).
info-on-strong	#8EA8F0	Icône du toast d'information sur surface-strong (7,69:1 ; 5,82:1 sur sa pastille) ; liens, icônes et numéros des sections de E-07 (D-029).
error-on-strong	#FF6B5A	Icône du toast d'erreur sur surface-strong (6,40:1 ; 4,84:1 sur sa pastille). Le toast d'attention prend amber.
toast-disc	rgba(255, 255, 255, 0.10)	Pastille de l'icône du toast, sur surface-strong.
toast-action	rgba(255, 255, 255, 0.14)	Pilule de l'action du toast (« Réessayer ») et boutons en verre de E-07 (« Itinéraire », Oui, Signaler), texte on-strong (11,88:1).
surface-strong-raised	rgba(255, 255, 255, 0.06)	Cartes des sections sur encre de E-07 (Pratique, Le mot…), radius-section ; texte on-strong 15,3:1, info-on-strong 6,6:1, success-on-strong 6,9:1 (D-029).

Carte

Token	Valeur	Usage
map-base	#F0EFEC	Fond de carte.
map-road	#FFFFFF	Voirie.
map-park	#E2ECDF	Parcs et jardins.
map-water	#C9DCEF	Eau (Seine, canaux).
map-block	#E8E6E0	Îlots bâtis.
map-label	#5F6B80	Noms de quartiers en capitales (4,68:1 sur map-base).

Familles d'activité

Couleur des pastilles d'étape et des marqueurs, icône blanche dessus (D-004), identique dans les deux thèmes. La chip d'ambiance reprend la famille en teinte douce (Shopping #5A3FA8 sur #ECE7F8, D-010). Les cinq ambiances sans famille (Romantique, Insolite, Instagrammable, Détente, Sportif) prennent une teinte tirée de leur point, mood-*-ink sur mood-*-soft (D-050), dans les filtres (E-03) comme dans l'éditeur (E-11). Dans l'éditeur, posées sur le fond surface des sections, les chips sans teinte (Pour qui) sont blanches au repos (D-050).

Famille	Token	Catégories de lieu (places.category, icône)	Chip d'ambiance
Gastronomie	family-food #F2592A	restaurant (restaurant, fork-knife), café (cafe, coffee), bar (bar, wine), boulangerie (bakery, bread)	coral-ink sur coral-soft
Culture	family-culture #7A2A4A	musée (museum, bank), galerie (gallery, frame-corners), monument (monument, castle-turret)	plum-ink sur plum-soft
Nature	family-nature #2A8A62	parc (park, tree), point de vue (viewpoint, mountains), balade (walk, person-simple-walk)	green-ink sur green-soft
Shopping	family-shop #5A3FA8	boutique (shop, shopping-bag)	violet-ink sur violet-soft
Loisirs	family-leisure #128A87	activité (activity, lightning), spectacle (event_venue, ticket)	—
Autre	family-other #5F6B80	autre (other, map-pin)	—

Points d'ambiance

Point de 8 px devant la ligne « ambiance · quartier » des cards (sur surface) et de la fiche (sur bg). Décoratif, le nom suit toujours ; chaque couleur tient quand même 3:1 sur les deux fonds. Neuf couleurs distinctes (écart minimal ΔE2000 11,5, distinctes aussi en deutéranopie et protanopie). Les quatre ambiances liées à une famille en reprennent la couleur ; Nature passe au vert de la famille #2A8A62 (l'ancien #4FA88B était à 2,87:1), il ne reste qu'un vert Nature (D-016). Clés : packages/shared (moods), correspondance dans mappings.moodDots, avec la teinte de chip des cinq ambiances sans famille (chip, D-050).

Ambiance	Token	Valeur	Contraste sur bg / surface
Culture	plum-ink	#7A2A4A	9,30:1 / 8,53:1
Nature	family-nature	#2A8A62	4,28:1 / 3,92:1
Shopping	violet-ink	#5A3FA8	7,75:1 / 7,10:1
Gastronomie	coral	#F2592A	3,37:1 / 3,09:1
Romantique	mood-romantic	#D0405F	4,58:1 / 4,20:1
Insolite	mood-unusual	#9A3FC0	5,46:1 / 5,00:1
Instagrammable	mood-instagrammable	#BC3797	5,08:1 / 4,66:1
Détente	mood-relax	#1F87B5	4,05:1 / 3,71:1
Sportif	mood-sport	#5E8F12	3,88:1 / 3,56:1

Pastilles sur photo

Hauteur 26 px, style status, plafonnées à 1,3 au texte dynamique. Le contraste d'une pastille se mesure sur son propre fond (règle D-007).

Pastille	Rendu	Sens
Vérifié	green-ink sur badge-verified-bg, sceau seal-check	lieux vérifiés par des visiteurs
Signature	blue-ink sur badge-signature-bg, sans icône (plus de corail, D-014)	parcours créé par l'équipe Widoo
Premium	« Premium » en blanc sur badge-premium-bg (encre à 86 %), couronne crown-simple pleine en amber	parcours réservé aux abonnés, de Widoo ou d'un utilisateur ; cumulable avec Signature
Privé	ink sur bg, cadenas lock-simple	parcours privé, à la place de Vérifié et Signature
Nouveau	« Nouveau » en ink sur bg, à la place de la note sur la card	parcours publié sans avis ; pas de Vérifié tant qu'il n'est pas vérifié (D-023)
Crédit	« © J. Moreau » en blanc à 72 % sur encre à 40 %, 11/22 600 (12/26 sur la couverture, à gauche de « 1 / 6 ») ; appuyé : encre pleine, texte blanc, bulle surface-strong avec auteur, licence et « Voir sur Wikimedia Commons »	photo libre de Wikimedia Commons, discrète par choix d'Ilan ; hors exigence de contraste, le crédit complet est dans la bulle et le libellé (D-052)

Créateur certifié (D-023) : pas une pastille sur photo mais un sceau seal-check plein en blue à côté du prénom (profil, ligne créateur des cards et de la fiche), avec « Créateur certifié » en blue-ink sous le prénom sur le profil ; l'appui ouvre l'explication des critères. Distinct du sceau vert de Vérifié par sa couleur, sa place (à côté d'un nom, jamais sur une photo) et son libellé.

Sur une card, Premium se place à côté de la note en haut à gauche ; dans la fiche, après Signature. L'or n'est jamais du texte. Un parcours Premium ouvert sans abonnement : un seul bouton encre « Débloquer avec Premium », étapes 2 et suivantes verrouillées, encart Premium en gris chaud après les étapes ; sur la carte, ni tracé ni étapes, un départ encre à couronne et une tooltip « Parcours Premium, 4 étapes en 7 h » (D-014).

Mentions de l'éditeur côté visiteur (D-052)

Report sur la fiche (E-05), la programmation (E-06), « Votre sortie » (E-08) et le parcours en cours (E-07) de ce que l'éditeur saisit ; valeurs dans mappings.photoCredit, affiliate, ephemeral, transitModes, access (planche).

• Lien affilié : « Lien affilié » en label 12/16 500, muted (on-strong-muted sur E-07), collé sous « Réserver » et aligné comme lui, seulement pour un lien déclaré affilié par le créateur ou un lien partenaire de Widoo. Mention gardée à chaque lien après vérification (LCEN art. 20, DSA art. 26 : marquage visible, en temps réel) ; une mention dans les CGU ne suffit pas.
• Étape ou lieu éphémère : sablier hourglass-medium ; « Jusqu'au 17 janv. » en muted après la catégorie ou l'état de la ligne (flexWrap) ; « Jusqu'au dimanche 17 janvier 2027 » dans le détail, l'année seulement si ce n'est pas l'année en cours. Après la date : alerte alert sur alert-soft dans E-06, avec la dernière date possible ; ligne alert sous les tuiles de la fiche.
• Trajets : « {durée} {à pied, à vélo, en métro, en voiture} ({distance}) » avec l'icône du mode des filtres (person-simple-walk, bicycle, subway, car).
• Crédit d'une photo libre : voir Pastilles sur photo ; seule exception à « jamais d'opacité sur un texte ».

Vérification communautaire (D-056)

Sur la fiche (E-05) et le profil (E-09, E-16) ; valeurs dans mappings.communityCheck.

• Dernière vérification : « Dernière vérification il y a 4 mois » sous la ligne d'une étape stale, label 13/18 500 muted, sceau seal-check au trait en green-ink (icon-s) ; jamais de pastille, jamais plein. « Pas encore vérifié » sans sceau.
• Signaler ce parcours : lien 14/20 600 muted avec flag ; sheet à motifs en radios de 24 px (lignes de 48 px, filet line), le deuxième temps « Quel lieu ? » reprend les pastilles de catégorie ; « Vous avez signalé ce parcours » avec flag plein, non cliquable, suivi de la date pendant 7 jours ; « Envoyer » en #E8E7E2 et muted tant qu'aucun motif n'est choisi ; hors connexion, toast d'information (D-057).
• Sur le terrain : carte surface rayon 16, disque bg de 44 px avec seal-check au trait green-ink 22, titre 15/20 700, texte 13/18 500 muted.
• Texte agrandi (D-058) : une ligne d'état à icône qui passe à la ligne garde son icône sur la première ligne (en haut, plus au milieu) ; aucun nouveau composant plafonné, aucun nouveau reflow ; valeurs dans mappings.communityCheck.largeText.

Traduction automatique (D-076)

Sur la fiche (E-05 : parcours et avis) et le parcours en cours (E-07) ; valeurs dans mappings.translation (planche, ticket #203).

• Ligne de traduction : sans fond ; translate au trait (icon-s) et texte en label 13/18 500 muted ; action 13/18 700 blue-ink, alignée à droite, 32 px dessinés, hitSlop jusqu'à 44 px. Sur E-07 : on-strong-muted et info-on-strong. Rangée en flexWrap : l'action passe dessous, à droite, quand elle ne tient plus (D-039).
• Rédaction : la ligne nomme la langue d'origine (« Traduit automatiquement de l'anglais ») ; aucun point médian entre la ligne et l'action. Sous le prénom d'un avis traduit : « 17 sept., traduit de l'anglais ».
• Ce qui ne se traduit pas : noms des lieux, étiquettes, chiffres et audio, dont la langue est dite (« En anglais »). Un parcours lu dans sa langue d'origine ne montre rien.
• Accessibilité : textes d'origine balisés dans leur langue ; icône décorative, masquée au lecteur d'écran ; couples déjà contrôlés (5,38:1, 7,33:1, 12,57:1, 7,69:1).

Typographie

Police unique Plus Jakarta Sans (Google Fonts, licence OFL), fichiers 400 à 800 dans le design system (les chemins type.fonts de tokens.json sont relatifs à celui-ci) : 800 pour les titres et les chiffres, 700 pour les noms et les boutons, 500 et 400 pour le texte. Baloo 2 et Poppins sont abandonnées (D-003). Plus petit texte : caption 12 px, libellé de tuile. Pas de capitales hors des noms de quartiers sur la carte.

Style	Taille / interligne (px)	Graisse	Interlettrage	Usage
title-xl	26 / 32	800	-0.02em	Titre de la fiche, grand titre d'une liste (« À proximité »).
title-l	22 / 28	800	-0.02em	Titre d'une sheet modale (« Filtres »).
title-m	20 / 26	800	-0.01em	Titre de section de la fiche (« Les étapes », « Avis »).
title-s	17 / 22	800	-0.01em	Titre de section de la sheet, groupe de filtres, salutation, titre d'un message d'état.
title-card	16 / 21	800	-0.01em	Titre de card (deux lignes au plus), titre de la barre du haut compacte.
number-l	20 / 24	800	-0.02em	Chiffre clé du budget sur la card (« 40 € »), unité en label à côté.
number-m	17 / 22	800	-0.01em	Valeur des tuiles d'infos de la fiche.
number-s	13 / 18	800		Note en pastille, compteur de filtres, étiquette de durée des marqueurs.
item	16 / 21	700		Nom d'étape, ligne de résultat de recherche.
button-l	16 / 20	700		Bouton principal de 52 px (panneau de filtres).
button	15 / 20	700		Boutons de 48 px (barre de la fiche, « Voir le parcours »). 600 pour le bouton d'un message d'état.
body	15 / 22	400		Description, saisie, avis.
body-medium	15 / 20	500		Lignes de liste et d'options (« En pratique », tri).
body-s	14 / 20	500		Sous-titres, lignes de détail d'étape, ambiance · quartier dans la fiche.
tab	14 / 20	500		Libellé de l'onglet actif.
label	13 / 18	500		Chips, métadonnées, tags, trajets, créateur « Par Widoo ».
label-strong	13 / 18	700		Heures et durées de la timeline, liens discrets.
status	13 / 18	600		Lignes d'état discrètes, pastilles sur photo (Vérifié, Signature, Premium, Privé).
caption	12 / 16	500		Libellé sous la valeur d'une tuile. Plus petit texte autorisé (plafond 1,3).
map-label	13 / 16	800	0.1em, capitales	Noms de quartiers sur la carte (map-label).

L'interligne de ce tableau vaut pour iOS et les maquettes seulement : sur Android, le texte garde l'interligne de la police, qui suit l'agrandissement du texte système (règle dans Accessibilité › Taille de texte, D-043, ticket #135). Les valeurs de tokens.json ne changent pas.

Formes et tailles

Rayons :

Token	Valeur	Usage
radius-thumb	10px	Vignette photo de 48 px dans la tooltip.
radius-photo	12px	Photo dans une card, photo d'étape dépliée, encadré d'alerte, conseil du créateur.
radius-block	16px	Tooltip de la carte, tuiles d'infos, encarts (créateur, Premium).
radius-card	18px	Cards de parcours, marqueur photo de la carte.
radius-section	20px	Sections sur encre de E-07, mini-lecteur, bloc de l'étape sur la carte (D-029).
radius-sheet	24px	Haut des sheets et de la feuille de la fiche.
radius-pill	999px	Boutons, chips, pastilles, disques, barre d'onglets, champ de recherche.

Espacements :

Token	Valeur	Usage
space-4	4px	Écart icône-texte serré, marge sous un titre.
space-6	6px	Écart icône-texte dans une chip, entre pastilles sur photo.
space-8	8px	Entre chips, entre boutons d'une barre, entre lignes d'un détail.
space-10	10px	Entre cards d'un carrousel, entre deux boutons de la barre collée.
space-12	12px	Entre cards d'une liste, padding vertical de la barre collée.
space-16	16px	Marge d'écran, padding d'un encart.
space-18	18px	Entre les blocs du haut de la fiche.
space-20	20px	Padding haut de la feuille de la fiche.
space-24	24px	Entre sections de la fiche.
space-28	28px	Entre groupes du panneau de filtres.
space-32	32px	Respiration avant une section isolée.

Tailles de composants (chips à 36 px depuis D-004, zone tactile portée à 44 px par hitSlop) :

Token	Valeur	Usage
touch-min	44px	Zone tactile minimale (hitSlop sur les chips de 36 px et les petites pastilles).
chip-h	36px	Hauteur d'une chip (D-004).
badge-h	26px	Hauteur d'une pastille sur photo, étiquette de durée des marqueurs.
button-h	48px	Bouton courant (barre de la fiche, messages d'état).
button-l-h	52px	Bouton principal du panneau de filtres, éléments de la barre d'onglets.
disc	44px	Bouton rond (fermer, partager, favori, filtres).
disc-s	34px	Favori posé sur la photo d'une card.
avatar-s	22px	Avatar ou logo de la ligne créateur.
avatar-m	32px	Initiale d'un avis.
avatar-l	44px	Logo ou avatar de l'encart créateur.
step-dot	28px	Pastille d'étape (carte et timeline).
step-dot-active	34px	Pastille d'étape tapée, départ d'un parcours Premium sans abonnement.
marker	56px	Marqueur photo de la carte (liseré blanc de 3 px).
marker-active	68px	Marqueur de la card en tête du carrousel (liseré blue). Le parcours sélectionné n'a plus de marqueur : tooltip, tracé et étapes (E-04, D-071).
marker-border	3px	Liseré blanc du marqueur photo (D-071).
route-stroke	5px	Trait blue du tracé d'un parcours, sur un liseré blanc (D-071).
route-casing	9px	Liseré blanc sous le tracé : 2 px de chaque côté (D-071).
thumb	48px	Vignette de la tooltip.
tooltip-min-w	260px	Largeur minimale de la tooltip de la carte ; elle prend la largeur de son titre sur une ligne, 80 % de l'écran au plus (mappings.mapTooltip, D-041).
card-w	270px	Card de carrousel (hauteur 348).
card-h	348px	Hauteur de la card de carrousel.
card-list-w	358px	Card de liste « Voir tout » (hauteur 388, tag public en plus).
card-list-h	388px	Hauteur de la card de liste.
sheet-rest	120px	Partie visible de la sheet au repos, au-dessus de la barre d'onglets.
sheet-half-top	296px	Haut de la sheet à mi-hauteur, depuis le haut de l'écran (D-071).
sheet-empty-top	470px	Haut de la sheet « Aucun résultat » (E-01, D-071).
card-photo	150px	Hauteur de la photo de la card de carrousel (D-071).
card-list-photo	190px	Hauteur de la photo de la card de liste (D-071).
hero-h	380px	Photo de tête de la fiche.
icon-s	16px	Icône des lignes d'état et des pastilles (D-054).
icon-m	20px	Icône des chips (D-054).
icon-l	24px	Icône des onglets (D-054).

Ombre : shadow-tabbar 0 8px 24px rgba(20, 23, 31, 0.10), barre d'onglets blanche flottante, toast et mini-lecteur uniquement.

Iconographie

Phosphor 2 (phosphor-react-native), style Regular ; Fill pour l'onglet actif, le favori actif, la note, la couronne Premium, le sceau certifié, l'anecdote et les toasts ; Bold pour la coche et le plus. Un seul jeu : depuis le 24/09 (D-025), toutes les maquettes utilisent les tracés officiels, aucune icône n'est dessinée à la main. La liste complète, avec le poids et l'usage de chaque icône, est la planche « Icônes » du canevas Sortie (export) ; une icône qui n'y figure pas n'existe pas : l'ajouter à la planche et à mappings.uiIcons avant de l'utiliser. Le code utilise les noms de mappings.uiIcons, mappings.placeCategories et mappings.filterIcons.

Notes d'icône (mappings.uiIcons de tokens.json). Chaque valeur s'écrit nom ou nom (note, note) : le nom Phosphor en minuscules avec des tirets (calendar-check), les notes séparées par une virgule et une espace. Le générateur lit quatre notes : fill ou plein (icône pleine dans tous ses états), bold ou gras (trait épais), fill quand actif ou plein quand actif (pleine seulement quand le contrôle est actif : onglet, favori) et le nom d'un token de couleur (coral, amber, error-ink). Toute autre note est ignorée avec un avertissement dans la synchro : elle n'a aucun effet dans l'app. L'usage d'une icône (« sur une photo ») se décrit dans la planche ou dans la section de l'écran, pas dans la note.

• Une icône par valeur de filtre, sauf Budget et Durée (montants et heures en texte), à une exception : « Gratuit » prend tag, dans la chip rapide de l'accueil et le panneau de filtres (D-053). Publics : Solo user, Couple heart, Famille users, Entre amis users-three, Dog friendly paw-print, Kids friendly balloon. Transports : À pied person-simple-walk, Vélo bicycle, Métro subway, Voiture car. Ambiances : Culture bank, Nature tree, Shopping shopping-bag, Gastronomie fork-knife, Romantique flower-tulip, Insolite sparkle, Instagrammable camera, Détente armchair, Sportif barbell. Conditions : Sans réservation calendar-slash, Accessible PMR wheelchair, Intérieur house, Extérieur park, Beau temps sun, Jour de pluie cloud-rain.
• Culture, Nature, Shopping et Gastronomie reprennent l'icône et la teinte de leur famille.
• Extérieur prend un banc (park) : le soleil est réservé à la météo et à Beau temps (D-010).
• La couronne (Premium), le sceau (Vérifié) et l'étincelle (Insolite) ne se remplacent jamais l'une par l'autre.
• Tailles (D-054) : icon-s 16 px pour les lignes d'état et les pastilles, icon-m 20 px pour les chips, icon-l 24 px pour les onglets ; le composant Icon prend ces tokens, jamais l'échelle d'espacement.
• Premier lancement (D-060) : bell-slash en muted pour « Rappels désactivés » (reminders-off), chart-bar pour la ligne « Mesure d'audience » des Réglages (analytics), user dans un disque blanc pour le bouton connexion de l'accueil sans compte (sign-in), bell plein en blue-ink dans la sheet « Recevoir un rappel ? ».
• Réglages (D-062, E-19) : calendar-check, star et flag au trait pour les trois lignes de Notifications (notif-reminders, notif-next-day, notif-my-routes) ; bell-slash en ink dans l'encart « notifications coupées » (notifications-off) ; envelope-simple dans un disque blanc de 44 px pour l'adresse (email), envelope-simple-open en blue-ink pour l'attente de confirmation (email-sent) ; warning-circle plein en error-ink sous un champ en erreur (field-error) ; device-mobile de 16 px dans un disque surface de 28 px pour « Langue du téléphone » (phone-language).
• Réglages, planche 2 (D-063, E-19) : hand-palm pour la ligne Confidentialité (privacy-settings ; shield-check reste la politique, privacy) ; download-simple pour « Télécharger mes données » (export-data) ; circle-notch pendant la préparation (loading) ; caret-down et caret-up pour déplier une question fréquente (expand-step, collapse-step) ; file-text pour les conditions (legal), question pour l'aide (help).
• Logos d'Apple et de Google (D-062) : jamais redessinés ni remplacés par une icône Phosphor (apple-logo, google-logo sont exclus). Sur E-10, ils viennent des boutons des SDK ; ailleurs (E-19 › Connexion), l'image officielle : logo Apple blanc des ressources « Sign in with Apple » d'Apple dans un disque ink de 44 px, G de Google du kit Google dans un disque blanc.
• Drapeaux de langue (D-062, retour d'Ilan) : ronds, 28 px, liseré ink à 12 % ; fichiers SVG dans l'app, pas d'emoji (rendu différent d'un téléphone à l'autre) ; français : tricolore ; anglais : Union Jack. Ils accompagnent le nom de la langue, jamais seuls.
• Vérification (D-056) : seal-check au trait en green-ink pour la dernière vérification et « Sur le terrain » (last-check, field-work), jamais plein ; flag pour « Signaler ce parcours » (report-route), flag plein une fois signalé (route-reported).
• Chevrons et croix (D-053) : caret-right pour une ligne qui ouvre une page (uiIcons.open-row), caret-down et caret-up pour déplier et replier une étape (expand-step, collapse-step), x en gras pour retirer (remove : photo, ligne, filtre actif) comme pour fermer (close).
• Textes longs (D-063, textes légaux en écrans natifs) : grand titre 26/32 800 dans la page (la barre du haut n'a pas de titre au repos), date de mise à jour 13/18 muted, intertitres 17/22 800, texte 15/22 400 en ink, 22 px entre les blocs ; encart surface rayon 16 pour « L'essentiel ».
• Recette v0.2 (D-071) : star plein en amber pour la note (rating, au lieu de l'emprunt à must-see) ; la raison du classement de la card n'a pas d'icône (l'étincelle reste à Insolite, #222) ; un champ icon de tokens.json nomme une icône Phosphor, suivie de ses notes entre parenthèses, jamais une clé de uiIcons (reminderPermission.off : bell-slash (muted), #231).
• Traduction (D-076) : translate au trait devant la ligne « Traduit automatiquement de l'anglais » (translated), en muted, on-strong-muted sur E-07.
• Mise à jour obligatoire (E-20, D-063) : fond blue et non blue-on-strong, pour que le texte blanc passe 4,5:1 (4,51:1) ; bouton blanc, texte blue-ink.

Toast

Résultat d'une action (« Profil enregistré. », « Nouveau lien envoyé », « Enregistrement impossible »), jamais un état durable : hors connexion, chargement et erreurs de chargement restent des lignes d'état ou des blocs centrés (D-025). Pilule surface-strong à la largeur du texte, centrée, 358 px au plus ; titre 14/20 800 on-strong, sous-titre facultatif 13/18 500 on-strong-muted ; icône pleine de l'état dans une pastille toast-disc ; action éventuelle dans une pilule toast-action. En bas de l'écran, au-dessus de la barre d'onglets, du clavier ou d'une barre collée ; un seul à la fois ; ombre shadow-tabbar. Voir mappings.toast (planche composants).

État	Icône	Couleur	Rôle	Durée
Succès	check-circle plein	success-on-strong #4CC38A	status	4 s
Info	info plein	info-on-strong #8EA8F0	status	4 s
Attention	warning plein	amber #F5B301	alert	6 s
Erreur	warning-circle plein	error-on-strong #FF6B5A	alert	jusqu'à l'action ou au glissé

Contrastes des icônes sur surface-strong : 8,09:1, 7,69:1, 9,67:1, 6,40:1 (4,84:1 au plus bas, sur la pastille) ; texte on-strong 17,9:1, action 11,9:1.

Parcours en cours (page immersive)

E-07 (D-029) est la seule page sombre de l'app, sur le modèle de l'écran « En cours de lecture » d'une app de musique : une seule page qui défile. En haut, la photo de l'étape en plein cadre (600 px) sous un voile dégradé vers surface-strong, renforcé en haut, et un voile ancré au haut du texte, qui le suit quand le texte grandit (D-034) ; dessus, le statut (« En route vers l'étape 2 », « Étape 2 sur 4, vous y êtes »), le nom en 30/36 800 on-strong, la progression (un segment de 4 px par étape, on-strong sur blanc à 28 %, pastille de 12 px) et les commandes de 52 px, toujours dans cet ordre : « Itinéraire » à gauche en verre (toast-action), « J'y suis » à droite en blanc, texte ink. En faisant défiler, la photo se réduit dans un en-tête compact surface-strong et le contenu de l'étape suit en sections : cartes surface-strong-raised, radius-section (20), titres 17/22 800 on-strong, icônes, liens et numéros info-on-strong, « Ouvert » success-on-strong. Disques posés sur la photo : encre à 40 %, icône on-strong. Mini-lecteur : surface-strong, 64 px, radius-section, shadow-tabbar, au-dessus de la barre d'onglets sur tous les onglets. États (D-033) : alerte d'étape en alert sur alert-soft, rayon 16, au-dessus du titre, avec « Passer cette étape » souligné (lieu signalé ou bientôt fermé) ; étape passée à 45 % dans la progression et « Passée » dans la timeline ; pastille « Hors connexion » encre à 55 % sous la barre du haut ; toasts posés sur la sheet blanche, jamais sur la page sombre. Sheet « Signaler » (D-036) : grille de motifs façon Waze, disques surface de 72 px, icône pleine en couleur (décorative, le libellé porte le sens), libellé 14/18 600 ; précision choisie : anneau blue de 3 px et coche ; « Annuler » en surface, « Signaler » en blue. Détails : mappings.immersive et Ecrans › E-07.

Programmer et vos parcours

E-06 et E-08 (D-035). Sheet « Programmer la sortie » sur la fiche : jours en chips de 36 px (choisi en surface-strong avec une coche, comme une chip active), heure de départ dans une pilule surface avec deux disques blancs de 44 px (moins et plus, 15 min), ligne success (green-ink) quand tout sera ouvert, alerte alert sur alert-soft avec une heure suggérée soulignée quand un lieu sera fermé ; « À préparer » toujours avant le programme, cases de 24 px (contour control-border, cochée en blue avec une coche blanche en gras). Onglet « Parcours » : titre 30/36 800, segments dans une piste surface (hauteur 44, segment actif surface-strong en on-strong, 14/20 700), lignes avec photo de 64 px (radius-photo) ; petits boutons de 36 px : action attendue en blue (« Noter »), action secondaire en surface (« Relancer ») ; statuts en pastille de 24 px, 12/16 700 : Brouillon et Arrêté (surface, muted), En relecture (blue-soft, blue-ink), Publié (green-soft, green-ink), À corriger (alert-soft, alert), Privé (surface, ink, cadenas). Card de date de « Votre sortie » : surface, rayon 16, icône et « Changer » centrés verticalement. États (D-038) : Refusé en error-ink sur error-soft (x-circle plein), Retiré et Pas fait en surface, muted (eye-slash, calendar-slash) ; quand le titre d'une ligne est long, l'action passe sous le texte, alignée à droite (côté pouce, D-039) ; vides en bloc centré (disque surface de 56 px, titre 17/22 800, texte muted équilibré, bouton blue) ; sans compte, invitation pleine page comme le profil ; « Créer un parcours » toujours en blue, la création étant gratuite (le bouton annoncé Premium en surface-strong est retiré, D-073) ; alerte système à boutons empilés quand l'action ne tient pas sur une demi-largeur ; programme indisponible en bloc surface avec « Réessayer » aligné à droite ; hors connexion, bouton inactif skeleton et texte muted. Détails : mappings.planning et Ecrans › E-06.

Premium (E-17)

Page plein écran au fond blue, la seule de l'app (D-040, piste A retenue par Ilan parmi trois) : elle doit donner envie d'acheter. Le ruban du logo (ruban-widoo.svg, vectorisé depuis l'icône d'app) est posé en grand, encre à 16 %, en filigrane, décoratif (blanc à 16 % jusqu'à D-046 : le texte blanc dessus tombait à 3,40:1). Tout le texte est en blanc : 4,51:1 sur blue, juste au-dessus du seuil, 5,65:1 sur le ruban ; aucun voile clair sous du texte blanc sur cette page. Haut selon l'ouverture : photo du parcours avec un bord blanc de 4 px, inclinée de −3°, ou trois photos inclinées. Avantages dans des disques de verre (blanc à 16 %), couronne en amber. Trois formules sur le même plan (D-072) : carte choisie en bg et texte ink, les autres en encre à 22 % sur le bleu et texte blanc ; « Le plus avantageux » en pastille amber au texte ink (seul usage de l'ambre en fond, 9:1) ; « Idéal pour un séjour » du pass en pastille blue-soft au texte blue-ink. Bouton surface-strong à couronne dorée, comme tous les boutons Premium. Sur la fiche d'un parcours Premium (E-05, D-072), l'encart reste surface : l'achat du parcours seul y est un bouton blanc cerclé de control-border, en retrait du bouton encre de la barre, et le pass un lien blue-ink (mappings.premium.routeCard) ; le même encart revient dans « Votre sortie » quand l'abonnement ou le pass est fini (D-073). Pendant un pass, la section Premium des Réglages reprend la ligne de l'abonné (couronne amber, action en blue) ; « Parcours débloqués » a l'icône lock-open. L'alerte de fin de pass dans « Programmer » est l'alerte ambre de l'étape qui se termine (sablier hourglass-medium), avec un bouton blanc cerclé de control-border. États de l'achat (D-044) : anneau blanc dans le bouton encre pendant l'achat, le reste de la page inactif ; hors connexion, bouton skeleton au texte muted et ligne blanche à icône wifi-slash ; résultats en toasts (mappings.toast) posés au-dessus de la barre du bas ; mêmes états pour les quatre formules, et les textes disent ce qu'on achète : « Hors connexion : reconnectez-vous pour acheter. », « Aucun pass ni abonnement Widoo sur ce compte App Store. » (D-074). Sur le site, un parcours Premium partagé porte la même pastille sur sa photo, et ses étapes verrouillées ne montrent que leur catégorie et un cadenas (D-074). Détails : mappings.premium (dont states) et Ecrans › E-17.

Mouvement

Validé le 24 septembre 2026 (D-030), barre d'onglets le 25 (D-042), à ajuster sur appareil selon le ressenti. Sobre et natif, identique sur iOS et Android : de 200 à 350 ms, sans rebond sauf la barre d'onglets (M-13) ; un geste suit le doigt et finit sa course selon sa vitesse ; le réglage système « Réduire les animations » est respecté partout. Valeurs : mappings.motion. Planches : principes, catalogue 1, catalogue 2, écran par écran, barre d'onglets ; sur le canevas Sortie et compte, page « Mouvement », les exemples tournent en boucle.

Durée	Valeur	Pour
press	100 ms	Retour d'appui : boutons pleins assombris (voile ink à 8 %), cards et disques à 97 %, liens et icônes à 60 % d'opacité ; relâché en 200 ms.
fade	200 ms	Fondus : changement d'état, fondu enchaîné, tooltip, arrivée d'un contenu chargé, sortie d'un toast.
base	300 ms	Déplacement lancé par l'app (sheet, étape dépliée), entrée d'un toast, fermeture d'une modale, retour d'une page.
page	350 ms	Page poussée, modale qui monte, card vers fiche, mini-lecteur (valeur d'iOS, par défaut dans React Navigation).
map	500 ms	Recadrage de la caméra de la carte.
shimmer	1 200 ms	Balayage des squelettes, en boucle. Rien ne s'affiche pour un chargement de moins de 300 ms.

Courbes : standard cubic-bezier(0.2, 0, 0, 1) pour tout ce qui entre à l'écran ou s'y déplace ; exit cubic-bezier(0.3, 0, 1, 1) pour ce qui quitte l'écran (modale qui descend, sheet qui se ferme) ; linear pour les boucles. À la fin d'un geste : ressort sans dépassement (damping 500, stiffness 1000, mass 3), celui de @gorhom/bottom-sheet sur iOS, appliqué aussi à Android. Barre d'onglets : ressort à léger rebond (stiffness 380, damping 28, mass 1 : environ 4 % de dépassement, posé en 350 ms environ), le seul ressort qui dépasse (D-042).

Modèle	Où	Règle
M-01 Card vers fiche	E-01, E-04, E-09, E-16 vers E-05	La photo de la card grandit jusqu'à la photo de la fiche (coins de 12 à 0), la fiche apparaît en fondu dessous ; page à l'ouverture, base au retour. Glisser vers le bas pour fermer. Sans card visible (liste défilée, tooltip, lien, notification) : M-02.
M-02 Modale qui monte	E-05 sans card, E-06, E-07, éditeur	Monte du bas, onglets compris (page, standard) ; redescend (base, exit). Glisser vers le bas pour fermer, sur les deux systèmes.
M-03 Page poussée	« Voir tout », Réglages, Modifier le profil, E-16, carte de E-07	Arrive de la droite, la page quittée recule d'un tiers sous un voile ink à 10 % (page) ; retour inverse (base). Geste depuis le bord gauche ; sur Android, geste et bouton retour du système. Barre d'onglets fixe.
M-04 Sheet à crans	E-01, E-04, E-02, E-07	Suit le doigt, se cale sur le cran le plus proche dans le sens du geste (ressort) ; déplacée par l'app : base. Vibration de sélection à chaque cran atteint au doigt.
M-05 Sheet modale et voile	E-03, tri, E-10, Créateur certifié, anecdotes, E-17	Voile de 0 à 40 %, sheet qui monte (page) ; fermeture base exit, par glissé ou sur le voile. Étape suivante dans la sheet : fondu enchaîné et hauteur base. Posée sur le clavier, elle suit le clavier.
M-06 Toast	Tous les résultats d'action	Monte de 16 px en fondu (base) ; reste 4 s, 6 s ou jusqu'à l'action ; s'efface sur place (fade) ; glisser vers le bas pour le chasser.
M-07 Carte	E-01, E-02, E-04	Caméra map (Mapbox easeTo) ; tooltip en fondu depuis son ancre, tracé et étapes en fondu, résumé en fondu enchaîné (fade). Sur le canevas, le recadrage est simulé par un fondu.
M-08 Changements d'état	Chips, étapes de E-05, sheet de E-04, E-07, E-10, E-15	Couleurs et coches en fondu (fade) ; hauteurs base avec contenu en fondu, chevron qui tourne ; contenu remplacé en fondu enchaîné, sans glisser.
M-09 Chargement	E-01, E-04, E-05, E-09, E-16	Squelettes gris chaud à balayage shimmer ; contenu en fondu (fade) ; anneau pour un bouton en calcul et le défilement infini.
M-10 Défilement	E-05, E-07	Lié au doigt : photo à demi-vitesse ; barre blanche (E-05) ou en-tête compact (E-07) en fondu sur 48 px de défilement.
M-11 Mini-lecteur	E-07, tous les onglets	La page descend et s'efface vers la barre d'onglets, le mini-lecteur est déjà dessous ; réouverture en remontant (page).
M-12 Actions clés	Favori, note, J'y suis	Cœur plein avec léger rebond (1,2 en 300 ms) ; étoiles en cascade (50 ms) et libellé en fondu ; J'y suis à 97 % pendant l'appui puis statut en fondu enchaîné.
M-13 Barre d'onglets	Barre d'onglets, sur tous les onglets	La pastille encre glisse jusqu'à l'onglet choisi et prend sa largeur, les autres onglets s'élargissent ou se resserrent avec elle (ressort springTabBar) ; l'ancien libellé s'efface (100 ms, exit) ; le nouveau se déroule depuis l'icône 80 ms après le départ (fade, standard, glissement de 6 px) ; icône en fondu enchaîné (fade), du trait ink au plein blue-on-strong. Le contenu de l'onglet change sans animation ; appui sur l'onglet actif sans effet ; un nouvel appui en cours de trajet change la cible sans saut ; pas de vibration (D-042).

Retour tactile	iOS (expo-haptics)	Android (performAndroidHapticsAsync)
Favori ajouté	impactAsync(Light)	Toggle_On
J'y suis	impactAsync(Medium)	Confirm
Chaque étoile de la note, cran de sheet atteint au doigt	selectionAsync()	Clock_Tick
Toast de succès	notificationAsync(Success)	Confirm
Toast d'erreur	notificationAsync(Error)	Reject

Rien d'autre ne vibre (ni onglets, ni chips, ni défilement, ni ouverture de page) ; sur iOS, rien ne vibre en mode économie d'énergie.

• Réduire les animations : déplacements remplacés par un fondu fade sur place ; demi-vitesse, balayage, rebonds et cascades supprimés ; caméra sans animation ; barre d'onglets : largeurs sans mouvement, pastille en fondu fade sur le nouvel onglet ; un geste suit toujours le doigt, sans ressort à la fin ; vibrations conservées. Reanimated saute à la fin quand le réglage est actif (ReduceMotion.System) : les fondus de remplacement sont en ReduceMotion.Never.
• Règles générales : changement d'onglet : seule la barre bouge (M-13), le contenu change sans animation et le mini-lecteur reste en place ; ce qui est posé sur le clavier suit son animation ; alertes et fenêtres du système (Apple, Google, partage) gardent leurs animations ; rien au-delà de 500 ms, sauf les boucles de chargement.
• Pour le code : pages poussées en native stack d'expo-router avec animation: 'ios_from_right' sur Android (iOS garde son animation par défaut, la même) ; modales en slide_from_bottom sur les deux systèmes, le glisser vers le bas codé avec react-native-gesture-handler et Reanimated (le native stack ne le propose que sur iOS) ; card vers fiche faite à la main (mesurer la photo, l'animer dans une couche au-dessus de tout, ouvrir la fiche sans animation dessous), car les transitions partagées de Reanimated sont expérimentales ; animationConfigs explicite et identique sur les deux systèmes pour @gorhom/bottom-sheet, qui anime par défaut en ressort sur iOS et en 250 ms sur Android ; barre d'onglets en Reanimated sur le fil d'interface (withSpring pour la position et la largeur de la pastille, withTiming pour le libellé et l'icône).

Ton et rédaction

Moderne, accessible, chaleureux, lifestyle, urbain, premium sans être luxueux, visuel sans être décoratif. Éditorial et émotionnel dans la présentation des parcours : photos grandes, titres qui donnent envie, descriptions qui racontent.

• On vouvoie (décision d'Ilan, 2026-09-23) : « Élargissez la zone », « Débloquez les 3 autres étapes », « Connectez-vous pour enregistrer ce parcours ».
• Phrases courtes, verbes d'action. Une erreur dit ce qui s'est passé et quoi faire, sans s'excuser.
• Pas de point médian « · » en interface, sauf dans la ligne « ambiance · quartier » des cards et de la fiche. Ailleurs : retour à la ligne, parenthèses, valeur alignée à droite.
• Formats : heures 10:00 ; durées « 7 h », « 2 h 30 », « 45 min » ; distances « 1,1 km » ; budget « ≈ 25 € » avec « par pers. » en petit, jamais « env. » : somme arrondie à 5 €, « ≈ 5 € » pour un petit montant, « Gratuit » si elle est nulle ; lecteur d'écran « environ 25 euros par personne » (D-032).
• Pas de nom d'écran ou de rubrique seul dans une phrase : « vos parcours passés », jamais « Passés » (D-033).
• Widoo trouve des zones et des parcours, jamais une adresse ni un lieu isolé : « Rechercher une zone ou un parcours ».

Interdits

Look agence de voyage, guide touristique institutionnel, application de randonnée, réseau social générique, SaaS ou dashboard (pour l'app mobile ; l'admin web peut être sobre et fonctionnel). Pas de dégradé dans l'interface (hors voile de lisibilité sur photo), pas d'illustration générique, pas d'emoji comme icône.

Carte

Style Mapbox personnalisé aux couleurs map-* : fond clair désaturé, eau et parcs doux, voirie blanche, noms de quartiers en capitales map-label, aucun POI tiers. Marqueurs photo de 56 px à coins 18, liseré blanc de 3 px (marker-border), avec étiquette de durée ; la card en tête du carrousel est signalée par son marqueur agrandi à 68 px, liseré blue (marker-active). Au tap, le marqueur du parcours disparaît au profit de la tooltip encre, à la largeur de son titre, de 260 px à 80 % de l'écran (D-041), du tracé blue de 5 px sur un liseré blanc de 9 px (route-stroke, route-casing) et des pastilles d'étape par famille (D-004) ; les marqueurs des autres parcours sont masqués pendant la sélection (D-071, #166, #230). Noms de quartiers en Plus Jakarta Sans 800, capitales, map-label : la police est téléversée dans le compte Mapbox (D-071, #167).

Position approximative (D-061) : zone blue à 12 % bordée de blue plein (1,5 px, 3,92:1 sur le fond de carte) à la place du point de position ; le bord à 45 % d'une première version tombait à 1,91:1.

Thème sombre (proposition, non validé)

Le MVP est livré en clair. Les valeurs dark de tokens.json sont dérivées des mêmes rôles pour préparer l'après-MVP ; aucune maquette ne les utilise et elles seront revues sur planche avant tout usage. Mêmes rôles, pas d'inversion ; familles d'activité et ambre inchangés ; contrastes texte ≥ 4,5:1 vérifiés sur bg et surface sombres.

Token	Clair	Sombre (proposition)
bg	#FFFFFF	#111318
surface	#F6F5F1	#1B1D23
surface-strong	#14171F	#2C3039
ink	#14171F	#F2F1ED
muted	#5F6B80	#A1A9B8
on-strong-muted	#D5D8E0	#C9CDD6
line	#ECEBE7	#2A2D34
handle	#D9DCE3	#3B3F49
skeleton	#E8E7E2	#2A2C32
rail	#D0D4DC	#454A55
control-border	#7F8A9C	#8E97A8
control-border-disabled	#C3C8D3	#4B505B
scrim	rgba(20, 23, 31, 0.40)	rgba(0, 0, 0, 0.55)
blue	#4E74C8	#7C9BE0
on-blue	#FFFFFF	#0F1115
blue-on-strong	#5A7FCF	#8FA9E3
blue-ink	#3A4FA8	#A9BEEE
blue-soft	#E4ECFA	#25324F
badge-signature-bg	rgba(228, 236, 250, 0.86)	rgba(37, 50, 79, 0.94)
green-soft	#E3F3EC	#17362B
green-ink	#1F6B52	#8FD9BD
badge-verified-bg	rgba(227, 243, 236, 0.86)	rgba(23, 54, 43, 0.86)
coral	#F2592A	#FF7A4D
coral-soft	#FFE4D9	#3B2218
coral-ink	#A63D12	#FFB08F
alert	#8C5A00	#F2C14E
alert-soft	#FFF4D6	#3A2E10
plum-soft	#F3E4EC	#3A1F2B
plum-ink	#7A2A4A	#E8A9C2
violet-soft	#ECE7F8	#2C2648
violet-ink	#5A3FA8	#C5B8F0
mood-romantic	#D0405F	#E0607A
mood-unusual	#9A3FC0	#B77EE0
mood-instagrammable	#BC3797	#D867B4
mood-relax	#1F87B5	#4FA7D6
mood-sport	#5E8F12	#86B93A
badge-premium-bg	rgba(20, 23, 31, 0.86)	rgba(44, 48, 57, 0.92)
map-base	#F0EFEC	#1A1D22
map-road	#FFFFFF	#2A2E36
map-park	#E2ECDF	#1E2A23
map-water	#C9DCEF	#1B2A3B
map-block	#E8E6E0	#22252B
map-label	#5F6B80	#A1A9B8

Accessibilité — règles pour le code

Validées par Ilan le 2026-09-23 avec la planche « Contrôle accessibilité » (ticket #79). Elles s'appliquent à tout écran mobile ; le tableau des contrastes et des libellés de référence est sur le canevas Claude Design Découverte (page Composants) et dans design/composants ; celui de la recherche et des filtres dans design/composants (ticket #70) ; celui de la fiche parcours dans design/composants (ticket #71) ; celui du profil et de la connexion dans design/composants (ticket #72) ; celui du parcours en cours et de la fin de parcours dans design/composants (ticket #74, D-034) ; celui de l'éditeur de parcours dans design/composants (ticket #76, D-051).

Taille de texte (Dynamic Type, fontScale)

• Tout texte suit le réglage système (allowFontScaling, valeur par défaut). Aucune hauteur fixe sur un composant qui contient du texte : cards, boutons, bandeaux, lignes de liste prennent la hauteur de leur contenu ; un carrousel aligne ses cards sur la plus haute ; les tags passent sur deux rangées.
• Pas d'interligne fixe sur Android (D-043) : l'interligne des styles de texte (lineHeight de tokens.json, tableau de Typographie) s'applique sur iOS seulement ; sur Android, le texte garde l'interligne de la police. Raison : Android 14 agrandit les grands textes de façon non linéaire, un lineHeight fixé grandit moins vite que la police et rogne les jambages à 150 % (« g » de « configuration », reproduit sur API 34). La règle est posée une fois, dans le composant Text du design system ; aucun écran ne fixe d'interligne. Conséquence acceptée : à 100 %, le rythme vertical d'Android peut différer de quelques pixels des maquettes, ce que la règle « aucune hauteur fixe » absorbe. Écartés : un interligne fixe sur les deux plateformes (jambages rognés) ; un interligne recalculé selon fontScale (il faudrait reproduire la courbe d'Android, fragile d'une version à l'autre, et ce serait un branchement sur fontScale de plus) ; supprimer l'interligne partout (iOS perdrait le rythme des maquettes, sans problème à corriger).
• Plafond maxFontSizeMultiplier={1.3} sur les composants denses, posé dans les composants de base du design system : chips, barre d'onglets, étiquettes de marqueurs, compteur de filtres (reste rond, 26 px max), pilule de tri, pastilles sur photo (note, favori, Vérifié, Signature, Premium, Privé, compteur de photos), tuiles d'infos et barre collée de la fiche parcours, barre du haut des pages secondaires (Modifier le profil, Réglages, Supprimer mon compte : titre centré sur deux lignes au besoin), toast entier, titre, sous-titre et action (D-046), bouton « Continuer avec un e-mail » (D-028), barre du haut et en-tête compact de E-07, mini-lecteur (nom sur une ligne, nom complet dans son libellé), tuiles et barre collée de E-15 (D-034), segments de l'onglet Parcours, pastilles de statut, petits boutons de 36 px, barres collées de la sheet Programmer et de « Votre sortie » (D-039), barre du haut et étapes de l'assistant de création (la barre garde 52 px, les étapes gagnent 5 px), étiquettes de trajet de la carte de l'éditeur, pastille « Couverture », idées à toucher de « À prévoir », pastille « Suggéré » (D-051). Fond de carte, noms de quartiers et numéros des pastilles d'étape ne suivent pas la taille du texte (D-051).
• Trois reflows seulement, à partir de PixelRatio.getFontScale() >= 1.3 (hook useFontScale()) : la tooltip de la carte se réduit au nom du parcours et à la note ; le résumé de parcours, compact à toutes les tailles (titre, note et « Voir le parcours », le reste sous le pli, D-089), ajoute sous son pli l'étape que la tooltip ne montre plus ; la bulle d'un lieu sur la carte de l'éditeur (E-12) se réduit à la photo, au nom, à la catégorie et à « Ajouter au parcours », horaires et réglages proposés restant sur la page « Nouvelle étape » (choix d'Ilan, D-051). Rien d'autre ne branche sur fontScale.
• Objectif de recette (D-046) : le plus grand réglage standard (iOS xxxLarge, fontScale 1,353 dans React Native ; Android jusqu'à 200 %, non linéaire depuis Android 14), sans troncature d'un texte essentiel (titre, prix, durée, distance, étape, messages d'état). Les maquettes « texte agrandi » simulent ×1,353 ; les planches « texte à 150 % » validées avant D-046 grossissaient tout le texte de 1,5 ; elles ont été reprises à cette règle le 25 septembre (D-047). Les tailles Accessibilité, plus grandes, suivent les mêmes règles sans maquette dédiée.
• Titres plafonnés à 1,2 (D-046, choix d'Ilan) : maxFontSizeMultiplier={1.2} sur les styles de 22 px et plus (titres de page, titres de section de 22 px et plus, grands chiffres), comme iOS et Android 14 le font d'eux-mêmes (un grand titre gagne environ 18 %, le texte courant 35 %) ; le texte courant et les petits textes suivent le réglage.
• Page qui défile sous une barre collée (D-046) : le contenu coupé passe sous un fondu de 32 px de la couleur du fond, et le premier écran laisse dépasser le haut du bloc suivant, pour qu'on voie que la page défile ; en texte agrandi, la barre ne garde que l'essentiel (E-17 : ligne d'essai et bouton, liens en fin de page). Le placeholder de recherche peut se raccourcir en « Qu'est-ce qu'on fait ? » sur l'accueil et en « Zone ou parcours » dans la recherche (E-02).
• Deux actions côte à côte (« Réinitialiser » + bouton principal du panneau de filtres) : rangée en flexWrap: 'wrap-reverse', bouton flexBasis: 220 ; à grande taille le bouton passe au-dessus en pleine largeur, sans branche sur fontScale (ce n'est pas un reflow au sens de la règle ci-dessus). Test : Réglages › Accessibilité › Taille du texte, curseur au maximum, avec et sans « Tailles plus grandes ».
• Bouton « libellé · prix » (« Débloquer ce parcours · 1,99 € », D-074) : quand il ne tient plus sur une ligne, le prix passe sous le libellé, centré, sans le point ; le bouton prend la hauteur de son contenu (48 px au moins). Vaut pour l'encart de la fiche, l'alerte de fin du pass et « Votre sortie ».
• Deux actions de même poids (« Enregistrer en privé » et « Soumettre » de l'aperçu, E-14) : rangée en flexWrap: 'wrap-reverse', chaque bouton flex: 1 et au moins à la largeur de son libellé ; côte à côte à 100 %, l'action principale passe au-dessus en pleine largeur quand elles ne tiennent plus (choix d'Ilan, D-051).
• Texte posé sur une photo (E-07) : le bloc grandit vers le haut sur la photo, qui ne change pas, et un voile ancré au haut du bloc le suit (mappings.immersive.textVeil). « Itinéraire » et « J'y suis » : largeur selon le contenu, rangée en flexWrap: 'wrap-reverse' ; côte à côte en texte agrandi, J'y suis passe au-dessus quand ils ne tiennent plus (D-034).
• Ligne libellé et valeur (Réglages) : rangée en flexWrap, la valeur passe sous le libellé quand la place manque ; une adresse e-mail n'est jamais coupée (D-028). Même règle pour un titre de section et sa valeur à droite (« 1 sur 2 », « Départ 10:00, fin vers 17:00 ») et pour « Réserver » (base 260) et « Changer » (base 240) (D-039).
• Deux liens d'action centrés sur une ligne (« Renvoyer dans 30 s » et « Annuler » de l'attente de confirmation, E-19, D-064, choix d'Ilan) : rangée en flexWrap, centrée, columnGap 120 ; quand ils ne tiennent plus, ils passent l'un sous l'autre, centrés, 44 px chacun.
• Marque au-dessus d'un texte qui grandit (W de E-20, D-064) : le décor ne bouge que si le texte arrive à moins de 24 px de lui, et jamais sous les icônes de la barre d'état.
• Actions côté pouce (règle d'Ilan, D-039) : une action qui passe à la ligne s'aligne à droite, jamais à gauche : action d'une ligne à titre long, « Réserver », « Changer », « Réessayer », « Partir à 14:00 ». Les écrans validés avant D-039 gardent leur alignement tant qu'ils ne sont pas repris (« Passer cette étape » de E-07).
• Sheet plus haute que l'écran : maxHeight jusque sous la barre d'état, contenu dans un ScrollView, bouton d'action collé en bas avec un filet (sheet Créateur certifié, D-028). Une sheet posée sur le clavier grandit vers le haut.
• Boutons Apple et Google : composants des SDK (AppleAuthenticationButton, bouton du kit Google), texte à taille fixe, hors de notre contrôle ; à vérifier sur appareil au plus grand réglage.

Contrastes

• Texte ≥ 4,5:1, composants et icônes porteuses de sens ≥ 3:1 (WCAG 2.2). Sur gris chaud #F6F5F1, un lien ou un texte bleu utilise le bleu encre #3A4FA8, jamais #4E74C8 (4,1:1). Contour d'un contrôle non coché : #7F8A9C. Alerte (lieu signalé) : ambre foncé #8C5A00 (5,87:1 sur blanc, 5,36:1 sur ambre pâle #FFF4D6), jamais l'ambre #F5B301 en texte (1,85:1). Signature (parcours de l'équipe Widoo) : pastille bleu encre #3A4FA8 sur bleu pâle #E4ECFA (6,17:1), plus de corail. Premium : pastille encre à 86 % avec « Premium » en blanc et couronne dorée #F5B301 (l'or seulement en icône, jamais en texte) ; bouton « Débloquer avec Premium » encre ; couronne distincte du sceau de Vérifié et de l'étincelle d'Insolite.
• Texte posé sur une photo : contrôlé au pire cas, photo remplacée par du blanc sous les voiles (4,5:1, 3:1 en grand texte). E-07 : voile du haut renforcé pour la barre du haut, voile ancré au haut du texte, photo assombrie jusqu'à 65 % pendant le défilement (D-034, mappings.immersive).
• Décoratifs, hors exigence : étoile jaune (la note est le chiffre), poignée de sheet, filets, squelettes, pointillés de la tuile « Ajouter » (le « + » et le mot en blue-ink portent le sens).
• Champs : fond blanc et filet line, reconnus par leur libellé au-dessus (E-09, E-10, éditeur) ; si un audit demande 3:1 sur le contour, passer le filet en control-border (#7F8A9C, 3,49:1) dans le composant champ, partout (D-051).
• Jamais d'information portée par la couleur seule : chip active = fond encre + coche ; étape = couleur + icône de catégorie ; favori = cœur plein ; Vérifié et Signature = pastille avec texte ; note d'un avis = étoile + chiffre (« ★ 5 »), jamais des étoiles seules ; note à donner (E-15) = étoiles pleines face à des étoiles en contour #7F8A9C (3,49:1), avec le libellé de la note (D-034).
• Jamais d'opacité sur un texte : un compteur ou un texte secondaire prend une couleur pleine contrôlée (le compteur des chips d'ambiance à 80 % tombait à 3,69:1, D-028) ; seule exception, le crédit d'une photo libre, volontairement discret (D-052). Interrupteur : piste active #4E74C8 (4,51:1), inactive #7F8A9C (3,49:1), pastille blanche.

Lecteur d'écran (VoiceOver, TalkBack)

• Chaque contrôle a un libellé (accessibilityLabel) et un rôle (accessibilityRole) ; une icône seule est libellée, une icône décorative est masquée (accessibilityElementsHidden, importantForAccessibility="no"). États annoncés par accessibilityState (selected, checked, disabled, busy).
• Une card est un seul élément accessible qui lit titre, ambiance, quartier, créateur, note, badges, prix, durée, distance et, avec le tri Recommandé, la raison du classement (D-071), avec les actions « Ajouter aux favoris » et « Voir le profil du créateur » (accessibilityActions).
• Messages d'état et chargements annoncés (accessibilityLiveRegion="polite" sur Android, AccessibilityInfo.announceForAccessibility sur iOS) ; la sheet est un élément adjustable dont les crans se changent au balayage vertical ; la tooltip est un dialogue qui reçoit le focus et se ferme par le geste d'échappement.
• Zones tactiles ≥ 44 px : hitSlop sur les chips de 36 px et les petites pastilles.
• Réordonner (anecdotes, à la une) : glisser après un appui long, et actions « Monter » et « Descendre » (accessibilityActions) avec annonce de la nouvelle position ; interrupteur : rôle switch, toute la ligne touchable ; sheet sans croix : geste d'échappement sur iOS (onAccessibilityEscape), retour sur Android ; toasts : succès et info annoncés sans déplacer le focus, erreur annoncée en priorité avec son action atteignable (D-028).
• Chaque geste a son équivalent d'un toucher (WCAG 2.5.7, D-051) : réordonner les étapes, « Monter » et « Descendre » du menu de l'étape ; glisser pour retirer, « Retirer du parcours » du même menu ; ordre des photos (E-11, « En images » de E-12), toucher une photo ouvre « En faire la couverture » (« Mettre en premier » dans En images), « Déplacer à gauche », « Déplacer à droite », « Retirer » ; épingle d'un nouveau lieu (E-13), toucher un point de la carte y pose l'épingle, l'adresse choisie la pose déjà. Mêmes actions au lecteur d'écran (accessibilityActions).
• Toast avec « Annuler » (étape ajoutée ou retirée, ordre changé) : 6 s au lieu de 4 ; au lecteur d'écran, « Annuler » est atteignable au balayage et le toast reste tant que le focus est dessus (D-051).
• Parcours en cours (E-07, D-034) : statut et nom lus en un seul en-tête ; « Vous semblez être sur place » annoncé une fois par étape, sans déplacer le focus ; alerte d'étape annoncée à l'apparition (accessibilityRole="alert") ; sheet « Le parcours » ajustable, actions « Agrandir » et « Réduire » ; ordre de lecture des commandes inchangé quand elles s'empilent ; chaque geste a son bouton (Réduire, retour de la carte, « Découvrir l'étape »).
• Ordre de lecture : barre du haut, recherche, chips, carte (marqueurs dans l'ordre du carrousel), sheet, barre d'onglets ; la barre d'état iOS est ignorée.

Logo

Logo « W » validé (logo.png), déclinaison horizontale « widoo » avec pictogramme. Il n'apparaît pas dans l'interface (plus d'en-tête logo, D-003), sauf comme avatar des parcours de l'équipe (« Par Widoo ») et sur l'icône d'app, à produire en 1024 px sans transparence.

Fichier source (logo-widoo.svg, fourni par Ilan le 2026-09-28, D-060) : carré #5A7FCF (blue-on-strong) arrondi à 218 sur 1096 ; W en un seul tracé de 126 px à bouts ronds, dégradé #FAF9F6 → #BFD7EA du haut à gauche vers le bas à droite, ombre portée légère (8,7 px en bas à droite, flou 13, noir à 12 %) ; les deux branches du W sortent largement du carré, qui les coupe. Toute reprise du logo part de ce fichier, jamais d'un tracé redessiné (retour d'Ilan : le ruban redessiné pour l'écran de lancement a été écarté). À l'export, retirer shape-rendering="crispEdges" du tracé. Icône d'app et écran de lancement : Ecrans › E-18 (mappings.firstLaunch de tokens.json).

Avatar « Par Widoo » (D-071, #168) : avatar-widoo.svg, le fichier source découpé en disque (fond blue-on-strong #5A7FCF, W en dégradé #FAF9F6 → #BFD7EA), sans ombre portée (invisible à ces tailles) ni crispEdges ; un seul fichier, mis à l'échelle à avatar-s (22 px : card, résumé, liste) et avatar-l (44 px : encart créateur). Le libellé d'accessibilité reste « Par Widoo » (planche).

Références de ton (non de copie)

Google Maps pour la mécanique carte + bottom sheet ; Airbnb Expériences pour la présentation éditoriale ; Citymapper pour la lisibilité d'un trajet en étapes.