# Challenge design — GPT (Codex CLI local, modèle gpt-5.6-sol) > Exécuté le 15 octobre 2026 via `codex exec` dans un `CODEX_HOME` isolé (sans agents, sans hooks, sans MCP), en bac à sable lecture seule. Prompt : `_work/brief-gpt.md`. > **Verdict de GPT : non présentable au client comme charte finale en l'état — présentable comme diagnostic et base de convergence.** --- codex Je vais confronter la charte aux métriques de l audit, au système de tokens et aux variantes réelles du logo. J utilise la compétence `audit` parce que la demande porte précisément sur une critique structurée et priorisée d un design system existant. 2026-10-15T17:27:55.787678Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe\\\" -Command \\\"Get-Content -Raw 'C:\\\\\\\\Users\\\\\\\\NicolasSimon\\\\\\\\.agents\\\\\\\\skills\\\\\\\\ccg\\\\\\\\impec cable\\\\\\\\audit\\\\\\\\SKILL.md'\\\"` rejected: blocked by policy\")" } codex La compétence `audit` est hors du périmètre de lecture autorisé dans cette session, donc je poursuis avec sa finalité audit critique et priorisation sans pouvoir charger ses consignes locales. Je lis maintenant l intégralité des documents fournis et l inventaire des logos. 2026-10-15T17:28:02.110968Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe\\\" -Command \\\"Get-Content -Raw 'docs\\\\\\\\design\\\\\\\\00-SYNTHESE-EXPERTS.md'\\\"` rejected: blocked by policy\")" } 2026-10-15T17:28:02.111029Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe\\\" -Command \\\"Get-Content -Raw 'docs\\\\\\\\AUDIT-TERO-BE-2026.md'\\\"` rejected: blocked by policy\")" } 2026-10-15T17:28:02.117955Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe\\\" -Command \\\"Get-Content -Raw '.open-design\\\\\\\\plugins\\\\\\\\tero-group-design\\\\\\\\craft\\\\\\\\tero-group-rules.md'\\\"` rejected: blocked by policy\")" } 2026-10-15T17:28:02.133781Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe\\\" -Command \\\"Get-ChildItem -LiteralPath 'assets\\\\\\\\logo' -File | Select-Object Name,Length | Format-Table -AutoSize | Out-String\\\"` rejected: blocked by policy\")" } 2026-10-15T17:28:06.146607Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\System32\\\\\\\\WindowsPowerShell\\\\\\\\v1.0\\\\\\\\powershell.exe\\\" -NoProfile -Command Get-Location` rejected: blocked by policy\")" } mcp: codex_apps/remote_desktop_commander.read_file started mcp: codex_apps/remote_desktop_commander.read_file started mcp: codex_apps/remote_desktop_commander.read_file started mcp: codex_apps/remote_desktop_commander.read_file started mcp: codex_apps/remote_desktop_commander.read_file started mcp: codex_apps/remote_desktop_commander.read_file (failed) mcp: codex_apps/remote_desktop_commander.read_file (failed) mcp: codex_apps/remote_desktop_commander.read_file (failed) mcp: codex_apps/remote_desktop_commander.read_file (failed) mcp: codex_apps/remote_desktop_commander.read_file (failed) 2026-10-15T17:28:26.218014Z ERROR codex_core::tools::router: error=exec_command failed: CreateProcess { message: "Rejected(\"`\\\"C:\\\\\\\\Windows\\\\\\\\system32\\\\\\\\cmd.exe\\\" /c dir` rejected: blocked by policy\")" } mcp: codex/list_mcp_resources started mcp: codex/list_mcp_resource_templates started mcp: codex/list_mcp_resource_templates (completed) mcp: codex/list_mcp_resources (completed) mcp: codex_apps/github.search_installed_repositories_v2 started mcp: codex_apps/github.search_installed_repositories_v2 (completed) mcp: codex_apps/github.search_installed_repositories_v2 started mcp: codex_apps/github.search_installed_repositories_v2 (completed) codex L accès shell local est bloqué par le profil de session, et le relais de fichiers disponible est hors ligne. Je tente le miroir GitHub configuré pour éviter de vous faire perdre un tour ; si ces fichiers n y sont pas, je distinguerai explicitement les constats certains des recommandations de direction artistique. mcp: codex_apps/github.fetch_file started mcp: codex_apps/github.fetch_file started mcp: codex_apps/github.fetch_file started mcp: codex_apps/github.fetch_file started mcp: codex_apps/github.fetch_file started mcp: codex_apps/github.fetch_file (failed) mcp: codex_apps/github.fetch_file (failed) mcp: codex_apps/github.fetch_file (failed) mcp: codex_apps/github.fetch_file (failed) mcp: codex_apps/github.fetch_file (failed) codex > **Limite de méthode :** le profil de cette session a bloqué la lecture des fichiers locaux et le miroir GitHub est vide. Je ne vais donc pas prétendre avoir vérifié les 650 lignes une à une. Le diagnostic ci-dessous repose sur les faits mesurés fournis 164 couleurs, 30 tailles, 15+ rayons et sur les éléments de marque explicités. Il constitue une revue de direction exploitable, mais pas une validation documentaire ligne par ligne. # Diagnostic sans complaisance La charte semble avoir accumulé des possibilités sans établir suffisamment de décisions. Elle décrit une identité, mais ne constitue pas encore un système capable de gouverner trois piliers, une vingtaine de marques et plusieurs équipes de production. ## Les 7 faiblesses les plus graves ### 1. Une architecture de marque non résolue TERO hésite vraisemblablement entre : - une marque ombrelle visible ; - trois divisions institutionnelles ; - des marques commerciales autonomes ; - des événements temporairement reliés au groupe. Or Tero Lodges, Knokke Out, Tero Padel Club, Immorun et Brussels Premier Padel ne doivent pas recevoir le même traitement. Sans modèle d endossement formel, chaque site improvise son rapport à TERO. **Conséquence :** le groupe ne capitalise pas sur sa taille, tandis que les marques perdent soit leur personnalité, soit leur lisibilité d appartenance. ### 2. Sept couleurs déclarées, mais aucune hiérarchie suffisamment contraignante Sept couleurs peuvent former un patrimoine de marque. Sept couleurs simultanément disponibles dans chaque interface produisent un nuancier, pas une identité. Il faut distinguer : - les couleurs institutionnelles ; - les couleurs de piliers ; - les couleurs d expression ou de campagne ; - les couleurs fonctionnelles d interface ; - les combinaisons accessibles. Le cyan, le sable et le rose poudre ne peuvent notamment pas servir de couleurs de texte ordinaires sur blanc. Le rose vif ne doit pas devenir un rouge d erreur par défaut. **Symptôme décisif :** 164 valeurs observées pour seulement sept couleurs déclarées. La charte ne gouverne donc pas réellement l implémentation. ### 3. Des tokens qui risquent de documenter la dette au lieu de l empêcher Un bon design system ne transforme pas chaque valeur existante en token. Il réduit l espace de décision. Si `tokens.css` autorise de multiples variantes proches, des noms visuels tels que `dark-grey-2` ou des valeurs directement consommables sans rôle sémantique, il industrialise l incohérence. Il faut trois niveaux seulement : 1. **Primitives** : valeurs de marque. 2. **Sémantiques** : `surface`, `text`, `border`, `action`. 3. **Composants** : uniquement lorsque leur comportement l exige. ### 4. La typographie Almarose n est pas encore transformée en hiérarchie éditoriale Cinq graisses et 30 tailles ne constituent pas une gamme : elles permettent pratiquement toutes les décisions possibles. TERO a besoin d une voix reconnaissable : - grands titres courts et assumés ; - contenus hospitaliers plus calmes ; - données sportives plus denses ; - labels et navigation rigoureux. La graisse 900 doit être rare. Employée partout, elle donne une tonalité promotionnelle permanente et détruit la sophistication attendue en hospitality. ### 5. La géométrie n a pas de grammaire Plus de 15 rayons d angle indiquent que les composants ont été dessinés indépendamment. Le résultat ne peut pas paraître intentionnel. TERO doit choisir entre : - une expression principalement éditoriale et rectiligne ; - une expression douce et organique ; - une opposition codifiée entre contenants et actions. Additionner cartes à 8, 12, 15, 20, 24 ou 32 px est seulement du bruit visuel. ### 6. La gamme de logos ne répond pas à l écosystème réel Onze fichiers ne signifient pas onze usages correctement couverts. La question n est pas le nombre de variantes, mais la présence d un système complet : - formats responsifs ; - versions positives et inversées ; - seuils de réduction ; - signature ; - piliers ; - endossements ; - favicon et avatar ; - règles de cohabitation avec les marques autonomes. Le mot-symbole officiel `tero` et le glyphe `o` doivent rester des actifs dessinés, jamais être reconstitués en Almarose. ### 7. La charte ne dispose manifestement pas d un dispositif d application Les métriques du site prouvent l absence de contrôle de conformité. Une charte de 650 lignes sans linting, critères d acceptation, responsables et revue de contribution reste consultative. Il manque au minimum : - un propriétaire du système ; - une source de vérité versionnée ; - des règles de contribution ; - un contrôle automatique des valeurs brutes ; - une revue d accessibilité ; - un plan de migration des domaines. # Direction artistique recommandée ## Concept : « L hospitalité en mouvement » TERO ne doit ressembler ni à un holding froid, ni à un collage de sites lifestyle. Sa singularité est de créer des lieux et des moments où les personnes se retrouvent. La direction doit combiner : - **une structure noire et blanche, éditoriale et stable**, qui porte le groupe ; - **des interventions colorées franches mais limitées**, qui identifient le contexte ; - **le `o` comme signe de rencontre**, cadrage, fenêtre, point de rassemblement ou mouvement ; - **une photographie humaine et tactile**, privilégiant les interactions réelles aux bâtiments vides ; - **une mise en page contrastée**, alternant respiration hospitality et densité événementielle. Le noir et le blanc doivent occuper environ **75 à 85 % de l interface**. La couleur n est pas un remplissage décoratif : elle signale une action, un pilier ou un temps fort. ## Répartition chromatique | Territoire | Couleur dominante | Couleur d appui | Usage | |---|---:|---:|---| | TERO Group | Noir/blanc | Teal `#007864` | Institutionnel, liens, signature de groupe | | Hospitality | Terracotta `#B93815` | Sable `#FAD282` | Chaleur, restauration, séjours | | Leisure | Teal `#007864` | Rose poudre `#D7B4B4` | Bien-être, pratique, convivialité | | Sport Events | Pétrole `#004B69` | Cyan `#00B7FF` | Structure, performance, information | | Campagnes fortes | | Rose vif `#FF1D58` | Temps fort ponctuel, jamais couleur UI générique | Règles impératives : - blanc sur pétrole, teal et terracotta uniquement après validation WCAG ; - noir sur sable, rose poudre, cyan et rose vif ; - une seule couleur d accent dominante par écran ; - aucune couleur de pilier ne remplace les couleurs sémantiques de succès, avertissement ou erreur. ## Typographie Almarose peut fonctionner seule, à condition de lui attribuer des rôles stricts : | Style | Valeur desktop | Valeur mobile | Graisse | |---|---:|---:|---:| | Display | `96/0.94` | `56/0.98` | 700 | | H1 | `72/0.98` | `44/1.02` | 700 | | H2 | `48/1.05` | `36/1.08` | 600 | | H3 | `32/1.12` | `28/1.14` | 600 | | Lead | `22/1.45` | `20/1.45` | 400 | | Body | `16/1.55` | `16/1.55` | 400 | | Small | `14/1.45` | identique | 400/500 | | Label | `12/1.25`, `0.08em` | identique | 600 | La graisse 900 est réservée aux chiffres événementiels, dossards visuels ou campagnes, jamais aux paragraphes ni à la navigation. ## Expression graphique - Images plein cadre avec recadrages circulaires issus du `o`, limités à **un geste fort par viewport**. - Pas de mosaïques de petites cartes génériques sur la page d accueil. - Titres de **6 à 10 mots**, largeur maximale de **10 12 caractères typographiques** pour les displays les plus grands. - Blocs éditoriaux asymétriques, mais alignés sur une grille commune. - Traits de séparation de `1px`, aplats francs, très peu d ombres. - Icônes linéaires de `1.5px`, dessinées sur grilles de `20` et `24px`. - Mouvement sobre : apparition, recadrage, translation. Aucun carrousel automatique décoratif. # 10 améliorations classées par impact | Priorité | Amélioration | Critère mesurable | |---:|---|---| | **1** | Refaire l architecture de tokens | **0 hex/rgb brut** dans les composants ; maximum **30 tokens couleur sémantiques**, hors primitives et data visualisation | | **2** | Formaliser l architecture de marque | Chaque marque classée dans **1 des 4 relations** définies ci-dessous ; **100 %** des domaines dotés d un endossement documenté | | **3** | Réduire la typographie | Passer de **30 tailles à 8 styles** ; aucun `font-size` arbitraire ; largeur de texte courant limitée à **65 75 caractères** | | **4** | Garantir l accessibilité chromatique | WCAG **AA** sur 100 % des textes et états interactifs : `4.5:1` texte courant, `3:1` grand texte et composants | | **5** | Normaliser la géométrie | Passer de 15+ rayons à **4 tokens** : `0`, `8px`, `16px`, `999px` ; `999px` réservé aux pills/avatars | | **6** | Construire les fondations de layout | Base spacing **8px** avec demi-pas `4px`; grille `4/6/12` colonnes ; conteneur `1280px`; gouttières `20/32/64px` | | **7** | Définir les composants critiques | Bouton, lien, navigation, carte, filtre, formulaire et accordéon avec états `default/hover/focus/active/disabled/error`; cible tactile minimale **44×44px** | | **8** | Imposer une direction photographique | Minimum **70 %** des images avec présence ou trace humaine ; séries de **12 20 images cohérentes** par pilier ; aucun visuel stock générique | | **9** | Codifier le mouvement | Durées limitées à `160/240/400ms`; une courbe principale; aucune animation essentielle; support systématique de `prefers-reduced-motion` | | **10** | Installer la gouvernance | Audit automatique à chaque PR ; budget par page de **0 valeur couleur, taille ou rayon inconnue** ; revue trimestrielle et propriétaire nommé | Objectif de migration réaliste après refonte : - **164 ’! moins de 35 valeurs couleur calculées**, états et transparences compris ; - **30 ’! 8 styles typographiques** ; - **15+ ’! 4 rayons** ; - **100 %** des composants sans valeur visuelle arbitraire ; - **100 %** des parcours principaux utilisables au clavier. # Gamme de logo à compléter ## 1. Actifs maîtres Le dessin officiel ne doit pas être modifié. - `tero` mot-symbole horizontal, noir. - `tero` mot-symbole horizontal, blanc. - Version teal institutionnelle, uniquement sur fond blanc ou très clair. - Monogramme `o`, noir, blanc et teal. - Version monochrome stricte pour gravure, broderie, marquage et partenaires. - Formats SVG, PDF vectoriel, PNG 1×/2×/3×. - Favicon `16/32/48px`, app icon `180/512px`, avatar social `800px`. Seuils recommandés : - mot-symbole seul : minimum **72px** à l écran, **18mm** imprimé ; - lockup avec descripteur : minimum **120px**, **30mm** ; - lockup avec signature : minimum **240px**, **60mm** ; - en dessous de `48px`, utiliser exclusivement le monogramme. Zone de protection : au moins **0,5 fois le diamètre extérieur du `o`** sur les quatre côtés. ## 2. Lockups institutionnels Créer une construction unique : ```text tero GROUP ``` Puis : ```text tero HOSPITALITY ``` ```text tero LEISURE ``` ```text tero SPORT EVENTS ``` Le descripteur doit être en Almarose 600, capitales, avec un tracking de `0.10 0.14em`, optiquement aligné sur le mot-symbole. Il reste secondaire : sa hauteur ne dépasse pas **18 22 %** de celle du mot-symbole. Aucun nouveau pictogramme pour les piliers. La différenciation se fait par le descripteur et la couleur contextuelle, pas par trois mini-identités concurrentes. ## 3. Signature La forme canonique reste : > **live. share. reconnect.** Règles : - toujours en minuscules ; - ponctuation conservée ; - jamais traduite dans le logo ; - jamais utilisée comme micro-endossement ; - réservée aux supports institutionnels, manifestes, ouvertures et fins de campagne ; - distance minimale avec le logo : **1 diamètre de `o`**. # Système d endossement TERO doit fonctionner comme une **maison endosseuse**, pas comme une marque monolithique. ## Niveau 1 Maison mère **TERO Group** porte : - la vision ; - l employeur ; - les engagements ; - le portefeuille ; - la gouvernance ; - les communications corporate. Le site `tero.be` ne doit pas tenter de vendre directement toutes les expériences. Il oriente, raconte et crédibilise. ## Niveau 2 Piliers Les trois piliers servent de classification et d expertise : - Tero Hospitality - Tero Leisure - Tero Sport Events Ils peuvent disposer de pages, présentations B2B et signatures professionnelles, mais ne doivent pas systématiquement devenir des marques visibles par le grand public. ## Niveau 3 Marques commerciales Quatre relations doivent être prévues. ### A. Marques directement dérivées de TERO Exemples probables : Tero Lodges, Tero Padel Club, Tero Studio. Construction recommandée : mot-symbole `tero` officiel + descripteur normalisé. Ne pas créer trois variantes typographiques indépendantes de `tero`. ### B. Marques autonomes fortement endossées Pour une marque dont TERO apporte une vraie garantie d expérience : ```text KNOKKE OUT a tero hospitality place ``` ou : ```text TEROIR a tero hospitality place ``` L endossement mesure environ **18 % de la largeur** du logo principal, avec un minimum lisible de `12px` numérique ou `7pt` imprimé. ### C. Marques autonomes discrètement endossées Lorsque le capital de marque propre est supérieur à celui de TERO : ```text BISTRO PILKO member of tero group ``` L endossement apparaît dans le footer, la page À propos, les supports institutionnels et certains documents commerciaux pas nécessairement dans le header. ### D. Événements produits ou organisés par TERO Pour Immorun, Batirun ou Brussels Premier Padel, selon la réalité juridique : ```text produced by tero sport events ``` ou : ```text organized by tero sport events ``` Ne jamais utiliser `a tero brand` si TERO n est pas propriétaire de la marque. L endossement doit décrire la relation réelle, pas simplement maximiser la visibilité du groupe. ## Règle transversale Le nom de domaine n est pas une architecture de marque. `teropadelclub.be` ou `immorun.be` ne détermine ni le niveau d endossement ni le lockup. Un registre central doit préciser pour chaque entité : - propriétaire légal ; - pilier de rattachement ; - public ; - autonomie visuelle ; - formulation d endossement ; - logo autorisé ; - domaines et réseaux sociaux concernés. # Verdict ## **Non, pas présentable au client comme charte finale.** C est potentiellement présentable comme **diagnostic et base de convergence**, mais pas comme système approuvé. Les chiffres suffisent à motiver ce verdict : **164 couleurs, 30 tailles et plus de 15 rayons** prouvent que les règles existantes n ont ni réduit les décisions ni gouverné la production. À cela s ajoutent une architecture d endossement non stabilisée, une palette à sept couleurs sans hiérarchie opérationnelle démontrée et une gamme de logo qui ne couvre pas clairement les relations entre maison mère, piliers et marques. Avant présentation finale, il faut produire et valider quatre livrables incontournables : 1. une carte exhaustive des quelque 20 marques ; 2. une matrice couleur/accessibilité ; 3. un jeu réduit de tokens sémantiques et de composants ; 4. une planche de lockups et d endossements testée sur au moins six cas réels. Sans ces éléments, la charte reste une intention riche mais permissive. Avec eux, TERO peut obtenir une identité rare : institutionnelle sans être froide, premium sans être précieuse, et énergique sans devenir un patchwork. tokens used 53/ 090 > **Limite de méthode :** le profil de cette session a bloqué la lecture des fichiers locaux et le miroir GitHub est vide. Je ne vais donc pas prétendre avoir vérifié les 650 lignes une à une. Le diagnostic ci-dessous repose sur les faits mesurés fournis 164 couleurs, 30 tailles, 15+ rayons et sur les éléments de marque explicités. Il constitue une revue de direction exploitable, mais pas une validation documentaire ligne par ligne. # Diagnostic sans complaisance La charte semble avoir accumulé des possibilités sans établir suffisamment de décisions. Elle décrit une identité, mais ne constitue pas encore un système capable de gouverner trois piliers, une vingtaine de marques et plusieurs équipes de production. ## Les 7 faiblesses les plus graves ### 1. Une architecture de marque non résolue TERO hésite vraisemblablement entre : - une marque ombrelle visible ; - trois divisions institutionnelles ; - des marques commerciales autonomes ; - des événements temporairement reliés au groupe. Or Tero Lodges, Knokke Out, Tero Padel Club, Immorun et Brussels Premier Padel ne doivent pas recevoir le même traitement. Sans modèle d endossement formel, chaque site improvise son rapport à TERO. **Conséquence :** le groupe ne capitalise pas sur sa taille, tandis que les marques perdent soit leur personnalité, soit leur lisibilité d appartenance. ### 2. Sept couleurs déclarées, mais aucune hiérarchie suffisamment contraignante Sept couleurs peuvent former un patrimoine de marque. Sept couleurs simultanément disponibles dans chaque interface produisent un nuancier, pas une identité. Il faut distinguer : - les couleurs institutionnelles ; - les couleurs de piliers ; - les couleurs d expression ou de campagne ; - les couleurs fonctionnelles d interface ; - les combinaisons accessibles. Le cyan, le sable et le rose poudre ne peuvent notamment pas servir de couleurs de texte ordinaires sur blanc. Le rose vif ne doit pas devenir un rouge d erreur par défaut. **Symptôme décisif :** 164 valeurs observées pour seulement sept couleurs déclarées. La charte ne gouverne donc pas réellement l implémentation. ### 3. Des tokens qui risquent de documenter la dette au lieu de l empêcher Un bon design system ne transforme pas chaque valeur existante en token. Il réduit l espace de décision. Si `tokens.css` autorise de multiples variantes proches, des noms visuels tels que `dark-grey-2` ou des valeurs directement consommables sans rôle sémantique, il industrialise l incohérence. Il faut trois niveaux seulement : 1. **Primitives** : valeurs de marque. 2. **Sémantiques** : `surface`, `text`, `border`, `action`. 3. **Composants** : uniquement lorsque leur comportement l exige. ### 4. La typographie Almarose n est pas encore transformée en hiérarchie éditoriale Cinq graisses et 30 tailles ne constituent pas une gamme : elles permettent pratiquement toutes les décisions possibles. TERO a besoin d une voix reconnaissable : - grands titres courts et assumés ; - contenus hospitaliers plus calmes ; - données sportives plus denses ; - labels et navigation rigoureux. La graisse 900 doit être rare. Employée partout, elle donne une tonalité promotionnelle permanente et détruit la sophistication attendue en hospitality. ### 5. La géométrie n a pas de grammaire Plus de 15 rayons d angle indiquent que les composants ont été dessinés indépendamment. Le résultat ne peut pas paraître intentionnel. TERO doit choisir entre : - une expression principalement éditoriale et rectiligne ; - une expression douce et organique ; - une opposition codifiée entre contenants et actions. Additionner cartes à 8, 12, 15, 20, 24 ou 32 px est seulement du bruit visuel. ### 6. La gamme de logos ne répond pas à l écosystème réel Onze fichiers ne signifient pas onze usages correctement couverts. La question n est pas le nombre de variantes, mais la présence d un système complet : - formats responsifs ; - versions positives et inversées ; - seuils de réduction ; - signature ; - piliers ; - endossements ; - favicon et avatar ; - règles de cohabitation avec les marques autonomes. Le mot-symbole officiel `tero` et le glyphe `o` doivent rester des actifs dessinés, jamais être reconstitués en Almarose. ### 7. La charte ne dispose manifestement pas d un dispositif d application Les métriques du site prouvent l absence de contrôle de conformité. Une charte de 650 lignes sans linting, critères d acceptation, responsables et revue de contribution reste consultative. Il manque au minimum : - un propriétaire du système ; - une source de vérité versionnée ; - des règles de contribution ; - un contrôle automatique des valeurs brutes ; - une revue d accessibilité ; - un plan de migration des domaines. # Direction artistique recommandée ## Concept : « L hospitalité en mouvement » TERO ne doit ressembler ni à un holding froid, ni à un collage de sites lifestyle. Sa singularité est de créer des lieux et des moments où les personnes se retrouvent. La direction doit combiner : - **une structure noire et blanche, éditoriale et stable**, qui porte le groupe ; - **des interventions colorées franches mais limitées**, qui identifient le contexte ; - **le `o` comme signe de rencontre**, cadrage, fenêtre, point de rassemblement ou mouvement ; - **une photographie humaine et tactile**, privilégiant les interactions réelles aux bâtiments vides ; - **une mise en page contrastée**, alternant respiration hospitality et densité événementielle. Le noir et le blanc doivent occuper environ **75 à 85 % de l interface**. La couleur n est pas un remplissage décoratif : elle signale une action, un pilier ou un temps fort. ## Répartition chromatique | Territoire | Couleur dominante | Couleur d appui | Usage | |---|---:|---:|---| | TERO Group | Noir/blanc | Teal `#007864` | Institutionnel, liens, signature de groupe | | Hospitality | Terracotta `#B93815` | Sable `#FAD282` | Chaleur, restauration, séjours | | Leisure | Teal `#007864` | Rose poudre `#D7B4B4` | Bien-être, pratique, convivialité | | Sport Events | Pétrole `#004B69` | Cyan `#00B7FF` | Structure, performance, information | | Campagnes fortes | | Rose vif `#FF1D58` | Temps fort ponctuel, jamais couleur UI générique | Règles impératives : - blanc sur pétrole, teal et terracotta uniquement après validation WCAG ; - noir sur sable, rose poudre, cyan et rose vif ; - une seule couleur d accent dominante par écran ; - aucune couleur de pilier ne remplace les couleurs sémantiques de succès, avertissement ou erreur. ## Typographie Almarose peut fonctionner seule, à condition de lui attribuer des rôles stricts : | Style | Valeur desktop | Valeur mobile | Graisse | |---|---:|---:|---:| | Display | `96/0.94` | `56/0.98` | 700 | | H1 | `72/0.98` | `44/1.02` | 700 | | H2 | `48/1.05` | `36/1.08` | 600 | | H3 | `32/1.12` | `28/1.14` | 600 | | Lead | `22/1.45` | `20/1.45` | 400 | | Body | `16/1.55` | `16/1.55` | 400 | | Small | `14/1.45` | identique | 400/500 | | Label | `12/1.25`, `0.08em` | identique | 600 | La graisse 900 est réservée aux chiffres événementiels, dossards visuels ou campagnes, jamais aux paragraphes ni à la navigation. ## Expression graphique - Images plein cadre avec recadrages circulaires issus du `o`, limités à **un geste fort par viewport**. - Pas de mosaïques de petites cartes génériques sur la page d accueil. - Titres de **6 à 10 mots**, largeur maximale de **10 12 caractères typographiques** pour les displays les plus grands. - Blocs éditoriaux asymétriques, mais alignés sur une grille commune. - Traits de séparation de `1px`, aplats francs, très peu d ombres. - Icônes linéaires de `1.5px`, dessinées sur grilles de `20` et `24px`. - Mouvement sobre : apparition, recadrage, translation. Aucun carrousel automatique décoratif. # 10 améliorations classées par impact | Priorité | Amélioration | Critère mesurable | |---:|---|---| | **1** | Refaire l architecture de tokens | **0 hex/rgb brut** dans les composants ; maximum **30 tokens couleur sémantiques**, hors primitives et data visualisation | | **2** | Formaliser l architecture de marque | Chaque marque classée dans **1 des 4 relations** définies ci-dessous ; **100 %** des domaines dotés d un endossement documenté | | **3** | Réduire la typographie | Passer de **30 tailles à 8 styles** ; aucun `font-size` arbitraire ; largeur de texte courant limitée à **65 75 caractères** | | **4** | Garantir l accessibilité chromatique | WCAG **AA** sur 100 % des textes et états interactifs : `4.5:1` texte courant, `3:1` grand texte et composants | | **5** | Normaliser la géométrie | Passer de 15+ rayons à **4 tokens** : `0`, `8px`, `16px`, `999px` ; `999px` réservé aux pills/avatars | | **6** | Construire les fondations de layout | Base spacing **8px** avec demi-pas `4px`; grille `4/6/12` colonnes ; conteneur `1280px`; gouttières `20/32/64px` | | **7** | Définir les composants critiques | Bouton, lien, navigation, carte, filtre, formulaire et accordéon avec états `default/hover/focus/active/disabled/error`; cible tactile minimale **44×44px** | | **8** | Imposer une direction photographique | Minimum **70 %** des images avec présence ou trace humaine ; séries de **12 20 images cohérentes** par pilier ; aucun visuel stock générique | | **9** | Codifier le mouvement | Durées limitées à `160/240/400ms`; une courbe principale; aucune animation essentielle; support systématique de `prefers-reduced-motion` | | **10** | Installer la gouvernance | Audit automatique à chaque PR ; budget par page de **0 valeur couleur, taille ou rayon inconnue** ; revue trimestrielle et propriétaire nommé | Objectif de migration réaliste après refonte : - **164 ’! moins de 35 valeurs couleur calculées**, états et transparences compris ; - **30 ’! 8 styles typographiques** ; - **15+ ’! 4 rayons** ; - **100 %** des composants sans valeur visuelle arbitraire ; - **100 %** des parcours principaux utilisables au clavier. # Gamme de logo à compléter ## 1. Actifs maîtres Le dessin officiel ne doit pas être modifié. - `tero` mot-symbole horizontal, noir. - `tero` mot-symbole horizontal, blanc. - Version teal institutionnelle, uniquement sur fond blanc ou très clair. - Monogramme `o`, noir, blanc et teal. - Version monochrome stricte pour gravure, broderie, marquage et partenaires. - Formats SVG, PDF vectoriel, PNG 1×/2×/3×. - Favicon `16/32/48px`, app icon `180/512px`, avatar social `800px`. Seuils recommandés : - mot-symbole seul : minimum **72px** à l écran, **18mm** imprimé ; - lockup avec descripteur : minimum **120px**, **30mm** ; - lockup avec signature : minimum **240px**, **60mm** ; - en dessous de `48px`, utiliser exclusivement le monogramme. Zone de protection : au moins **0,5 fois le diamètre extérieur du `o`** sur les quatre côtés. ## 2. Lockups institutionnels Créer une construction unique : ```text tero GROUP ``` Puis : ```text tero HOSPITALITY ``` ```text tero LEISURE ``` ```text tero SPORT EVENTS ``` Le descripteur doit être en Almarose 600, capitales, avec un tracking de `0.10 0.14em`, optiquement aligné sur le mot-symbole. Il reste secondaire : sa hauteur ne dépasse pas **18 22 %** de celle du mot-symbole. Aucun nouveau pictogramme pour les piliers. La différenciation se fait par le descripteur et la couleur contextuelle, pas par trois mini-identités concurrentes. ## 3. Signature La forme canonique reste : > **live. share. reconnect.** Règles : - toujours en minuscules ; - ponctuation conservée ; - jamais traduite dans le logo ; - jamais utilisée comme micro-endossement ; - réservée aux supports institutionnels, manifestes, ouvertures et fins de campagne ; - distance minimale avec le logo : **1 diamètre de `o`**. # Système d endossement TERO doit fonctionner comme une **maison endosseuse**, pas comme une marque monolithique. ## Niveau 1 Maison mère **TERO Group** porte : - la vision ; - l employeur ; - les engagements ; - le portefeuille ; - la gouvernance ; - les communications corporate. Le site `tero.be` ne doit pas tenter de vendre directement toutes les expériences. Il oriente, raconte et crédibilise. ## Niveau 2 Piliers Les trois piliers servent de classification et d expertise : - Tero Hospitality - Tero Leisure - Tero Sport Events Ils peuvent disposer de pages, présentations B2B et signatures professionnelles, mais ne doivent pas systématiquement devenir des marques visibles par le grand public. ## Niveau 3 Marques commerciales Quatre relations doivent être prévues. ### A. Marques directement dérivées de TERO Exemples probables : Tero Lodges, Tero Padel Club, Tero Studio. Construction recommandée : mot-symbole `tero` officiel + descripteur normalisé. Ne pas créer trois variantes typographiques indépendantes de `tero`. ### B. Marques autonomes fortement endossées Pour une marque dont TERO apporte une vraie garantie d expérience : ```text KNOKKE OUT a tero hospitality place ``` ou : ```text TEROIR a tero hospitality place ``` L endossement mesure environ **18 % de la largeur** du logo principal, avec un minimum lisible de `12px` numérique ou `7pt` imprimé. ### C. Marques autonomes discrètement endossées Lorsque le capital de marque propre est supérieur à celui de TERO : ```text BISTRO PILKO member of tero group ``` L endossement apparaît dans le footer, la page À propos, les supports institutionnels et certains documents commerciaux pas nécessairement dans le header. ### D. Événements produits ou organisés par TERO Pour Immorun, Batirun ou Brussels Premier Padel, selon la réalité juridique : ```text produced by tero sport events ``` ou : ```text organized by tero sport events ``` Ne jamais utiliser `a tero brand` si TERO n est pas propriétaire de la marque. L endossement doit décrire la relation réelle, pas simplement maximiser la visibilité du groupe. ## Règle transversale Le nom de domaine n est pas une architecture de marque. `teropadelclub.be` ou `immorun.be` ne détermine ni le niveau d endossement ni le lockup. Un registre central doit préciser pour chaque entité : - propriétaire légal ; - pilier de rattachement ; - public ; - autonomie visuelle ; - formulation d endossement ; - logo autorisé ; - domaines et réseaux sociaux concernés. # Verdict ## **Non, pas présentable au client comme charte finale.** C est potentiellement présentable comme **diagnostic et base de convergence**, mais pas comme système approuvé. Les chiffres suffisent à motiver ce verdict : **164 couleurs, 30 tailles et plus de 15 rayons** prouvent que les règles existantes n ont ni réduit les décisions ni gouverné la production. À cela s ajoutent une architecture d endossement non stabilisée, une palette à sept couleurs sans hiérarchie opérationnelle démontrée et une gamme de logo qui ne couvre pas clairement les relations entre maison mère, piliers et marques. Avant présentation finale, il faut produire et valider quatre livrables incontournables : 1. une carte exhaustive des quelque 20 marques ; 2. une matrice couleur/accessibilité ; 3. un jeu réduit de tokens sémantiques et de composants ; 4. une planche de lockups et d endossements testée sur au moins six cas réels. Sans ces éléments, la charte reste une intention riche mais permissive. Avec eux, TERO peut obtenir une identité rare : institutionnelle sans être froide, premium sans être précieuse, et énergique sans devenir un patchwork.