Charte graphique 00Couverture
AKO TMStreameuse Trackmania
Charte graphiqueIdentité, scènes, Reels
Version 1Forme, septembre 2026
twitch.tv/akotmDocument de travail

Le temps du Reel, battu en direct.

01Logo

Le logo

« AKO » incliné, et un bloc magenta « TM » posé en exposant, à la place du symbole de marque.

01.1

Construction

Une seule police, Russo One. Toutes les cotes se déduisent du corps de « AKO ».

Fig. 01.1Repères calculés sur le rendu réel de la police.

Inclinaison
-10°skewX sur l'ensemble du logo
Bloc TM
0,42 emcorps du TM, relatif à AKO
Écart
0,12 ementre le O et le bloc
Alignement
+0,05 emsous le haut des capitales
01.2

Double lecture

Le bloc se lit de deux façons, et c'est voulu.

AKO™

Symbole ™

La position et la taille du symbole ™ : le pseudo est présenté comme une marque. Clin d'œil, pas une mention légale.

AKO TM

TrackMania

Les deux lettres que la communauté utilise pour le jeu. Le logo officiel Trackmania n'apparaît jamais dans la marque.

01.3

Zone de protection

Unité x : la hauteur du bloc TM. Rien n'entre à moins de x du logo, sur les quatre côtés.

Fig. 01.3Zone hachurée : marge minimale, égale à x.

01.4

Tailles minimales

En dessous de 26 px de corps, le TM devient illisible : passer à l'avatar.

64 pxtitres hors jeu

40 pxplaque des Reels

26 pxminimum, plaque en jeu

01.5

Versions

Le bloc TM reste magenta, sauf sur fond magenta où il s'inverse.

Sombrecrème sur encre ; version principale

Claireencre sur crème

Magentabloc inversé

twitch.tv/akotm

Plaquesignature des scènes

01.6

Avatar

Le bloc TM seul, sans le reste. Twitch et Instagram recadrent en rond : la marge est prévue pour.

TM

Principal200 px

TM

96

TM

48

TM

28

TM

Alternatiffond encre

01.7

Interdits

Le logo ne se redessine pas. Six erreurs à ne pas commettre.

01Redresser l'inclinaison.
02Incliner dans l'autre sens.
03Descendre le TM en indice.
04Changer la couleur du bloc.
05Étirer, ajouter ombre ou contour.
TRACKMANIA
06Associer le nom ou le logo du jeu.
02Couleurs

Magenta, encre, crème

Une couleur de marque, deux neutres, et un code de course emprunté à la F1. Chaque couleur a un sens ; aucune n'est décorative.

MagentaLa marque. Et à l'écran : Reel battu, meilleur secteur absolu.
HEX
#FF2D8A
RGB
255 45 138
Sur encre
5,7 : 1
EncreFonds, texte sur étiquette crème.
HEX
#0B0716
RGB
11 7 22
CrèmeTexte, étiquettes, damier. Jamais de blanc pur.
HEX
#F6F1E7
RGB
246 241 231
Sur encre
17,7 : 1
VertEn avance, record perso.
HEX
#2EE59D
RGB
46 229 157
Sur encre
12,1 : 1
AmbrePlus lent.
HEX
#FFB020
RGB
255 176 32
Sur encre
10,9 : 1
PanneauCadres des scènes, à 92 % d'opacité sur le jeu.
HEX
#1C1433
RGB
28 20 51
Panneau 92rgba(14, 9, 28, .92), le fond réel des cadres.
RGB
14 9 28
Alpha
0,92
GrisLibellés et texte secondaire.
HEX
#8A8398
RGB
138 131 152
Sur encre
5,5 : 1
DirectPastille LIVE, seulement.
HEX
#FF3B3B
RGB
255 59 59
FiletBordures de 2 px, crème à 14 %.
RGBA
246 241 231
Alpha
0,14
02.1

Proportions

À l'écran, hors image de jeu. Le magenta reste rare pour garder son poids.

Encre 56 %
Panneau 24 %
12
5

Fig. 02.1Crème 12 %, magenta 5 %, vert et ambre 3 % à eux deux.

02.2

Code de course

Repris de la F1 TV, avec une différence : le violet du meilleur absolu devient magenta.

-0.090
Meilleur absolu

Secteur plus rapide que le Reel et que tous ses essais. Reel battu.

-0.030
Meilleur perso

En avance sur la cible, nouveau PB.

+0.140
Plus lent

En retard. Jamais de rouge : le rouge est réservé au direct.

ContrasteMagenta sur crème : 3,1 : 1, trop faible pour du texte. Le magenta se pose sur l'encre, ou porte du texte encre.

03Typographies

Deux voix

Une police pour la marque, une pour l'interface et les chiffres. Les deux sont gratuites, sous licence OFL, sur Google Fonts.

Marque et titresRusso OneAaABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
Regular 400, seule graisse. Toujours en capitales. Logo, titres de scène, alertes.
ChiffresTitillium Web0:420123456789 +-.:
600, 700. Chiffres à largeur fixe d'origine. Tous les temps, deltas, rangs et compteurs, en chiffres à chasse fixe.
InterfaceTitillium WebAaAbcdefghijklmnopqrstuvwxyz éèàçôù
400 à 900. Libellés en 900 capitales, interlettrage 2 px ; chat et texte courant en 400 à 700.
03.1

Échelle

Relevée dans les scènes, en pixels du canevas 1920 x 1080 ou 1080 x 1920. Un seul chiffre héros par état.

Chiffre héros, ReelTitillium Web 700 ; 230 px
42.191
Titre hors jeuRusso One ; 54 px ; capitales
FIN DE SESSION
Temps d'arrivéeTitillium Web 700 ; 48 px
0:42.191
Delta en directTitillium Web 700 ; 46 px
-0.127
Cible du ReelTitillium Web 700 ; 38 px
0:42.318
Chat, classementTitillium Web 700 ; 17 px
mapperfou merci d'avoir crédité la map
ÉtiquetteTitillium Web 900 ; 13 à 15 px ; +2 px
Cible du Reel
03.2

Chasse fixe

Un chrono dont la largeur bouge fait trembler toute la scène. Chaque case qui contient un chiffre a une largeur fixe.

Oui ; Titillium Web
0:00.000

Cadre stabletous les chiffres ont la même chasse

Non ; Chakra Petch, chiffres proportionnels
0:00.000

Cadre instablele 1 est plus étroit que le 0

04Motifs et médailles

Habillage F1, arcade TMNF

La structure vient de la F1 TV : étiquettes inclinées, panneaux sombres, tableaux de temps. Le rétro TMNF arrive en touches : damier, chevrons.

MONDIALSummer 2026 - 07

Étiquette inclinée

Crème, texte encre en 900 capitales. Coupe droite de 10 px (12 px sur les en-têtes de 40 px).

14 px

Coin coupé

Tous les panneaux : coin bas gauche coupé à 14 px, filet de 2 px, ombre courte de 4 px.

Secteurs

Un bloc par checkpoint, écart affiché dedans. Se remplit par volet à chaque passage.

Damier

Cases de 28 px, crème et encre. Bande de 14 px en pied des scènes hors jeu. Jamais en fond plein.

Chevrons

Bandes magenta à 115°, 9 px pleins pour 20 px de pas. Signalent un mouvement ou une entrée.

115° ; 9 / 20 px
04.1

Médailles

Les paliers du jeu, redessinés pour la marque. Trois formes suffisent à les distinguer, même en 32 px.

Fig. 04.1Même dessin que la scène Chasse aux médailles. Jamais les médailles du jeu.

04.2

Signes d'interface

Géométriques, pleins, sans contour décoratif.

◀
▶
▲
▼
Inputs

Cases de 38 x 34 px. Allumées en crème.

2:14:08
Direct

Seul usage du rouge. Clignote en 1,6 s.

Reel battu
Drapeau

Le résultat tient dans une étiquette.

05Principes de mouvement

Volets, pas rebonds

Tout entre par un volet de gauche à droite et sort par la droite. Rapide, net, lisible en course. Rien ne distrait du chrono.

360ms
Entrée

Volet, alerte, bandeau d'arrivée.

280ms
Sortie

Plus courte que l'entrée.

240ms
Glissement

Ligne de chat, barre de delta.

90ms
Décalage

Entre deux éléments d'une même entrée.

05.1

Courbe

Une seule courbe pour tout : départ franc, arrivée douce.

0tempsprogression

cubic-bezier(.2, .8, .2, 1)

Jeton --ease dans scene/shared/ak.css.

--ease
linéaire
05.2

En boucle

Les mêmes images clés que dans les scènes.

REEL
BATTU
0:42.191

Volet d'arrivée

Entre en 360 ms, tient 5 s en scène, sort en 280 ms.

wipe ; wipeOut
Nouvel abonné
nightrider

Alerte

Glisse de 60 px depuis la droite, tient 3,5 s.

slideIn ; slideOut
-0.127

Delta

Couleur en 160 ms, barre en 240 ms, centrée sur zéro.

transition color ; left ; width
06Voix et sons

Peu de mots

Le chiffre parle en premier. Les mots le cadrent, en français, courts, sans effet.

01

« Il dit 42.318. »

Une phrase, un fait. Le temps du Reel suffit comme accroche.

02

« Je le refais, en direct. »

La promesse tient en une ligne, sans superlatif.

03

« Reel battu. »

Le résultat, en deux mots, dans l'étiquette.

Français accentuéAucun emojiAucun tiret cadratinPas de superlatif
En production

Palette sonore originale : départ, checkpoint, arrivée, Reel battu. Aucun son repris du jeu.

07Scènes Twitch

Scènes OBS

Canevas 1920 x 1080, sources navigateur dans OBS. Chaque scène tourne ici en boucle ; les boutons figent un état.

07.1

En jeu

Une scène par format de stream. La colonne droite (caméras, inputs, données, plaque) ne bouge jamais d'une scène à l'autre.

07.2

Hors jeu

Démarrage, pause, discussion, fin. Fond encre, halo magenta, damier en pied.

Fond de jeu : capture réelle de Trackmania, maquette seulement, jamais publiée. Caméras : photo de mise en situation.

08Reels Instagram 9:16

Trois étages

Visage, jeu, manette. Un Reel à trois étages se reconnaît dans le fil avant même d'être lu.

Visage480 px
Jeu960 px
Manette480 px

Canevas 1080 x 1920. Mêmes cotes que la mise en page du pipeline de clipping (tools/clipper/layouts/default.json) : ce qui est validé ici est ce qui sort du rendu.

Zones sûres d'Instagram : aucun texte au-dessus de y 250 ni sous y 1520. Seules les caméras et la barre de progression y entrent.

Sous-titreskaraoké, 64 px capitales, deux lignes au plus.

09Interactions et dons

Le chat joue aussi

Questions, paris, votes, alertes, objectif commun. Tout se déclenche depuis le chat : aucune interaction ne demande un geste à la streameuse.

Conception en cours : docs/03-interactivite.md. Scènes brand/scene/interact-*.html.

10Programme et données

Un rendez-vous fixe

Le dimanche appartient aux Weekly Shorts. Le reste se place autour, selon le rythme qu'AKO TM peut tenir.

1 fois par semaine
Le Reel

Un temps vu en Reel, tenté en direct, comparé au classement officiel.

Chaque dimanche
Dimanche Shorts

Les 5 Weekly Shorts. Classement révélé en fin de semaine.

Libre
Chasse aux médailles

Une map, un objectif : or, auteur, champion.

1 fois par semaine
Map de viewer

Proposée par le chat, mapmaker crédité.

Occasionnel
Classiques TMNF

A01 et maps culte.

À valider avec AKO TM : nombre de streams par semaine et jours. Seul le dimanche est fixé.

10.1

D'où vient le chiffre

Chaque chiffre affiché a une source identifiable.

DonnéeOù à l'écranSourceÉtat
Temps cible du Reel, delta en directHaut centre ; colonne droiteTemps saisi + collecteur maison (tools/game-data) sur Openplanet Data SenderPrototype, jamais exécuté contre le jeu
Splits par checkpoint, secteursColonne droiteData Sender, flux player_cp_infoPrototype
InputsSous la caméra manettePlugin Dashboard, ou Data Sender vehicle_statePlugins existants
PB et médaillesColonne droite ; classementUltimate Medals ; API NadeoPlugins existants
Classement mondial, top 5Tour à gauche, à la place du widget Records natif repliéAPI NadeoÀ brancher
Essais de la sessionBarre de sessionGrinding Stats, ou comptage sur race_dataPlugins existants
Uptime, follows, abonnés, dons, objectifBarre de session ; alertesTwitch, via Streamer.bot (proposé)À choisir
Chrono, vitesseHUD natif du jeu, jamais recouvertTrackmaniaNatif

Openplanet édition Club requise pour Data Sender, plugin non signé. À confirmer avec AKO TM.

11À faire, à ne pas faire

Trois règles dures

Elles valent pour chaque scène, chaque Reel, chaque visuel.

OuiLe chrono et la jauge du jeu restent libres.
NonUn panneau recouvre le HUD natif.
-0.127PB 0:42.628
OuiUn seul chiffre héros par état.
-0.1270:42.191
NonDeux chiffres qui se disputent l'œil.
Reel battu
OuiTexte encre sur magenta : 5,7 : 1.
REEL BATTU
NonMagenta sur crème : 3,1 : 1.
À faire
  • Un seul langage de cadre par scène : panneau à coin coupé et étiquette crème.
  • Largeur fixe pour toute case qui contient un chiffre.
  • Caméra manette à cheval sur le coin bas gauche de la caméra visage, sans étiquette ni commentaire.
À éviter
  • Coins arrondis, ombres floues, dégradés sur les panneaux.
  • Damier ou chevrons derrière un chiffre.
  • Reprendre les médailles ou le HUD du jeu tels quels.
12Vidéo de révélation

En mouvement

La charte en 30 secondes : départ, logo, couleurs, programme, interactions. Le format qui présente la marque à la communauté.

En production

video/akotm-reveal.mp4

Fig. 12.1Lecture muette en boucle ; le son se lance depuis le lecteur.

13Téléchargements et crédits

Le kit

SVG, PNG
Logos

Versions sombre, claire, magenta ; avatar.

À venir
CSS
Jetons

scene/shared/ak.css : couleurs, polices, durées.

Disponible
HTML
Scènes OBS

Sources navigateur, 1920 x 1080.

À venir
Marque

AKO TM, streameuse Trackmania.

Identité conçue pour elle et avec elle, septembre 2026.

Polices

Russo One, Jovanny Lemonad.

Titillium Web, Accademia di Belle Arti di Urbino.

SIL Open Font License, via Google Fonts.

Données

Openplanet. Data Sender (ar), Dashboard (Miss), Ultimate Medals (Phlarx, Miss), Grinding Stats (Drek). API Nadeo.

Mentions

Trackmania est une marque d'Ubisoft Nadeo. AKO TM n'est ni affiliée ni soutenue par Ubisoft.

Captures de jeu : maquette seulement, jamais publiées.

Animations : GSAP.

Charte graphique ; v1 de forme ; 30.09.2026