Charte TERO GROUP Tokens Télécharger les actifs
tero

Charte graphique
TERO GROUP

La maison mère de Tero Hospitality, Tero Leisure et Tero Sport Events — et de ses vingt marques. Un seul système, décliné sans se dissoudre.

live. share. reconnect.

Version 2.0 — 15 octobre 2026536 feuilles de style mesurées6 291 occurrences de couleur4 experts + Claude Design + GPT

01 — Manifeste

Une marque qui rassemble,
un système qui tient

Tero réunit des lieux, une table, des clubs et des événements sportifs. Cette charte ne réinvente rien : elle mesure ce qui existe, le fixe, et le rend déclinable par chaque marque du groupe.

164

valeurs de couleur distinctes sur le site actuel — 2,0 % seulement pour les couleurs déclarées

30

tailles de texte différentes, sans rampe

15+

rayons d'angle, de 0 à 999 px

0

favicon, manifeste ou theme-color avant cette charte

17

lieux d'exception

25 ans

d'expertise événementielle

~125

personnes

2020

création du groupe

se reconnecter

Quatre valeurs, jamais négociées : la passion, l'engagement, le respect, l'authenticité.

02 — Architecture

Maison mère → piliers → marques

Un nom de domaine n'est pas une architecture de marque. Quatre relations, aucune improvisation — et tant qu'un lockup n'est pas dessiné par le studio, la seule forme valide est textuelle.

Tero Hospitality

Lieux · team building · traiteur Teroir · restaurants

#007864 5,43:1 — texte autorisé

Tero Leisure

Clubs et académies : padel, tennis, bien-être

#004B69 9,50:1 — texte autorisé

Tero Sport Events

Événements sportifs, courses, consultance

#B93815 5,77:1 — texte autorisé

Les quatre relations d'endossement

RelationMarquesFormeStatut du lockup
PilierHospitality · Leisure · Sport EventsLockup : monogramme + nom du pilier (Almarose 600)à dessiner
Marque forte endosséeTero Padel Club · Tero Studio · Tero Lodges · TeroirLogo propre + filet + « un club / un lieu Tero [Pilier] »à dessiner
Marque autonome nominativeKnokke Out · Bistro Pilko · Bistro 17 · Garisart · River WoodsMention pied de page « Un lieu du groupe Tero — tero.be »textuel, applicable
Co-marque encadréeImmorun × IMMOBEL · BPP26 × Lotto/CBC · Batirun × FRANKIFilet vertical, hauteurs optiques égales, ordre contractuelà dessiner

Les huit lockups sont briefés et chiffrés en multiples de X (X = diamètre de l'anneau du o) dans le document de référence — c'est un travail de studio, pas d'intégrateur.

04 — Couleur

Une hiérarchie,
pas un nuancier

Sept couleurs simultanément disponibles partout produisent un nuancier, pas une identité. Ici, chaque couleur a un niveau et un rôle — et seules trois d'entre elles peuvent porter du texte sur fond clair.

Démonstrateur — changez de pilier

Aa

L'accent de pilier s'applique au sur-titre, aux liens et aux filets — jamais à la typographie, la grille, les rayons ni les états de formulaire.

Un titre de pilier en accent

La couleur de pilier passe AA en texte (5,43 à 9,50:1) : c'est la raison pour laquelle ces trois-là ont été choisies.

Bouton de pilier

Trois variables suffisent : accent, accent-survol, encre sur accent.

Neutres — 77 % des occurrences mesurées

#000000

Encre
texte, aplats profonds
21:1

#FFFFFF

Blanc
fond principal
—

#F6F4F4

Surface
fond de section
—

#D9D9D9

Filet
séparateurs décoratifs
1,41:1

#323232

Encre douce
texte secondaire
12,82:1

#B9B9B9

Désactivé
désactivé uniquement
1,96:1

#5F5F5F

Texte discret
libellés, placeholders
6,39:1

#767676

Bordure de champ
tout contrôle
4,54:1

Sept couleurs de marque — les seules autorisées

#007864

Teal
institutionnel · Hospitality
5.43 sur blanc texte autorisé

#004B69

Pétrole
pilier Leisure
9.5 sur blanc texte autorisé

#B93815

Terracotta
pilier Sport Events
5.77 sur blanc texte autorisé

#FAD282

Sable
campagne · aplat
1.44 sur blanc aplat seulement

#D7B4B4

Rose poudré
campagne · aplat
1.9 sur blanc aplat seulement

#00B7FF

Cyan
campagne · aplat
2.28 sur blanc aplat seulement

#FF1D58

Rose vif
accent rare
3.77 sur blanc aplat seulement

Famille A — texte blanc autorisé

Teal, pétrole, terracotta : ils portent du texte blanc en aplat et du texte sur fond clair.

Famille B — texte noir obligatoire

Sable, rose poudré, cyan, rose vif : aplats uniquement, jamais une couleur de texte sur fond clair (1,44 à 3,77:1), jamais un état.

Dérives et cas tranchés

FamilleValeursDécision
Accents de sous-marques#2B4336 Trail · #263062 Immorun · #C0001E Batirun · #183F3C Impactrun · #AAC440 Garisart · #A56933 BPP26 · #FF2E82 et #E9F44E Padel · #7C8F7A Studio · #575756 Build&RunLégitimes, scellés à leur domaine. Un accent sur un second domaine est une dérive.
Dérives à résorber#B00000 · #680224 · #550D24 · #B8451F · #8BB169 · #5E93A7 · #D9EAD3 · #FFF5E5 · #F0E6D7 · #DACEC7 · #D5E9F1 · #F9F4EC · #FF4A4AJamais reproduites. Remplacées par un neutre ou l'accent du niveau concerné.
#97AB83 (sauge, 620 occ.)3ᵉ couleur du site, jamais déclarée · 2,48:1 sur blancHors charte. Ce n'est pas la sauge de Tero Studio (#7C8F7A) : deux couleurs différentes.

05 — Typographie

Almarose, cinq graisses
et un script d'accent

Une seule famille pour tout le groupe. Une graisse n'est autorisée que si son fichier existe : 400 · 500 · 600 · 700 · 900. Le 800 est interdit — aucun fichier, donc faux gras synthétique.

tero Aa Bb Cc 0123

400 · Regular — corps de texte, 1 039 occurrences de 15 px sur le site

tero Aa Bb Cc 0123

500 · Medium — titres secondaires, libellés

tero Aa Bb Cc 0123

600 · Semibold — emphase, boutons, sur-titres

tero Aa Bb Cc 0123

700 · Bold — titres

tero Aa Bb Cc 0123

900 · Extrabold — display et chiffres

se reconnecter

WildYouth · script d'accent — un seul mot par page, jamais en titre principal, sable sur fond profond ou teal sur fond clair, ≤ 32 px.

La rampe — aucune taille hors rampe

Display80 pxaccueil uniquement
Titre L50 pxtitre de page
Titre M32 pxtitre de section
Titre S25 pxtitre de carte
Chapô18 pxintroduction
Corps16 pxtexte courant
Meta14 pxmentions, dates
Label12 pxsur-titres, majuscules espacées

Règles

  • h1 600–700 · h2 500–600 · h3 500 · corps 400 · emphase 600 · display 700–900
  • Interlignage 1,02–1,25 sur les titres, 1,6–1,7 sur le corps
  • lettrage −0,015em sur les titres, +0,18em sur les sur-titres
  • Mesure de lecture : 58 caractères (chapô), 62 maximum (FAQ)
  • Accents français obligatoires — « Reserver » disqualifie la page

Interdits

  • Une serif éditoriale en titre principal
  • Une taille hors rampe
  • Une graisse 800 sur Almarose
  • Plus d'un mot en WildYouth par page
  • Deux familles dans un même titre

06 — Iconographie

Le paquet d'icônes

Avant cette charte : ni favicon SVG, ni manifeste, ni theme-color, et un PNG de 32 px servi comme icône 192 px et comme apple-touch-icon. Le paquet est compilé et vérifié.

favicon.svgvectoriel
favicon-16.png16 px
favicon-32.png32 px
favicon-48.png48 px
favicon.ico16/32/48
apple-touch-icon-180.png180 px
icon-192.png192 px
icon-512.png512 px
icon-maskable-512.pngmaskable
safari-pinned-tab.svgSafari
avatar-tero-mono-square.png512 px

À poser dans le head

<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon-180.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#007864">

Règle d'icône d'application

  • Carré 1:1, monogramme à 70 % de la hauteur (maskable : 55 %)
  • Aucun rx dans le fichier : le rayon vient du masque du système
  • Zone sûre : 15 % de marge par côté
  • Nommage : tero-icon-<variante> · icon-<taille>.png

07 — Composants

Des composants vivants,
pas des captures

Tout ce qui suit est le vrai CSS de la charte. Cibles 44 px, focus visible, contrastes calculés.

Les trois rôles du bouton d'action

Votre événement avec Tero
Primaire — encre, usage mesuré (21:1)
Demander un devis
Secondaire — accent de pilier (5,43 à 9,50:1)
Réserver
Bande profonde — sable, texte noir (14,61:1)

Interdits : texte blanc sur sable, cyan ou rose poudré · texte sur rose vif (3,77:1) · focus sans anneau.

Anneau dépendant du champ + halo de séparation
Placeholder — #5F5F5F, 6,39:1
Champ en erreur — terracotta + icône + libellé
Un état ne passe jamais par la couleur seule

Bande profonde, chiffres, cartes

17

lieux

50+

activités

48 h

délai de réponse

25 ans

d'expertise

Le titre porte la carte

Filet de 1 px ou espace — jamais fond + bordure + rayon + ombre.

FAQ

Combien de participants ?+
Peut-on dormir sur place ?+

Réponse ≤ 62 caractères de mesure.

Passage citable

« Tero Group est un groupe belge d'hospitalité, de loisirs et d'événements sportifs : 17 lieux, un traiteur farm to fork et 25 ans d'expertise. »

Une phrase-réponse autonome par section — c'est ce que citent les moteurs de réponse.

08 — Photographie

De vraies photos,
un voile mesurable

Jamais une photo de stock générique, jamais la photo d'un lieu attribuée à un autre. Le logo sur photo n'est lisible que si le fond est assez sombre : ≤ #767676 derrière le logo, ≤ #949494 derrière le seul signe.

Événement Tero en extérieurtero

Règles

  • Photo pleine largeur, être humain au premier plan quand c'est possible
  • Traitement neutre : pas de filtre coloré, pas de vignettage lourd
  • Ratios : 16/10 (héros), 4/3 (carte), 1/1 (portrait d'équipe)
  • Formats : AVIF puis WebP, srcset + sizes, width/height déclarés
  • Voile dégradé #0D1F30 à 82 % en bas, pour asseoir le logo blanc

Interdits

  • Banque d'images génériques
  • Logo noir sur photo
  • Logo blanc sans voile sur une zone claire
  • Photo d'un autre lieu du groupe

09 — Déclinaison

Une base,
des accents scellés

Une sous-marque surcharge un accent et une imagerie. Jamais la typographie, la grille, les rayons, les états ni le focus. Un accent qui apparaît sur un second domaine est une dérive, même documenté.

MarqueAccent mesuréSur blancLogoRelation
Tero Padel Club
teropadelclub.be		#FF2E823,52:1à documenterMarque forte — pilier Leisure
Tero Studio
terostudio.be		#7C8F7A3,46:1Marque forte — pilier Leisure
Garisart Sports Club
garisartsportsclub.be		#AAC4401,97:1Autonome nominative
Teroir
tero.be/traiteur		#007864≥ 6:1Marque forte — Hospitality
Immorun
immorun.be · immorun.lu		#263062≥ 6:1Événementielle autonome · co-marque IMMOBEL
Batirun
batirun.be		#C0001E≥ 6:1Événementielle autonome · co-marque FRANKI
Brussels Premier Padel
brusselspremierpadel.be		#A569334,50:1Événementielle autonome · co-marque Lotto/CBC
Tero Trail
terotrail.be		#2B4336≥ 6:1Événementielle autonome

Aucun accent ne fonctionne à la fois comme texte sur blanc et comme aplat à texte blanc : un thème a besoin de trois variables d'accent. Tero Studio (3,46:1) et Garisart (1,97:1) n'ont pas d'accent texte — leurs liens passent par l'encre soulignée.

10 — Mouvement

Le mouvement passe
dans l'image

Jamais dans la boîte. Pas de translateY qui saute, pas d'ombre qui s'intensifie. Les apparitions de cette page sont faites en CSS pur, avec animation-timeline: view() — aucun JavaScript, aucun observateur.

Durées

140 ms (micro) · 200 ms (standard) · 240 ms (panneau) · 380 ms (transition de page) · 680 ms (entrée éditoriale)

Courbes

cubic-bezier(.23,1,.32,1) en entrée · cubic-bezier(.77,0,.175,1) en aller-retour · cubic-bezier(.32,.72,0,1) pour un ressort doux. Aucun ease écrit à la main.

Limites

  • On n'anime que opacity et translate/scale
  • Zoom photo ≤ 1,03 au survol
  • Toujours un repli statique sous prefers-reduced-motion
  • Le contenu est lisible sans JavaScript

11 — Tokens

La source de vérité

Cliquez sur un jeton pour le copier. Ces valeurs sont mesurées : on ne les arrondit pas, on ne les « modernise » pas.

JetonValeurRôle
--tero-black #000000primitive de marque
--tero-white #FFFFFFprimitive de marque
--tero-surface #F6F4F4primitive de marque
--tero-line #D9D9D9primitive de marque
--tero-ink-soft #323232primitive de marque
--tero-muted #B9B9B9primitive de marque
--ui-fg-muted #5F5F5Fneutre fonctionnel
--ui-border-strong #767676neutre fonctionnel
--tero-teal #007864primitive de marque
--tero-petrol #004B69primitive de marque
--tero-terracotta #B93815primitive de marque
--tero-sand #FAD282primitive de marque
--tero-rose #D7B4B4primitive de marque
--tero-cyan #00B7FFprimitive de marque
--tero-pink #FF1D58primitive de marque
--deep-band #0D1F30bande profonde

Le contrat en 12 lignes

/* charte.tero.be — socle */
:root{
  --bg:#fff; --surface:#f6f4f4; --fg:#000;
  --muted:#5f5f5f; --border:#d9d9d9;
  --accent:#007864; --accent-ink:#fff;
  --pillar:#007864; /* surchargé par data-pillar */
  --focus:2px solid #000;
  --r-pill:999px; --tap:44px;
}
[data-pillar="leisure"]{--pillar:#004b69}
[data-pillar="sport-events"]{--pillar:#b93815}

Tokens prêts à l'emploi

Le fichier design-tokens.json contient les trois couches (primitives, sémantique, composants) et le registre des accents de sous-marques. tokens.css contient le CSS correspondant, y compris les thèmes de pilier et le mode sombre.

Télécharger design-tokens.json

12 — Gouvernance

Ce qui est figé,
ce qui reste à faire

Figé et opposable

  • Le mot-symbole tero en minuscules et le monogramme (le glyphe o)
  • Les 8 neutres et les 7 couleurs de marque — aucune autre valeur
  • Almarose 400/500/600/700/900 — le 800 est interdit
  • La rampe typographique (8 paliers) et les 3 rayons
  • La hiérarchie couleur à trois niveaux + les 3 accents de pilier
  • La signature live. share. reconnect. et les 4 valeurs
  • La hiérarchie maison mère → pilier → marque

Tranché le 15 octobre 2026

  • Sauge #97AB83 : hors charte (dérive) — Tero Studio garde #7C8F7A
  • Un accent par pilier, sur une base unique
  • Endossement : 2 niveaux + autonome nominatif + co-marque encadrée
  • WildYouth conservée, un seul mot par page
  • Aucune variante « sans barre » sous le o
  • CTA : noir en primaire, teal en secondaire, sable en bande profonde
  • Neutres de lisibilité #5F5F5F et #767676 adoptés
  • Mode sombre : complet ici, pas encore sur tero.be

Checklist avant livraison

  • Le fichier de logo vient du registre, jamais d'une capture d'écran
  • Seules les couleurs des niveaux autorisés apparaissent
  • Chaque couple texte/fond a un contraste calculé ≥ 4,5:1 (≥ 3:1 pour ≥ 24 px ou ≥ 18,66 px en 700)
  • Les tailles appartiennent à la rampe ; aucune graisse 800
  • Trois rayons maximum, filets de 1 px, cibles 44 px
  • La page affiche son rattachement au groupe (pilier + lien tero.be)
  • Aucun fait, chiffre ou prix sans source
  • JSON-LD : WebPage, une seule Organization, logo = mot-symbole
  • hreflang réciproque FR/NL/EN + x-default
  • Captures aux largeurs 320 / 360 / 390 / 768 / 1024 / 1440

Ce qui reste à faire

Studio

Les 8 lockups d'endossement (brief chiffré en X). Sans eux, l'endossement reste textuel.

Production

Déployer le paquet d'icônes, corriger le JSON-LD, résorber les dérives couleur, migrer la sauge.

Contenu

Fiches des 17 lieux (adresses, capacités), réseaux sociaux officiels, arbitrages de traduction NL/EN.