Charte d'identité · version 1.1 · octobre 2026
TierLore

Rank everything. Spoil nothing.

TierLore est un site de tier lists d'anime pensé pour les créateurs YouTube et Twitch. Chaque élément est présenté avec son contexte, filtré selon là où chacun en est dans l'œuvre. Cette charte fixe l'identité visuelle et verbale du produit, avec le raisonnement derrière chaque choix.

Nom

TierLore

On écrit TierLore partout, dans le texte comme dans le logo. Seule l'adresse du site reste en minuscules, comme toutes les adresses web.

Pourquoi

  • « Tier » est le mot que les gens tapent pour chercher une tier list : le nom se comprend en une seconde et aide le référencement.
  • « Lore » est du vocabulaire de fan : il dit qu'on classe avec le contexte de l'œuvre, pas sur une miniature.
  • Le nom ne contient pas le mot « anime ». Il reste valable si le produit s'ouvre aux séries, mangas ou jeux narratifs.
  • Huit lettres qui se disent sans hésiter en anglais comme en français, ce qui compte quand un streamer donne l'adresse à l'oral.
  • Le nom ne parle pas d'anti-spoiler : c'est le slogan qui porte cette promesse.
Logo

Les rangées voilées

Trois rangées de tier qui raccourcissent. La première est en sakura, la deuxième en encre, la troisième est tramée : c'est un classement dont une partie reste cachée.

TierLore
Sur fond encre
TierLore
Sur fond clair
TierLore
Sur image : toujours une plaque

Anatomie

  • Rangée sakura : le tier du haut, la couleur de la marque.
  • Rangée encre : le classement visible. Elle passe en blanc sur fond sombre.
  • Rangée tramée : ce que tu n'as pas encore vu. C'est la trame anti-spoiler du produit.
  • Zone de protection : laisser autour du symbole un vide égal à la hauteur d'une rangée.

Tailles

Le symbole reste lisible jusqu'à 16 px (icône d'onglet). En dessous de 24 px, on utilise le symbole seul, sans le mot.

Ne pas retournerLes rangées s'alignent à gauche, comme une tier list.
Ne pas recolorerUne couleur de tier sur le logo le confond avec un classement.
Ne pas déformerProportions fixes, pas d'étirement.
Pas d'effetNi lueur, ni ombre, ni dégradé.

Pourquoi

  • Le symbole raconte les deux piliers du produit en une forme : le classement (les rangées) et l'anti-spoiler (la trame).
  • Il est fait de rectangles simples : il survit au 16 px d'un onglet, au flou d'une vidéo compressée et à la future icône d'application mobile.
  • Le logotype s'écrit TierLore, comme dans le texte : une seule écriture du nom partout. Les deux majuscules font lire les deux mots, et la barre du T répond à la barre sakura du symbole.
Couleurs

Encre et sakura

Une encre légèrement violacée, un blanc lavande et un seul accent : le sakura néon. Le produit est sombre par défaut, avec une version claire.

Encre#0F0E17Fond
Surface#1A1824Panneaux, rangées
Relief#262335Puces, champs
Lavande#F3F0FATexte sur sombre
Brume#A49EB8Texte secondaire
Sakura#FF4D94Accent, sombre
Sakura profond#C8156AAccent, clair
AssociationContrasteUsage
Lavande sur encre17:1Texte courant en sombre
Brume sur surface6,8:1Libellés, texte secondaire
Sakura sur encre6,2:1Boutons, sélection, liens en sombre
Blanc sur sakura profond5,6:1Boutons en clair
Encre sur fond clair16,8:1Texte courant en clair

Contrastes calculés selon la norme WCAG. Le minimum pour du texte courant est 4,5:1 ; toutes les associations le dépassent.

TierLore
Bleach · PersonnagesVu jusqu'à : Soul SocietyPartager
S
Kisuke UraharaIchigo Kurosaki
A
Rukia KuchikiKenpachi ZarakiYoruichi Shihōin
B
Renji AbaraiUryū Ishida
C
Yasutora Sado
D
F
À classerOrihime InoueByakuya Kuchiki??????

Aperçu de l'éditeur. Le visuel est un aplat de démonstration ; le produit affiche les visuels officiels.

Pourquoi

  • Une couleur libre. Les voisins du créneau ont déjà pris les autres : AniList et MyAnimeList en bleu, Twitch en violet, YouTube en rouge, Crunchyroll en orange. Le sakura se distingue dans un onglet, une miniature ou un filigrane.
  • Codé « anime » sans cliché. Le rose néon évoque les affiches et les génériques sans recourir aux poncifs (cerisiers, kanji décoratifs).
  • Sombre par défaut. Les créateurs et leurs spectateurs utilisent surtout des interfaces sombres, et un fond sombre fait ressortir les visuels d'anime et les couleurs des tiers.
  • Un seul accent, utilisé en aplat. Le sakura tire sur le rouge, et la compression vidéo bave sur les petits textes rouges. Il sert donc aux surfaces (bouton principal, sélection, logo), jamais au texte de petite taille.
  • Des gris teintés. L'encre et la brume tirent vers le violet du sakura : la palette paraît voulue, pas grise par défaut.
Couleurs des tiers

La convention, en mieux réglée

Six tiers, de S à F, du chaud au froid. La lettre est toujours en encre sur sa couleur.

S#FF5C77
6,2:1
A#FF9B54
8,9:1
B#FFD35C
13:1
C#8FDB6E
11:1
D#5EC4F0
9,4:1
F#B9A2FF
8,5:1

Pourquoi

  • Garder la convention. Les spectateurs reconnaissent un tier à sa couleur avant de lire la lettre : rouge en haut, froid en bas. Changer cet ordre ferait perdre en lisibilité sans rien apporter.
  • Des tons plus denses que les pastels habituels, pour qu'ils tiennent sur un fond encre et après compression vidéo. Chaque lettre dépasse largement le contraste minimum (ratios ci-dessus).
  • La lettre toujours affichée. S et C se confondent pour un daltonien rouge-vert ; la lettre lève le doute.
  • Six tiers pour correspondre aux raccourcis clavier 1 à 6 de l'éditeur.
  • Mêmes couleurs en sombre et en clair, et définies comme variables : la personnalisation des tiers de l'offre Créateur ne coûtera presque rien à développer.
Trame anti-spoiler

Ce qui est caché porte une trame

Une trame de points, comme celles des mangas, recouvre tout ce que l'utilisateur n'a pas encore vu. Trame légère pour un spoiler mineur, trame dense pour un spoiler majeur.

VisibleLycéen qui voit les esprits.Révélé épisode 1, tu l'as vu.
Spoiler mineur Afficher · arc Soul Society
Spoiler majeur Masqué jusqu'à l'arc suivant

Pourquoi

  • Pas de couleur pour la gravité. Un spoiler majeur en rouge ressemblerait à un tier S. La densité de trame encode la gravité sans entrer en conflit avec les tiers, et elle reste lisible pour les daltoniens.
  • Une référence native. La trame vient du manga : le public la reconnaît sans explication.
  • Une signature. Un élément tramé se reconnaît dans une capture ou une miniature, et il montre la fonction anti-spoiler sans texte. On la retrouve dans le logo.
Typographie

Dela Gothic One et M PLUS 1

Une police d'affiche pour la marque, une police d'interface pour tout le reste. Les deux sont gratuites (licence OFL) et contiennent les kana et les kanji.

Affiche · Dela Gothic One
TierLore
S A B C D F

Logotype, lettres des tiers, grands titres. Une seule graisse. Jamais en dessous de 20 px.

Interface · M PLUS 1
Ichigo Kurosaki
黒崎一護
RegularMediumBoldExtraBold

Interface, textes, fiches, puces des tiers, petits titres.

RôleRenduPolice
Titre 1Où en es-tu ?Dela Gothic One · 36 à 64 px
Titre 2Personnages de BleachDela Gothic One · 24 px
Titre 3Arc Soul SocietyM PLUS 1 ExtraBold · 18 px
TexteRègle ta progression pour débloquer cette fiche.M PLUS 1 Regular · 15 à 16 px
LibelléÀ classerM PLUS 1 Code · 12 px, capitales espacées

Pourquoi

  • Dela Gothic One a l'allure d'une affiche de film japonais : massive, ancrée dans la culture anime, sans tomber dans le cliché. Ses lettres très épaisses restent lisibles de loin et en vidéo, ce qui compte pour les lettres des tiers.
  • M PLUS 1 va de la graisse 100 à 900 : une seule famille couvre toute l'interface. Elle partage l'origine japonaise de Dela, donc les deux se marient naturellement.
  • Japonais natif. Les deux polices contiennent kana et kanji : un nom comme 黒崎一護 s'affiche dans la même police que le reste, sans police de secours qui jure.
  • Hors des polices « par défaut » (Inter, Geist, Space Grotesk…) que l'on voit sur tous les sites générés : TierLore ne ressemble pas à un template.
  • Limite assumée. Dela n'a qu'une graisse et devient pâteuse en petit : elle est réservée aux grandes tailles. Les fichiers japonais sont lourds ; en production, on ne charge que les caractères utilisés.
Mode créateur et filigrane

Lisible sur n'importe quel live

Le filigrane de la version gratuite affiche le symbole et l'adresse du site, sur une plaque encre.

S
Kisuke UraharaIchigo Kurosaki
tierlore.app

Règles

  • Le filigrane montre l'adresse, pas seulement le nom.
  • Tout élément affiché par-dessus une vidéo garde son propre fond (plaque encre à 86 %).
  • Texte du filigrane d'au moins 22 px de haut en 1080p.
  • Pas de texte fin, ni de petit texte en sakura sur une vidéo.
  • Quand un élément est placé dans un tier, il arrive avec un léger effet de tampon, désactivé si l'utilisateur réduit les animations.

Pourquoi

  • Le filigrane est le premier canal d'acquisition : un spectateur ne peut pas taper un logo, il peut taper une adresse.
  • En vue OBS à fond transparent, on ne sait jamais ce qu'il y a derrière (jeu, webcam). Sans plaque, le texte disparaît sur un fond chargé.
  • La compression de YouTube et Twitch efface les traits fins et fait baver les couleurs saturées : les tailles minimales évitent un filigrane illisible.
Ton

Un fan qui parle à un fan

Phrases courtes, verbes d'action, humour léger. Les textes sont écrits d'abord en anglais, puis adaptés en français plutôt que traduits mot à mot.

Slogans

Rank everything. Spoil nothing.Classe tout. Ne spoile rien. · Slogan principal.
Judge the lore, not the thumbnail.Page créateurs : répond aux miniatures illisibles des outils actuels.
Tier lists that know where you are.Sous-titre explicatif.
MomentTexte
Première visiteHow far are you in Bleach?
Où en es-tu dans Bleach ?
Élément masquéNot there yet. Lips sealed.
Pas encore vu. Bouche cousue.
Blind rankingNext one's coming. No take-backs.
Le suivant arrive. Pas de retour en arrière.
SignalementHidden for everyone. Thanks for the catch.
Masqué pour tout le monde. Merci du signalement.

Pourquoi

  • Fan, pas wiki. Le public vient pour s'amuser et débattre. Un ton encyclopédique refroidit, un ton de pote qui connaît la série donne envie de classer.
  • Le slogan porte la promesse que le nom ne dit pas : l'anti-spoiler. Il joue sur le double sens de « lore » (le contexte, mais aussi les révélations).
  • L'anglais d'abord, parce que la cible est internationale. Adapter plutôt que traduire garde le rythme des phrases dans les deux langues.
  • Règle absolue : aucun texte de TierLore ne spoile, y compris le marketing, les exemples et les blagues. Un seul spoiler dans une publicité ruinerait la promesse.