Trevarn — Charte Graphique

La Marque

Système de marque, variantes et spécifications d'utilisation

La marque Trevarn est une ligne continue unique traçant trois formes de pierres ascendantes. Cette page documente le système de marque : variantes primaire et secondaire, traitements de fond, simplifications pour petites tailles, et le favicon. Pour l'histoire derrière la marque, voir Origines de la Marque.

Janvier 2026  ·  Spécification finale
TREVARN
Marque primaire : Contour continu, 2% de désordre, Aour Glaz

Marque Primaire — Contour Continu

La Référence

La marque primaire Trevarn est un contour continu avec 2% de désordre. C'est la référence pour tous les usages standards : site web, documents, présentations, interface produit, signalétique.

Elle fonctionne à toute taille supérieure à 24px. Elle est sobre, professionnelle et polyvalente. La ligne continue souligne la nature unifiée des trois pierres — un système, un chemin, une marque.

TREVARN
Aour Glaz — Primaire
TREVARN
Aour Balan
TREVARN
Lin Violet

Usage de la Marque Primaire

Utilisez le contour continu comme marque par défaut. Elle fonctionne sur fonds blancs, sombres et colorés. Taille minimale : 24px de hauteur. Couleur préférée : Aour Glaz sur fonds clairs, blanc sur fonds sombres.

Primaire Contour 2% Désordre

Marque Secondaire — Contour Hachuré

Pour Contextes Éditoriaux et Expressifs

Pour les contextes éditoriaux et expressifs — sections hero, en-têtes de blog, campagnes de marque, supports imprimés — la variante hachurée ajoute texture visuelle et poids. Chaque pierre a un angle de hachure unique (43°, 48°, 41°) qui renforce son inclinaison individuelle.

Quand l'utiliser : Quand vous souhaitez plus de présence visuelle que le contour simple. Quand le contexte est expressif plutôt que fonctionnel. Quand la marque sera affichée à 48px ou plus.

Quand NE PAS l'utiliser : En dessous de 48px (les hachures deviennent du bruit). Dans les contextes d'interface où la simplicité prime. Mélangée avec la version contour dans la même mise en page — choisissez l'une ou l'autre.

TREVARN
Aour Glaz — Hachuré
TREVARN
Aour Balan — Hachuré
TREVARN
Lin Violet — Hachuré

Usage de la Marque Secondaire

Utilisez la variante hachurée pour les contextes éditoriaux/expressifs où vous souhaitez plus de poids et de texture visuels. Chaque pierre a un angle de hachure unique (43°/48°/41°) et une densité qui renforce son caractère individuel. Taille minimale : 48px de hauteur.

Secondaire Hachuré Éditorial

Traitements de Fond

La marque primaire s'adapte à tous les fonds standards.

TREVARN
Sur blanc — par défaut
TREVARN
Sur Ink — mode sombre
TREVARN
Sur Aour Glaz
TREVARN
Sur Sand — chaud/print
TREVARN DIFENN
Lockup produit Difenn — empilé
TREVARN DIFENN
Lockup produit Difenn — sombre

Marque Simplifiée — Petites Tailles

Pour favicon, icône d'application, et contextes en dessous de 32px où la ligne de base de connexion serait illisible. Mêmes proportions distinctes des pierres, maintenant sous forme de trois polygones fermés séparés.

Contour Glaz
Contour Balan
Sur Ink
Hachuré Glaz
Hachuré Ink
Sur Glaz

Favicon — Remplissage Plein

À l'échelle de l'onglet navigateur (16–32px), même les polygones contour simplifiés perdent en lisibilité. Le favicon utilise des pierres en aplat pour maintenir la reconnaissance aux plus petites tailles.

64px — aperçu
32px — favori
16px — onglet navigateur
32px — mode sombre

Pourquoi le Remplissage Plein ?

La marque primaire utilise un trait de 1.8px à l'échelle du viewBox — rendue à 16px de large dans un onglet navigateur, ce trait devient sub-pixel et disparaît. Le remplissage plein préserve la silhouette des trois pierres à toute taille, échangeant la qualité dessinée contre une pure reconnaissance.

La transition du contour au plein reflète la façon dont le système de marque se dégrade gracieusement : contour continucontour discretplein discret. Chaque étape simplifie tout en conservant le rythme essentiel des trois pierres.

Référence SVG du Favicon

<svg viewBox="0 0 64 38" xmlns="http://www.w3.org/2000/svg">
  <polygon points="2.3,34.1 4.8,16.2 11.2,13.5 13.8,34.5" fill="#4A6FA5"/>
  <polygon points="17.5,33.5 23.2,4.8 28.8,6.5 34.5,34.2" fill="#4A6FA5"/>
  <polygon points="37.2,33.8 43.8,2.8 56.2,0.5 62.5,34.8" fill="#4A6FA5"/>
</svg>

Fichier : favicon.svg — référence via <link rel="icon" type="image/svg+xml" href="/favicon.svg"> sur toutes les pages.


Spécifications Verrouillées

Élément Spécification Notes
Marque primaire Contour continu, 2% désordre Par défaut pour tout usage. Minimum 24px de hauteur.
Marque secondaire Continu hachuré, 2% désordre Contextes éditoriaux/expressifs. Minimum 48px de hauteur.
Marque simplifiée Polygones contour discrets Contextes sous 32px où la ligne continue est illisible.
Marque favicon Polygones plein discrets Onglet navigateur, favoris, icône PWA. Sous 32px, plein uniquement.
Niveau de désordre 2% Sommets décalés de 0.5-1.0 unités des positions mathématiques.
Épaisseur de trait 1.8px (contour), 1.2px (contour hachuré) Au viewBox standard 0 0 320 38.
Angles de hachure Pierre 1 : 43°, Pierre 2 : 48°, Pierre 3 : 41° Angle unique par pierre renforce le caractère individuel.
Couleur primaire Aour Glaz #4A6FA5 Sur fonds clairs. Blanc sur fonds sombres.

Utiliser le Contour Quand :

  • Par défaut pour tous les contextes
  • En-têtes et navigation de site web
  • Documents et présentations
  • Interface produit et UI
  • Toute taille à partir de 24px

Utiliser les Hachures Quand :

  • Sections hero et pages d'accueil
  • En-têtes de blog et éditorial
  • Campagnes de marque et publicité
  • Supports imprimés où la texture aide
  • 48px ou plus uniquement

Référence SVG — Marque Primaire

<polyline points="2.3,34.1 4.8,16.2 11.2,13.5 13.8,34.5 17.5,33.5 23.2,4.8 28.8,6.5 34.5,34.2 37.2,33.8 43.8,2.8 56.2,0.5 62.5,34.8"
  stroke="#4A6FA5" stroke-width="1.8" fill="none"
  stroke-linecap="round" stroke-linejoin="round"/>

ViewBox : 0 0 64 36 (marque seule)  |  0 0 320 38 (avec logotype)