Design système · version 1.0
Principes, jetons, composants d’interface et de jeu, motifs d’expérience, écrans types, microcopie et accessibilité. Chaque élément applique la charte « une couleur, un seul sens » définie par l’identité visuelle.
Quand un cas n’est pas prévu par le design système, ces principes tranchent. Ils passent avant l’esthétique.
Voir aussiLa boussole de la directionLes décisions
Les briques sont rationnées, mais une tentative ratée ne consomme ni exemplaire ni énergie. Seule une découverte utilise un exemplaire de chaque brique, et l’interface le montre toujours.
→ Pas de confirmation pour « Vider ». Compteur « ×n » toujours visible, « −1 » après une découverte.
Un seul bouton Corail visible à la fois. Le joueur sait toujours ce qu’il peut faire ensuite.
→ Table : Fusionner. Plis : Ouvrir. Carte agrandie : Voir les formes.
L’interface reste neutre (Papier, Crème, Encre) pour que les briques et les mots découverts concentrent la couleur et l’attention.
→ Aucun décor coloré derrière une brique.
Le mot d’abord, sa définition ensuite, l’étymologie détaillée à la demande. Jamais de mur de texte avant le plaisir.
→ Révélation en 3 temps, détails au verso de la carte.
Les chances des plis sont affichées, le temps de recharge aussi. Pas de fausse urgence, pas de culpabilisation.
→ Pas de compte à rebours clignotant, pas de « Dernière chance ».
Contrastes, cibles tactiles, clavier, lecteurs d’écran et animations réduites sont prévus dès le premier composant, pas ajoutés après.
→ Chaque composant ci-dessous liste son comportement accessible.
Toutes les valeurs du produit viennent de ces jetons. Aucune couleur, taille ou durée n’est écrite en dur dans un composant. Cliquez une couleur pour copier sa variable CSS.
En situationIdentité visuelle : règles et usagesRègles élémentaires
Trois familles : les neutres (structure), les couleurs de ressource (ce qu’est une chose, en Base, Teinte et Profond) et l’action (ce que l’on peut faire). Les règles d’usage sont détaillées dans la charte de l’identité visuelle.
En situationTypographie : rôles et écritures
Quatre familles, chacune avec un rôle unique : la serif pour les mots et les titres, la sans pour l’interface, la mono pour les métadonnées, la cursive uniquement pour les brouillons du rituel des plis. Tailles en rem, base 16 px, respectant le zoom du système.
Échelle en 9 pas. Les marges internes des composants utilisent 8 à 24 ; les écarts entre sections 48 à 80.
Rayon selon la nature : petite brique 6, brique 10, carte et panneau 14, carte agrandie 22, pastille 999. Bordures 1 (séparateur), 1,5 (composant), 2 (carte agrandie, pli).
Quatre niveaux d’élévation. Les trois premiers utilisent des ombres dures (sans flou) ; seul le niveau superposition utilise une ombre floue. Chaque plan a un z-index réservé.
| Plan | Jeton | Valeur | Utilisé pour |
|---|---|---|---|
| Base | --z-base | 0 | contenu de la page |
| Soulevé | --z-raised | 10 | brique en cours de glissement, info-bulle |
| Collant | --z-sticky | 60 | barre d’en-tête, barre d’onglets |
| Notification | --z-toast | 80 | toasts |
| Voile | --z-overlay | 90 | fond flouté derrière une superposition |
| Modal | --z-modal | 100 | dialogue, feuille, carte agrandie |
En situationDémonstrations de mouvementLe rituel d’ouverture
Cinq durées et trois courbes. Le mouvement confirme une action, jamais ne la retarde : aucune interaction ne doit attendre la fin d’une animation. Cliquez pour rejouer.
| Courbe | Jeton | Valeur | Usage |
|---|---|---|---|
| Sortie douce | --ease-out | cubic-bezier(.16, 1, .3, 1) | entrées, déplacements, apparitions |
| Ressort | --ease-spring | cubic-bezier(.34, 1.56, .64, 1) | briques, pop de découverte, boutons |
| Accélération | --ease-in | cubic-bezier(.5, 0, .75, 0) | sorties et fermetures uniquement |
Animations réduites (réglage système ou réglage du jeu) : les déplacements deviennent des fondus de 120 ms, le rituel des plis affiche directement le résultat, les éléments en boucle s’arrêtent. Essayez le bouton en haut de page.
En situationADR 0001 : PWA mobile d’abord
Conception mobile d’abord. Largeur de contenu maximale 1 320 px. Les marges respectent les zones sûres des téléphones (env(safe-area-inset-*)).
Icônes au trait de 1,75 px sur une grille de 24, extrémités et angles arrondis, couleur currentColor. Taille 20 dans l’interface, 16 dans le texte, 24 dans la barre d’onglets. Une icône seule a toujours un libellé accessible ; une icône n’est jamais colorée d’une couleur de ressource. Posée sur une surface colorée (bouton Corail, bandeau, brique), l’icône est ton sur ton : la teinte profonde de la surface sur un fond clair, une teinte plus claire sur un fond sombre. Jamais d’Ambre sur Corail, ni de contour Encre autour d’une icône posée sur une couleur vive : son contour, s’il existe, est de la teinte profonde.
Les briques élémentaires de l’interface, hors jeu. Chaque composant indique ses variantes, ses états et son comportement accessible.
En situationFusionner et Vider sur la table
--c-danger), texte Crème, icône octogone, pour l’action irréversible qui confirme (effacer, réinitialiser). Toujours précédé d’une confirmation, jamais deux par écran.Petit (32) réservé aux contextes souris et aux zones denses, toujours avec une zone tactile de 44. Chargement : texte masqué, indicateur rotatif, largeur conservée, aria-busy="true".
Libellé toujours visible (jamais seulement un texte d’exemple). Erreur signalée par un texte et une barre Gris encre, jamais par du rouge. Hauteur 48, texte 15 minimum pour éviter le zoom automatique sur mobile.
Choix unique, aria-pressed. Pastille de couleur = couleur du type, toujours avec un libellé et un compteur.
2 à 4 options courtes, pour un tri ou un mode d’affichage. Sélection en Encre : le fond glisse vers l’option choisie (380 ms, ressort).
Le trait glisse sous l’onglet choisi (380 ms, ressort). Flèches ← → pour changer d’onglet (motif ARIA « tabs »).
Interrupteur : effet immédiat (réglage). Case : choix multiples dans un formulaire, appliqués ensemble. Libellé cliquable, zone tactile de 44.
Encre, texte Papier. Nombre exact jusqu’à 99, puis « 99+ ».
Carte : halo Corail diffus, jusqu’à la première consultation, sans pastille. Fascicule paru : badge Corail, texte Encre.
4 niveaux, 1 forme chacun : plus de côtés = plus rare pour les trois premiers, le diamant des légendaires est à part. Ambre cerné d’Encre 1,5 px sur fond neutre, + libellé ou aria-label. Dans le bandeau d’une carte : teinte profonde du bandeau, sans contour, jamais d’Ambre sur une couleur vive. Diamant : losange étiré, nettement plus haut que large, distinct du cercle des états. Jamais sur une brique. Tailles 12 · 16 · 22.
Traits Encre, jamais de couleur ni de forme géométrique (réservées à la rareté).
Point Palimpseste + nom complet. Jamais d’abréviation.
Au survol et au focus. Jamais d’information indispensable, jamais d’action à l’intérieur.
Pastille Encre en haut à droite, toujours visible : exemplaires disponibles (×1, ×2…). À zéro : « Épuisée », en pointillé.
Goutte Ambre cernée d’Encre, nombre en serif.
Collection : Encre sur piste Sable. Garantie des plis : Ambre, piste cernée d’Encre. Toujours accompagnée d’un texte (« 7 sur 12 »).
Anneau : énergie et famille. Étapes : tutoriel (4 au maximum).
Affichés seulement si le chargement dépasse 400 ms, à la forme exacte du contenu attendu. Jamais d’écran de chargement plein.
Quatre niveaux d’interruption, du plus léger au plus fort. Choisir toujours le plus léger qui convient.
Nouvelle découverte : biologie !
Retour d’une action, à l’endroit de l’action. role="status". Ne bloque rien.
Confirmation d’une action hors de vue. 1 ligne, 3 s, en bas à droite (bas centré sur mobile). Jamais d’action critique dedans.
Mobile : options ou détails liés au contexte (réglages rapides, tri). Glisser vers le bas ou toucher le voile pour fermer.
Seulement pour une action irréversible (réinitialiser la progression). Focus piégé, Échap pour annuler, action destructive jamais par défaut. Bouton de confirmation en Danger (Corail profond), Annuler en secondaire.
Aucune brique ne correspond à « zzz ». Essayez un sens, comme « vie » ou « terre ».
Le prochain pli sera prêt dans 04:21:50. Vos briques restent toutes jouables.
Retour à la tableBannière Sable, icône et texte Encre. Toujours dire ce qui fonctionne encore et ce qui n’a pas été perdu.
Les objets propres à ÉtymoLogique : briques, table, fiche de découverte, cartes du codex, plis. Leur couleur vient toujours du type de ressource.
En situationBriques de la réserveFormes
L (révélation de pli, 40) · M (table et réserve, 21) · S (mini-carte, équation compacte, 16) · Petite brique (dans un texte, 13 à 15). Largeur minimale M : 96 × 52.
ÉtatsRepos · survol · glissement (+4°, ombre 10) · emplacement d’origine pendant le glissement (pointillé) · posée sur la table (dans sa case, sans anneau) · désactivée : tous les exemplaires sont posés (40 %) · épuisée (pointillé, hachures Sable, Gris encre).
En situationRéserve jouableRemplir la réserveADR 0012
Chaque brique existe en un nombre limité d’exemplaires, 5 au plus. Les plis sont la seule source d’exemplaires. Se tromper ne coûte rien ; une découverte consomme un exemplaire de chaque brique utilisée.
Le compteur montre les exemplaires disponibles : poser une brique en réserve un, la retirer le rend. Toucher une brique indisponible affiche un message sans secousse : « Tous vos exemplaires de -logie sont déjà sur la table. » ou « Plus aucun exemplaire de -graphie. Ouvrez un pli pour en retrouver. » Une brique épuisée reste dans le codex.
| Nouvelle découverte | −1 exemplaire de chaque brique ; « −1 » s’envole (1,3 s) |
| Déjà connu, presque, échec | rien n’est consommé |
| Pli, brique connue | +1 exemplaire, 5 au plus, et de l’encre ; au-delà, plus d’encre |
| Réserve bloquée | brique utile garantie au plus tard au 5ᵉ pli |
En situationLa table de fusion
Vide (pointillé, numéro d’ordre en italique) · cible de dépôt (teinte Corail, +4 %) · rempli · refus (secousse de 500 ms). L’ordre compte : les emplacements sont numérotés.
Nouvelle découverte : biologie !
Bonnes briques… mais l’ordre compte.
Aucune recette connue. Rien n’est perdu : vos exemplaires restent dans la réserve.
biologie est déjà dans votre codex. Aucun exemplaire utilisé.
Cercle d’état + phrase courte. Annoncé par aria-live="polite".
En situationObtenir une ficheLa même carte dans le codex
En situationVue globale et carte agrandieTextures de carte
Format 3:4, bandeau de 24 px de la couleur du type (Encre pour les mots). Rareté en haut à droite du bandeau, dans la teinte profonde du bandeau et sans contour, à égale distance du haut et du bord. Pastilles de formes trouvées. Nouvelle : halo Corail diffus autour de la carte, jusqu’à la première consultation ; la carte garde sa structure et son contour. Inconnue : hachures, « ? » et piste. Découverte : silhouette de son sens en fond, aplat d’Encre à 10 %, recadré par le bord, jamais sous le bandeau (textures de carte, ADR 0023).
En situationL’atelier des plisLes dix jaquettesADR 0011
Jaquette illustrée propre à chaque fascicule (neutres et Ambre seulement), cadre Encre 2, sceau Ambre. La jaquette dit le fascicule choisi, jamais la brique tirée. Flotte au repos ; en recharge, silhouette en pointillé, jamais grisée.
Anneau Ambre cerné d’Encre. Deux charges au plus ; temps restant toujours en clair, arrêté à 2 / 2.
Pourcentages exacts, format français « 5,9 % ». Briques inconnues en silhouette.
Charge 0,3 s · écriture 1,3 s dans la carte, qui grossit (× 1,14) et vibre · explosion 0,3 s · révélation. Passable en touchant ou avec Échap.
Comment les composants s’assemblent : navigation, parcours, retours, gestes, son, clavier, première utilisation.
Quatre destinations, toujours visibles. Barre d’onglets en bas sur mobile (pouce), rail vertical à gauche au-delà de 1 100 px. La destination active est en Encre avec un repère ; un compteur Corail signale une nouveauté (pli prêt, carte nouvelle).
Ordre fixe : Table · Plis · Codex · Réglages. Changer d’onglet conserve l’état de chaque écran (briques posées, filtres, défilement).
En situationEssayer chaque retourMouvements associés
| Résultat | Visuel | Mouvement | Son | Vibration | Texte |
|---|---|---|---|---|---|
| Découverte | fiche, cercle Corail, confettis aux couleurs des briques | pop à ressort 480 ms, onde | accord ascendant, 0,6 s | 2 impulsions courtes | « Nouvelle découverte : biologie ! » · « −1 » sur chaque brique utilisée |
| Presque | cercle contour Encre | légère secousse 300 ms | note suspendue | 1 impulsion courte | « Bonnes briques… mais l’ordre compte. » |
| Échec | cercle Gris encre | secousse 500 ms | clic sourd | aucune | « Aucune recette connue. Rien n’est perdu. » |
| Déjà connu | cercle Encre, fiche rouverte | fondu 240 ms | aucun | aucune | « biologie est déjà dans votre codex. » |
| Nouvelle brique (pli) | rituel, rayons Ambre | 1,8 s | plume, puis éclat | 1 impulsion longue | « Nouvelle brique ! » |
| Brique connue (pli) | « +1 exemplaire · ×3 · +3 gouttes », « De retour ! » si épuisée | 1,8 s | plume, puis éclat doux | 1 impulsion courte | « +1 exemplaire : ×3 dans votre réserve · +3 gouttes d’encre » |
| Réserve pleine (pli) | « Réserve pleine · ×5 », gouttes | 1,8 s | plume, puis goutte | 1 impulsion courte | « Réserve pleine : +4 gouttes d’encre » |
| Brique indisponible | cercle contour Encre, petite brique dans le message | aucun | aucun | aucune | « Plus aucun exemplaire de -logie. Ouvrez un pli pour en retrouver. » |
Sons et vibrations désactivables séparément. Jamais de son pour un échec qui puisse sembler moqueur.
| Toucher | poser une brique, ouvrir une carte, retourner une carte |
| Glisser | déplacer une brique vers un emplacement (alternative au toucher) |
| Appui long | aperçu du sens d’une brique (info-bulle), sans la poser |
| Balayer ← → | carte précédente ou suivante dans la carte agrandie |
| Balayer ↓ | fermer une feuille |
Chaque geste a une alternative par bouton : aucun geste n’est indispensable.
| Tab | parcourir dans l’ordre de lecture |
| Entrée Espace | poser une brique, activer un bouton ou un lien |
| F | fusionner (quand les emplacements sont remplis) |
| ← → | carte précédente ou suivante, onglets |
| Échap | fermer une superposition, passer le rituel |
| / | rechercher dans le codex |
Trois étapes guidées au maximum, sur l’écran réel (jamais de diaporama). Une bulle Encre pointe l’élément concerné, le reste est légèrement voilé. « Passer » est toujours visible.
| Besoin | Composant |
|---|---|
| Confirmer une action | message en ligne ou toast |
| Explorer un objet | carte agrandie |
| Options contextuelles | feuille (mobile) ou menu (bureau) |
| Action irréversible | dialogue |
| Problème durable | bannière en haut de l’écran |
| Aide ponctuelle | info-bulle ou bulle guidée |
Une seule superposition à la fois. Jamais de dialogue au lancement de l’application.
Les écrans principaux de la PWA sur mobile, assemblés uniquement avec les composants de ce design système.
Voir aussiToutes les interfacesLes maquettes
Posez une deuxième brique.
Le jeu parle comme un guide curieux : précis, chaleureux, jamais professoral. Il vouvoie, et s’adresse au joueur à l’impératif (« Posez », « Touchez »).
lang et leur translittération.En situationLa boussole
| Terme | Définition pour le joueur | À ne pas dire |
|---|---|---|
| Brique | Morceau de mot manipulable : préfixe ou suffixe. | racine, morphème, élément |
| Table de fusion | L’endroit où l’on assemble deux briques. | établi, plateau |
| Découverte | Un mot trouvé en fusionnant des briques. | succès, victoire |
| Codex | La collection de toutes les cartes trouvées. | Pokédex, inventaire |
| Carte | La fiche d’un mot, d’une brique ou d’une langue dans le codex. | entrée, item |
| Exemplaire | Une unité d’une brique. Une découverte en utilise un de chaque brique. | charge, munition, jeton |
| Réserve | Les exemplaires que vous possédez, 5 au plus par brique. | inventaire, stock |
| Épuisée | Brique sans exemplaire : elle reste dans le codex et revient par les plis. | perdue, détruite, vide |
| Pli | Pli scellé et gratuit qui contient une brique ; seule source d’exemplaires. On l’ouvre en brisant le sceau. | pack, coffre, loot box, booster |
| Fascicule | Nouvel ensemble de mots et de briques, publié environ tous les 30 jours, avec sa jaquette et son pli. | pack, extension, saison, mise à jour |
| Doublon | Brique déjà connue reçue dans un pli : un exemplaire de plus. | raté, perte |
| Gouttes d’encre | Ce que rapporte chaque pli : 2 gouttes, plus un bonus pour un doublon ; s’échangent contre des sabliers ou des indices. | monnaie, gemmes |
| Énergie | Ce qui permet d’ouvrir un pli ; deux charges au plus, une toutes les 12 h. | vies, stamina |
| Sablier | Fait avancer la recharge d’une heure. S’échange contre 10 gouttes d’encre, sans limite, à la boutique. Du temps, jamais un tirage. | boost, accélérateur, skip |
| Légendaire | Brique ou mot le plus rare, marqué d’un diamant. Leur nombre reste secret ; celles que vous trouvez se comptent à part. | mythique, ultra-rare |
| Ricochets | Courtes questions sur les cartes que vous avez trouvées. Rien n’est consommé. | révision, quiz, exercice, leçon |
| Maîtrisée | Carte qui a reçu trois bonnes réponses en ricochets, sur trois jours différents. Elle le reste. | apprise, validée |
| Quête | Objectif de la page Quêtes : trois quêtes du jour, des quêtes au long cours et les jalons des fascicules. | mission, tâche, corvée |
| Carte de lecteur | Reçoit un tampon chaque jour où vos trois quêtes du jour sont faites ; au 7ᵉ tampon, une récompense. | série, flamme, streak |
| Cadeau de bienvenue | Ce que reçoit un nouveau joueur, une seule fois, dans la page Quêtes. | pack de départ, offre, starter pack |
| Sens littéral | Ce que disent les briques mises bout à bout. | traduction |
Objectif WCAG 2.2 niveau AA sur tout le produit. Cette liste sert de contrôle avant chaque publication d’écran.
aria-live="polite".sr-only).lang.prefers-reduced-motion et réglage du jeu.h1 par écran, hiérarchie des titres respectée.header, nav, main.La source de vérité pour le développement. Les mêmes valeurs alimentent le CSS, le code et les maquettes. Le mode nocturne ne redéfinit que les neutres.
| Jeton | Clair | Nocturne | Remarque |
|---|---|---|---|
--paper | #F3EEE3 | #0F1F19 | fond de page |
--cream | #FFFBF3 | #182C24 | surfaces |
--ink | #0F1F19 | #F3EEE3 | texte et bordures |
--ink-3 | #5C6B62 | #93A39A | métadonnées (4,5:1 dans les deux modes) |
--fixed-ink | #0F1F19 dans les deux modes | texte posé sur une couleur vive | |
| Couleurs de ressource et d’action | identiques dans les deux modes | seuls les neutres s’inversent | |
Toutes vos découvertes, briques et gouttes d’encre seront effacées. Cette action est irréversible.