Comment Trailwise se présente, parle et bouge

Logo et logotype

Le symbole est tranché. Ascent, adopté le 31 août 2026 : trois pans coupés à 17,5 degrés, le même angle que le chanfrein des boutons. Les deux du fond sont des foulées déjà courues et portent l’encre, celui de devant porte le turquoise. Deux valeurs, et rien dans le dessin de plus petit qu’un pan, et c’est pour ça qu’il tient à 16px là où le dessin qu’il remplace ne tenait pas. Il succède à la montagne du Field Guide, qui n’a jamais dépassé le stade de « proposition » sur cette page.

Le logotype, et ce seul mot en turquoise

Space Grotesk 500 à −0.05em, en bas de casse. « trail » est en encre et « wise » en turquoise, sur clair comme sur sombre. C’est la seule exception à la règle qui veut que le turquoise soit un aplat et jamais un mot, et cette exception ne voyage pas : un titre en turquoise reste une faute. Les WCAG exemptent le texte de logotype des règles de contraste, mais le rapport est de 2,5:1 sur blanc et 2,0:1 sur la bande sky, et c’est pour ça que le logotype a un plancher. 24px de hauteur de capitale sur blanc, 28px sur sky. En dessous, utilise le symbole seul. Le logotype et les deux blocs-marques sont livrés vectorisés plutôt qu’en texte vivant, donc ils s’affichent correctement sans aucune police installée : e-mail, PDF, impression.

Zone de protection et taille minimale

La zone de protection sur tous les côtés vaut la largeur d’un pan, 12 unités sur la grille de 72. En dessous de 24px sur un fond uni, utilise le dessin de favicon : deux pans redessinés plus épais, et non le symbole réduit. Sur la tuile encre, les trois pans restent séparés jusqu’à 16px, et c’est ce qu’utilisent l’onglet du navigateur et l’icône d’application.

Couleur

L’encre et le papier font le travail. Le turquoise est le seul accent, et c’est un aplat, jamais un mot : à 2.5 sur du blanc, il échoue comme texte à toutes les tailles. Là où le turquoise doit être lu, il devient turquoise foncé. Le ciel sépare une section de la suivante et n’occupe jamais une page entière.

Séries de graphique · à attribuer dans cet ordre, jamais en boucle

Validées sur fond blanc pour la clarté, le chroma, la séparation en vision des couleurs et le contraste. Les huit sont sûres là où les séries se côtoient, comme dans les courbes et les barres. Dans un nuage de points ou une série de petits graphiques, où n’importe quelle paire peut se rencontrer, seules les trois premières tiennent ; au-delà de trois, regroupe dans Autre ou fais des facettes.

Séquentiel et divergent

Typographie

Deux familles, et la séparation est stricte. Space Grotesk à −0.05em est pour tout ce qui parle. Noto Sans à +0.02em est pour tout ce qui explique. La hiérarchie vient de la taille et de la graisse, jamais d’une troisième fonte. L’emphase se fait par la graisse ou la couleur, jamais par l’italique.

Le surligneur

Tokens

Les conteneurs sont ronds, les contrôles sont carrés, et le contraste entre les deux fait le style. N’arrondis pas les contrôles et ne rends pas les cartes anguleuses.

Boutons

Un chanfrein en haut à gauche sur toute la hauteur, pour que le contrôle penche dans la direction où va tout le reste. Une seule action principale par vue. Le survol creuse l’encoche au lieu d’échanger une couleur, et c’est le seul endroit du site où un survol est un geste plutôt qu’un changement d’état.

Badges et statuts

En capitales, avec interlettrage, carrés. Quatre couleurs de statut réservées qui ne deviennent jamais une série de graphique. Une couleur de statut ne porte jamais le sens à elle seule : elle arrive toujours avec un point ou un mot.

Formulaires

Les labels sont toujours visibles, composés en micro-typographie capitale au-dessus du champ. Les indications sont permanentes plutôt qu’affichées en cas d’erreur. Les champs sont carrés, hauts de 54px, et le focus est un anneau turquoise de 3px à 1px de décalage.

Données et télémétrie

Les chiffres sont composés dans la fonte display avec des chiffres tabulaires, pour qu’une colonne se compare de haut en bas au lieu de se décaler. Chaque signal calculé porte son niveau de confiance, et un signal qui tourne sur peu de données le dit, au lieu de produire un chiffre plausible. Ce dernier point est la seule pièce de ce système qu’aucune autre marque n’a.

Mouvement

Une seule courbe d’easing et deux durées. Le mouvement piloté par le défilement écrit une seule propriété personnalisée par frame sur un élément de scène et laisse CSS faire le reste, jamais un écouteur par élément. Les signatures sont la pile de cartes qui remonte dans la bande, l’escalier qui révèle une marche à la fois puis sort vers la gauche, et l’éventail qui s’ouvre sur une fraction de défilement.

Photographie

Du vrai trail et de la vraie météo, jamais de l’athlétisme de banque d’images. L’imagerie hero s’imprime dans un seul bleu : la photographie fournit la luminance et --ws-duo fournit la teinte, si bien qu’une forêt brumeuse et une piste d’athlétisme finissent dans le même monde. Partout ailleurs, l’imagerie de preuve garde sa propre couleur, parce qu’un graphique de tes propres données ne devrait pas être stylé.

Voix

Expert et direct. Adresse directe à la deuxième personne, phrases courtes mêlées à des plus longues, du concret plutôt que de l’abstrait. Nous expliquons le raisonnement derrière chaque décision et nous énonçons la limite au lieu de la cacher. Là où nous ne savons pas, nous le disons, parce qu’un signal auquel tu as discrètement appris à ne plus te fier ne changera rien à ce que tu feras le jour où ça compte.

À faire et à ne pas faire

Téléchargements

Le système sous forme de page à lire, de feuille de style à lier, et de tokens en données. La charte de marque est la référence ; la feuille de style est ce qu’un outil interne devrait utiliser plutôt que de réimplémenter tout cela.