Chaque couleur a une signification unique dans tout le jeu. Une ressource a toujours la même couleur, et cette couleur n’est jamais utilisée pour autre chose. Cliquez une couleur pour copier sa valeur. Les composants, les motifs d’expérience et les jetons complets sont dans le design système.
La structure du jeu est en Encre sur Papier. Ces neutres portent le texte, les bordures et les surfaces. En mode nocturne, Encre et Papier s’inversent ; les couleurs de ressource, elles, ne changent jamais.
Le fond de l’application est le Papier foncé (--paper-2), tramé de points Encre à 16 % tous les 22 px, comme la table de fusion ; les panneaux et la navigation posent dessus leur surface Crème.
Une couleur identifie ce qu’est une chose. Chaque type de ressource possède une couleur exclusive, déclinée en trois tons : Base pour les surfaces, Teinte pour les fonds légers et Profond pour le texte coloré sur Crème. Le texte posé sur une couleur de ressource est toujours en Encre.
Surlignage de la partie préfixe d’un mot découvert
Jamais pour
Boutons, succès ou sélection
Décor, fonds, halos
Tout ce qui n’est pas un préfixe
-logiesuffixe · « étude »-graphie
Ressource
Suffixe · Glose
Utilisé pour
Briques suffixes (grande et petite brique)
Bandeau des cartes de suffixe
Surlignage de la partie suffixe d’un mot découvert
Jamais pour
Langues (même le grec ancien)
Indices, liens, états
Tout ce qui n’est pas un suffixe
ΩGrec ancien6 / 10 formesLatin
Ressource
Langue · Palimpseste
Utilisé pour
Toutes les langues, sans exception : français, latin, grec ancien…
Pastilles et points de langue, étiquettes, bandeau des cartes de langue
Texte Encre posé dessus
Jamais pour
Distinguer une langue d’une autre : on écrit son nom complet
Codes ou abréviations (jamais « GRC », « LA »)
Drapeaux
biologieFrançais · ●●●
Ressource
Mot · Encre sur Crème
Utilisé pour
Cartes de mots : bandeau Encre, surface Crème
Mots découverts, fiches de découverte
Le mot est le résultat : il reste neutre pour laisser parler les briques
Jamais pour
Une couleur vive : un mot n’a pas de teinte propre
Le surlignage vient des briques qui le composent
-logie7 / 12
Ressource
Famille · Rosée
Utilisé pour
Bandeau des cartes de famille
Objectifs et complétion d’une famille
Jamais pour
Fond d’une carte entière : une brique ne se pose jamais sur du Rosée
Langues, types de brique, nouveauté ou action
Ressource
Pli & énergie · Ambre
Utilisé pour
Plis : sceau, liseré, rayons, lueur du rituel
Énergie : anneau de recharge, compte à rebours
Rareté : triangle, carré, pentagone, diamant, remplis d’Ambre et cernés d’Encre sur fond neutre ; dans le bandeau d’une carte, remplis de la teinte profonde du bandeau, sans contour ; toujours avec leur libellé
Gouttes d’encre, chances, garantie, historique des tirages
Jamais pour
Boutons : on ouvre un pli avec le bouton Corail
Succès d’une fusion
CAction et marque · Corail
Le Corail indique ce que l’on peut faire. C’est la seule couleur interactive, et aussi la couleur de la marque. Il n’identifie jamais une ressource et ne signale jamais un échec.
Bouton principal : une seule action principale par écran (Fusionner, Ouvrir le pli, Essayer la table)
Zone de dépôt survolée (teinte), sélection de texte (teinte)
Nouveauté : pastille et halo d’une carte nouvelle, badge « Nouveau » d’un fascicule, « Nouvelle découverte », halo de la fiche
Marque : sceau ÉL (ADR 0021), italiques des titres, numéros de section, liens (profond)
Danger (Profond, en plein, texte Crème) : le bouton qui confirme une action irréversible, avec l’icône octogone
Jamais pour
Une ressource ou une langue
Un échec ou une erreur de jeu : le danger ne concerne que les actions irréversibles
DLogo · Sceau ÉL
Le logo est le sceau ÉL : une tuile Corail inclinée, cernée d’Encre, avec une ombre dure et les initiales en serif gras. C’est un tampon d’éditeur, posé sur la page comme sur un dictionnaire. Le Corail y reste la couleur de la marque, jamais celle d’une ressource.
Ombredure, décalée de 11 % en x et en y, sans flou : Encre sur fond clair, Crème à 28 % sur fond sombre
Inclinaison−6° au repos, +8° au survol avec --ease-spring, immobile en mouvement réduit
InitialesÉL en --serif gras, toujours en Encre fixe
Logo horizontalsceau, puis « ÉtymoLogique » en serif gras, séparés d’un tiers du côté du sceau
Taille minimale16 px pour le symbole, 24 px de haut pour le logo horizontal
ÉtymoLogique
Sur Papier ou Crème
Version de référence : navigation, en-têtes, icône des pages.
Corail · Encre
ÉtymoLogique
Sur Encre ou Nuit
Mode nocturne : la tuile reste Corail, l’ombre passe en Crème à 28 %.
Corail · ombre Crème 28 %
ÉtymoLogique
Sur la bande Corail
Pied de page : monochrome, sinon le Corail disparaîtrait sur le Corail.
Crème · Encre
ÉtymoLogique
Sur un pli
La face du pli ne porte que des neutres et de l’Ambre : monochrome.
Crème · Encre
Sceau de référence
Sur une couleur de ressource
Initiales en monospace
Tuile d’une autre couleur
Droit, sans ombre
ERègles élémentaires
Ces règles s’appliquent partout, sans exception. Elles garantissent la lisibilité (contraste minimal 4,5:1 pour le texte, 3:1 pour les grands titres, les icônes et les bordures utiles) et évitent les associations de couleurs qui fatiguent les yeux.
Une brique, une pastille ou un texte coloré se pose toujours sur un neutre : Crème, Papier, Encre ou Nuit. Une bordure Encre ne suffit pas à rendre acceptable une brique posée sur une surface colorée.
-logie
Glose sur Palimpseste 1,8:1
-logie
Brique sur Crème
02Sur une couleur vive, le texte est en Encre
Le texte posé sur Étincelle, Glose, Palimpseste, Rosée, Ambre ou Corail est toujours en Encre #0F1F19, en mode clair comme en mode nocturne. Jamais de texte blanc ou crème sur une couleur vive.
Grec ancien
Crème sur Palimpseste 3,2:1
Grec ancien
Encre 5,1:1
03Texte coloré sur fond clair : ton Profond
Une couleur vive n’est jamais utilisée comme couleur de texte sur Crème ou Papier. Pour un texte coloré, on prend le ton Profond de la même couleur (par exemple Corail profond #C23D1F).
Nouvelle découverte
Corail 2,7:1
Nouvelle découverte
Corail profond 5,1:1
04Deux couleurs ne se touchent jamais
Quand deux morceaux colorés se suivent, par exemple le surlignage d’un mot, un filet neutre de 3 px les sépare. Il marque aussi la frontière entre les briques.
géologie
Vert contre turquoise
géologie
Filet de 3 px
05Les grandes surfaces restent neutres
Fonds de page, sections, panneaux et cartes entières sont en Papier, Crème, Sable, Encre ou Nuit. Une couleur de ressource ne couvre qu’une brique, un bandeau, une pastille ou un sceau. Seul le Corail peut couvrir une bande de marque (bandeau défilant, pied de page).
Panneau Étincelle
Surface vive
bio-
Neutre et petite brique
06La couleur n’est jamais le seul signal
Chaque information portée par une couleur est doublée par un texte, une forme ou une icône, pour les personnes daltoniennes et en noir et blanc : type écrit dans le bandeau, langue en toutes lettres, trait d’union des briques, cercle d’état accompagné d’un mot.
Couleur seule
Grec ancienbio--logie
Couleur + texte + forme
07Pas de dégradé ni de transparence inventée
Jamais de dégradé entre deux couleurs de ressource. Jamais d’opacité appliquée à une couleur vive pour créer une nouvelle teinte : on utilise la Teinte définie. Seule exception : l’état désactivé, à 40 % d’opacité.
Dégradé multicolore
Encre sur Sable
08Des ombres jamais colorées
Une ombre dure est en Encre sur fond clair, et en Crème à 28 % sur fond sombre. Une seule exception : la carte vitrine de l’accueil porte une ombre Corail, signature de la marque.
bio-
Ombre Glose
bio-
Ombre Encre
09Contrastes de référence
Texte courant : 4,5:1 minimum. Grands titres, icônes et bordures utiles : 3:1 minimum. Une couleur vive n’est jamais utilisée pour du texte courant.
AaEncre sur Crème16,5:1✓
AaGris encre sur Papier4,9:1✓
AaCorail profond sur Crème5,1:1✓
AaEncre sur Étincelle13,4:1✓
AaEncre sur Palimpseste5,1:1✓
AaAmbre sur Nuit (titres courts)10,1:1✓
AaCrème sur Palimpseste3,2:1✕
AaCorail sur Crème2,7:1✕
AaGlose sur Palimpseste1,8:1✕
AaÉtincelle sur Crème1,2:1✕
10Et aussi
Une seule surface colorée par composant : son bandeau. Les autres couleurs n’y apparaissent qu’en petits éléments (briques, pastilles, points).
Au plus trois couleurs de ressource visibles dans un même composant ; le Corail d’action n’entre pas dans ce compte.
Texte Crème uniquement sur Encre ou Nuit.
Sur Nuit, les couleurs vives colorent des éléments (briques, sceau, anneau) et des titres courts, jamais du texte courant.
Mode nocturne : seuls les neutres s’inversent. Les couleurs vives et le texte Encre posé dessus ne changent jamais.
Désactivé : opacité 40 % sur tout le composant, jamais une teinte grise inventée.
Pas de rouge : l’erreur est en Gris encre, avec un mouvement et un texte.
Toute nouvelle couleur exige d’abord un rôle exclusif et une vérification de contraste.
FÉtats de retour
Les états ne reçoivent pas de nouvelle teinte. Ils se lisent par une forme (le cercle), un mouvement et un texte. Un échec n’est jamais rouge : le jeu refuse doucement.
Cercle Encre plein. La fiche se rouvre, sans célébration.
Inconnu
Hachures Sable, contour pointillé et « ? ». Une piste de sens peut être affichée.
Confiance éditoriale
Trois traits Encre, jamais de couleur ni de forme géométrique : la fiabilité d’une étymologie n’est pas une rareté.
ÉtablieProbableDiscutée
GFormes
La forme dit comment on interagit avec un élément. Les ombres sont toujours dures (décalage égal en x et en y, sans flou), en Encre sur fond clair et en Crème à 28 % sur fond sombre. Seuls les éléments en superposition (carte agrandie, pli flottant) ont une ombre floue.
Quatre niveaux, une forme chacun : pour les trois premiers, plus la forme a de côtés, plus la brique est rare. Le diamant des légendaires est à part : un losange étiré, nettement plus haut que large, bien distinct du cercle des états. Remplie d’Ambre, cernée d’Encre sur fond neutre ; dans le bandeau d’une carte, remplie de la teinte profonde du bandeau, sans contour. Toujours accompagnée du libellé ou d’un nom accessible, jamais posée sur une brique.
12 liste · 16 chances · 22 révélation · trait 1,5
Maîtrise
Un galet aplati et son rebond : la carte est maîtrisée (ADR 0044). Plein, en Encre, ou dans la couleur du texte du bandeau d’une carte, à droite de la ligne haute, avant la rareté. Ni polygone, ni cercle, ni trois traits : il ne se confond avec aucun autre signe. Toujours accompagné du nom accessible « Maîtrisée ».
ellipse 18 × 10 · rebond trait 2,4 · 11 px sur une carte
?
Pointillé
Ce qui manque : zone de dépôt, forme à découvrir, carte inconnue.
Chaque carte découverte porte en fond une silhouette simple de son sens : une hélice pour biologie, une pousse pour bio-, un livre pour -logie, une amphore pour le grec ancien. Un aplat plein, un peu gras, d’une seule teinte, recadré par le bord de la carte. La texture décore, elle ne dit jamais rien du jeu.
Grille 300 × 400 · amphore du grec ancien, affichée à 16 % pour la lecture
Plein massifLa masse du sujet, un seul aplat sans contour. Elle porte l’essentiel de la surface dessinée ; un tronc ou un fût se dessine en masse, pas en trait.
Trait pleinAnse, tige, fil : un trait épais à bouts ronds, de 9 à 24 unités (6 au minimum pour un fil).
Évidement structurantIl découpe le volume (bandeau, reliure, strate) : 6 à 7 unités, dans la couleur du fond.
Évidement de détailIl donne le caractère (frise, nervure, plumage) : 4 à 5 unités, jamais moins de 4.
ArrondiChaque angle d’un objet fabriqué est arrondi, de 6 à 14 unités selon sa taille.
DébordLa silhouette sort du cadre par la droite ou par le bas. Seul un élément fin (fil, tige) peut sortir par le haut.
Grammaire de dessin
Les mesures sont en unités de la grille de 300 × 400, qui couvre la zone de la carte sous le bandeau. En grille du codex, une unité vaut environ 0,5 px ; en carte agrandie, environ 1,4 px.
Élément
Règle
Valeur
Grille
Un plan de 3:4, recadré au centre pour remplir la carte (grille 3:4, carte agrandie 5:7). La carte agrandie rogne environ 15 unités à gauche et à droite, la grille autant en haut et en bas : aucun détail indispensable dans ces marges.
300 × 400
Un seul sujet
Un objet, un être vivant ou un paysage, seul. Un groupe n’est admis que s’il forme un tout (une pile de livres, une chaîne de montagnes).
1 sujet
Échelle
Grande : la silhouette occupe l’essentiel de la hauteur et plus de la moitié de la largeur.
h 60 à 90 % · l 55 à 90 %
Cadrage
Centre de masse dans la moitié basse, décalé vers la droite. Rien de massif dans la zone du mot, en haut à gauche. La silhouette peut passer sous le pied de carte.
mot : x 0–190, y 0–90
Débord
Toujours au moins un bord franchi, à droite ou en bas. Jamais par la gauche, jamais par le haut sauf pour un fil ou une tige.
≥ 1 bord
Inclinaison
Droit pour ce qui a une verticale naturelle (architecture, paysage, personnage, animal, objet suspendu). Légèrement penché pour un objet posé, franchement pour un objet long. Une hélice ou une frise suit une diagonale.
0° · ±3 à 12° · 28 à 32°
Point de vue
De face ou de profil strict. Pas de perspective, pas de volume, pas d’ombre portée. Seule tolérance : un livre ouvert, ses deux pages légèrement ouvertes.
face · profil
Plein
Les masses sont des aplats pleins, sans contour autour. Un trait plein (anse, tige, fil, racine) reste épais.
trait 9 à 24 · fil ≥ 6
Évidement
Les détails sont creusés dans la couleur du fond de la carte, jamais tracés dans une autre teinte. Deux épaisseurs seulement : structure et détail.
structure 6–7 · détail 4–5
Espacement
Deux évidements parallèles sont séparés d’au moins trois fois leur épaisseur, pour rester lisibles en grille.
≥ 18
Trous
Un œil, un anneau, un joint : un disque évidé, jamais un simple point.
rayon ≥ 4
Terminaisons
Tous les traits et évidements finissent en bout rond et se joignent en arrondi.
round · round
Arrondis
Les angles d’un objet fabriqué sont arrondis selon sa taille. Les arêtes vives sont réservées à l’architecture et au relief (aqueduc, montagne, strate).
6 petit · 8–10 moyen · 14 grand
Pointes
Une pointe n’existe que si le sujet l’impose : sommet, pointe de crayon, bout de feuille, bec, oreilles d’une chouette.
si le sujet l’impose
Courbes
Des courbes souples et continues, sans tremblé ni effet dessiné à la main. Symétrie exacte pour un objet tourné (amphore, rosace).
Bézier
Détails
De deux à cinq familles d’évidement par silhouette : assez pour reconnaître le sujet, jamais au point de le décrire. Un visage humain n’a qu’un trait pour l’œil, jamais de bouche ni de pupille.
2 à 5
Teinte
Une seule : Encre en atelier, Papier en nocturne. L’opacité est portée par la carte, jamais par le dessin.
10 % · 8,5 % agrandie
Fichier
SVG sur la grille 300 × 400, currentColor pour les pleins, var(--art-bg) pour les évidements, masqué aux lecteurs d’écran. Ni texte, ni chiffre, ni lettre, ni image matricielle.
≤ 3 ko
Choisir le sujet
Mot
L’objet d’étude ou la chose désignée : l’hélice d’ADN pour biologie, le globe pour géographie, les strates pour géologie.
Préfixe et suffixe
Le sens de la glose, par l’objet le plus simple : une pousse pour bio- « vie », une chouette pour -sophie « sagesse ».
Langue
Un objet de sa culture matérielle : rosace pour le français, aqueduc pour le latin, amphore pour le grec ancien. Jamais un drapeau, un monument trop célèbre ou un personnage.
Unicité : une silhouette appartient à une seule carte. Deux cartes proches par le sens (géo-, géographie, géologie) prennent trois sujets distincts : montagnes, globe, strates. Seule exception : le même mot dans plusieurs langues, relié par un emprunt ou un héritage et de même sens (philosophie, philosophia), garde la même silhouette (ADR 0023).
Répertoire de la démonstration
Les mêmes silhouettes servent partout où une carte du codex apparaît : grille et carte agrandie du codex, maquettes d’écran, exemples de la charte et du design système. Une fiche de découverte (table de fusion, accueil) n’est pas une carte : elle reste sans texture.
Carte
Sujet
Détails évidés
Inclinaison
étymologique
clé
anneau, rainure du fût
32°
Français
rosace
deux cercles, douze rayons, douze lobes
0°
Latin
aqueduc
deux rangs d’arches, corniche
0°
Grec ancien
amphore
trois bandeaux, frise en méandre
8°
étymologie
racines
veines du tronc
0°
-logie
livre ouvert
reliure, cinq lignes par page
−10°
bio-
pousse
nervures des trois feuilles
6°
biologie
double hélice
aucun : barreaux en trait plein
axe −70°
philo-
cœur
un reflet
−12°
philosophie
buste de penseur, de profil
chevelure, œil, barbe, plis du drapé
0°
-sophie
chouette
yeux en disque, bec, plumage en chevrons
0°
géo-
montagnes
neige des sommets, vallée
0°
géographie
globe
méridiens, parallèles, continents
0°
-graphie
crayon et trait écrit
virole, taille, mine, fût
30°
biographie
camée sur son ruban
anneau du cadre, profil sans œil
0°
géologie
strates
quatre couches, faille, galets
0°
philologie
pile de livres
dos, titres
±5°
étymo-
fil à plomb
bague, axe
0°
Toujours, jamais
Toujours
Une seule teinte : Encre à 10 % en grille, 8,5 % en carte agrandie ; Papier à la même opacité en nocturne.
Des formes pleines et des traits épais ; les détails sont évidés dans la couleur du fond de la carte.
Une silhouette grande, décentrée vers le bas ou la droite, recadrée par le bord, jamais sous le bandeau.
Le texte posé directement dessus. Le texte secondaire et les liens passent en Encre secondaire (5,5:1 au pire), le lien restant souligné ; le sens littéral en pastille passe en Crème, cerné de Gris encre.
Pour une langue, un objet de sa culture : rosace, aqueduc, amphore.
Jamais
Une texture sur une carte inconnue : elle garde ses hachures, son « ? » et sa piste.
Une couleur de ressource, un second ton ou un dégradé dans la texture.
Un fond opaque ou un flou sous le texte : ils découpent ou brouillent la silhouette.
Un drapeau, un parchemin ou une plume ; un indice de rareté, de famille ou de fascicule.
Une texture au verso : les listes de formes restent sur fond nu.
ITailles
Toutes les mesures viennent d’échelles fixes. Toute cible tactile mesure au moins 44 px.
Chaque composant interactif suit la même grammaire : il se soulève au survol, s’enfonce à la pression et affiche un anneau Encre au focus, identique sur tous les composants.
Jamais d’anneau Corail sur une brique, posée ou non : le Corail désigne une action, pas un objet. Le focus est un anneau Encre.
Lien dans une carte du codex : une brique zoome légèrement et s’incline au survol ; une pastille de mot et tout élément d’interface ne s’inclinent jamais, ils prennent seulement la teinte du lien.
Ce qui n’est pas découvert (silhouette, points, pointillés) n’a ni lien, ni animation, ni survol.
Jaquette d’un fascicule : inclinée au repos, elle se redresse au survol, sans pencher de l’autre côté.
icône octogone · confirmation obligatoire · Corail en contour pour la variante discrète
Brique préfixe
Étincelle
Encre 1,5 px
Encre
ombre dure 4 px
Brique suffixe
Glose
Encre 1,5 px
Encre
ombre dure 4 px
Petite brique (dans un texte)
couleur du type
Encre 1,5 px
Encre
ombre 2 px · rayon 6 px
Carte de mot
Crème
Encre 1,5 px
Encre
bandeau Encre
Carte de préfixe / suffixe
Crème
Encre 1,5 px
Encre
bandeau Étincelle / Glose · la brique au centre
Carte de langue
Crème
Encre 1,5 px
Encre
bandeau Palimpseste · glyphe en Palimpseste
Carte de famille
Crème
Encre 1,5 px
Encre
bandeau Rosée · anneau Encre
Carte inconnue
hachures Sable
Encre 1,5 px
Gris encre
« ? » et piste de sens
Carte « Nouveau »
Crème
dégradé Corail animé 3 px
Encre
ruban Corail
Pastille ou point de langue
transparent
Encre
Encre
point Palimpseste
Fiche de découverte
Crème + halo teinte Corail
Encre 1,5 px
Encre
mot surligné aux couleurs de ses briques
Zone de dépôt (table)
transparent → teinte Corail au survol
pointillé Encre 2 px
Gris encre
—
Pli
jaquette illustrée, neutres et Ambre seulement
Encre 2 px
Encre
sceau Ambre · jaquette liée au numéro, jamais au contenu · en recharge : silhouette en pointillé
Rareté
—
—
Encre
forme (triangle, carré, pentagone, diamant) remplie d’Ambre, cernée d’Encre 1,5 px, + libellé ou nom accessible ; dans le bandeau d’une carte, remplie de la teinte profonde du bandeau, sans contour (jamais d’Ambre sur une couleur vive) ; jamais posée sur une brique