TEMPLATE-DESIGN-MD — gabarit DESIGN.md pour les marques du groupe Tero

Objet : un gabarit unique, immédiatement remplissable, qui décrit une marque du groupe Tero

au format DESIGN.md (Google Labs, avril 2026) : front-matter YAML de tokens + sections de

prose qui expliquent le pourquoi. Un agent IA lit ce fichier pour produire une page sans

dériver.

Public : le studio, les intégrateurs, et tout agent de code qui produit une page du groupe.

Ancrage : .open-design/plugins/tero-group-design/craft/tero-group-rules.md (règles

opposables) et docs/design/ARBITRAGES-TERO-GROUP.md (décisions v1.2). Ce gabarit n'invente

aucune valeur : tout ce qu'il contient est mesuré ou arbitré. En cas de contradiction, les règles

du groupe gagnent.

Date : 16 octobre 2026 · Statut : annexe de la doctrine.

Étiquettes : [MESURÉ] relevé et vérifié · [RÈGLE] décision opposable ·

[À VALIDER CLIENT] question ouverte.

1. Pourquoi un DESIGN.md par marque

Le constat est mesuré : les interfaces produites par des agents convergent vers les mêmes choix

sûrs, et le groupe a produit son identité page par page, dans 536 feuilles de style Elementor, avec

164 valeurs chromatiques distinctes. [MESURÉ] Un DESIGN.md ne corrige pas cela par magie : il le

corrige parce qu'il donne des valeurs exactes aux agents et interdit le reste en prose. Le

format est en alpha : on l'adopte pour ce qu'il apporte aujourd'hui — lisibilité par un agent,

vérification automatique des références de tokens et des contrastes WCAG — sans s'y enfermer.

2. Mode d'emploi en cinq étapes

• Copier le gabarit du § 3 dans le fichier de la marque : docs/design/marques/<id>.DESIGN.md.
• Remplacer les six valeurs d'accent du bloc accent (voir § 5) et rien d'autre.
• Écrire la prose : l'intention, ce que la marque refuse, ses anti-patterns. Une phrase par idée.
• Vérifier : npx -p @google/design.md designmd lint <fichier> doit sortir sans erreur.
• Consigner la sortie du lint dans le dossier de livraison (checklist § 18 des règles du groupe).

Les valeurs de couleur, de typographie, d'espacement et de rayon du § 4 sont verrouillées : on

ne les réinvente pas dans une marque. Un besoin non couvert se traite par un ajout aux règles du

groupe, jamais par une valeur locale.

3. Le gabarit

Les deux premières sections de ce bloc — jusqu'à la fin du body — constituent un DESIGN.md complet.

Remplacer ce qui est entre chevrons. Tant qu'il reste un chevron, le lint échoue : c'est voulu.

---
version: alpha
name: "<Nom de la marque>"
description: "<Phrase-réponse autonome de 25 à 40 mots : qui, quoi, pour qui, où. La même que dans la charte de la marque.>"
colors:
  ink: "#000000"
  ink-soft: "#323232"
  ink-muted: "#5F5F5F"
  ink-disabled: "#B9B9B9"
  surface: "#F6F4F4"
  surface-strong: "#FFFFFF"
  line: "#D9D9D9"
  line-soft: "#E5E6E5"
  border-strong: "#767676"
  accent: "<HEX — accent de la marque, scellé à son domaine>"
  accent-hover: "<HEX — accent assombri de 12 %, mesuré>"
  on-accent: "<#FFFFFF ou #000000 — calculé, jamais deviné>"
  deep: "#212121"
  deep-alt: "#000000"
  on-deep: "#FFFFFF"
  deep-accent-1: "#FAD282"
  deep-accent-2: "#00B7FF"
  deep-accent-3: "#D7B4B4"
  deep-accent-4: "#FF1D58"
  focus-on-light: "#000000"
  focus-on-deep: "#FAD282"
typography:
  label:
    fontFamily: Almarose
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.18em
  meta:
    fontFamily: Almarose
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: 1.45
  body:
    fontFamily: Almarose
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.65
  lead:
    fontFamily: Almarose
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: 1.6
  title-s:
    fontFamily: Almarose
    fontSize: 1.25rem
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.01em
  title-m:
    fontFamily: Almarose
    fontSize: 2rem
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.01em
  title-l:
    fontFamily: Almarose
    fontSize: 2.5rem
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -0.02em
  display:
    fontFamily: Almarose
    fontSize: 3.75rem
    fontWeight: 700
    lineHeight: 1.02
    letterSpacing: -0.02em
  script:
    fontFamily: WildYouth
    fontSize: 2rem
    fontWeight: 400
    lineHeight: 1
rounded:
  pill: 999px
  plate: 20px
  card: 12px
spacing:
  inline: 8px
  gutter-mobile: 16px
  gutter: 24px
  block-s: 48px
  block-m: 72px
  block-l: 96px
  block-xl: 144px
components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface-strong}"
    typography: "{typography.meta}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 24px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.pill}"
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.meta}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 24px
  button-accent-hover:
    backgroundColor: "{colors.accent-hover}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.pill}"
  button-secondary:
    backgroundColor: "{colors.surface-strong}"
    textColor: "{colors.ink}"
    typography: "{typography.meta}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 24px
  button-on-deep:
    backgroundColor: "{colors.deep-accent-1}"
    textColor: "{colors.ink}"
    typography: "{typography.meta}"
    rounded: "{rounded.pill}"
    height: 44px
    padding: 0 24px
  button-disabled:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-disabled}"
    rounded: "{rounded.pill}"
    height: 44px
  link:
    textColor: "{colors.accent}"
    typography: "{typography.body}"
  link-on-deep:
    textColor: "{colors.deep-accent-1}"
    typography: "{typography.body}"
  card-media:
    rounded: "{rounded.card}"
    size: 100%
  plate:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.plate}"
    padding: 24px
---

## Overview

<Intention en trois à cinq phrases. Ce que la marque est, à qui elle parle, ce qu'elle refuse
d'être. C'est la section qui empêche un agent de produire du générique : elle doit contenir au
moins une phrase qu'aucune autre marque du groupe ne pourrait signer.>

## Colors

Le socle est noir et blanc : les neutres portent au moins 80 % de la surface, la couleur est un
accent et jamais l'ambiance. [RÈGLE]

- **Ink (#000000) :** texte principal, logo, aplat profond. 21:1 sur blanc. [MESURÉ]
- **Ink-soft (#323232) :** texte secondaire et survols. 12,82:1 sur blanc. [MESURÉ]
- **Ink-muted (#5F5F5F) :** texte discret, libellés, placeholders actifs. 6,39:1 sur blanc. [MESURÉ]
- **Surface (#F6F4F4) :** fond de section secondaire. **Surface-strong (#FFFFFF) :** fond principal.
- **Line (#D9D9D9) :** filet décoratif, jamais une bordure de contrôle (1,41:1). [MESURÉ]
- **Border-strong (#767676) :** toute bordure de contrôle — champ, case, sélecteur. 4,54:1 sur
  blanc, exigence SC 1.4.11. [RÈGLE]
- **Accent :** <rôle exact de l'accent pour cette marque, et le domaine auquel il est scellé>.
- **Bande profonde (#000000 ou #212121) :** texte blanc uniquement ; accents autorisés sable,
  cyan, rose poudré, rose vif. Jamais de teal #007864 sur fond noir (3,87:1). [MESURÉ]

Règle de couleur opposable : **une page n'utilise pas plus de deux couleurs de marque**, hors aplat
d'une bande profonde. [RÈGLE]

## Typography

Une seule famille : **Almarose**, auto-hébergée, graisses livrées 400, 500, 600, 700 et 900.
**800 est interdit** — aucun fichier ne le porte, il produirait un faux gras synthétique. [RÈGLE]

- Titres : 600 à 700, interlignage 1,02 à 1,25, lettrage -0,01 à -0,02 em.
- Sur-titres : label en capitales, lettrage +0,18 em.
- Corps : 400, interlignage 1,6 à 1,7, taille dominante 15 à 16 px.
- **WildYouth** (script) : <usage de cette marque, ou « non utilisée »>. Si elle est utilisée : un
  seul mot par page, jamais en titre principal, jamais au-delà de title-m (32 px), subset latin
  obligatoire. [RÈGLE]

Aucune taille hors de l'échelle ci-dessus, aucune seconde famille, accents français obligatoires.

## Layout

- Conteneur de référence 1 100 px ; gouttières 24 px en desktop, 16 px en mobile. [MESURÉ]
- Points de rupture de contrôle : 360 / 390 / 768 / 1024 / 1440 px.
- Rythme vertical unique : block-s 48 px, block-m 72 px, block-l 96 px, block-xl 144 px. L'écart
  entre deux entrées éditoriales est de 2,5 à 3,5 rem, soit block-s. [RÈGLE]
- Ordre imposé d'une page : sur-titre, H1, chapô, contenu, action. Un seul H1 par page.
- Densité : au moins 70 % de surface occupée par du contenu réel. Une colonne latérale n'est jamais
  vide. [RÈGLE]
- Filets : 1 px #D9D9D9, jamais plus épais. Ancres : scroll-padding-block-start 6rem.

## Elevation & Depth

**Aucune ombre.** La profondeur n'est pas simulée : elle est portée par l'aplat — bande profonde
#000000 ou #212121 — et par le filet de 1 px. [RÈGLE]

Une carte de contenu n'est pas une boîte : ni fond, ni bordure, ni rayon, ni ombre autour d'un
bloc de texte. Le séparateur est le filet ou l'espace. Cette section existe pour dire explicitement
à un agent ce que le format ne peut pas exprimer en tokens.

## Shapes

Trois rayons, pas quinze. [RÈGLE]

- **pill 999 px :** boutons et pastilles.
- **plate 20 px :** plaques, usage rare.
- **card 12 px :** images et médias uniquement.

Les fichiers officiels sont des actifs figés : le logo ne se redessine pas, ne se recolore pas, ne
se recompose pas, ne se rogne pas. Zone de respiration : minimum 0,5 X, conseillé 1 X, où X est le
diamètre de l'anneau du o. [MESURÉ]

## Components

Les composants ci-dessus sont **normatifs** : un agent qui produit un bouton utilise button-primary,
button-accent ou button-secondary — jamais une variante improvisée. [RÈGLE]

- Toute cible tactile fait au moins **44 px** de haut ; un lien en ligne s'agrandit par
  padding-block.
- Le focus est **visible et jamais supprimé** : anneau noir 2 px plus halo blanc de séparation sur
  fond clair ; **sable #FAD282 sur bande profonde** (11,20:1). Le teal seul est inutilisable
  (1,00:1 sur aplat teal, 2,97:1 sur #212121). [MESURÉ]
- Sur aplat sable, cyan ou rose poudré : **texte noir obligatoire**. [MESURÉ]
- Le format DESIGN.md ne couvre pas borderColor : la bordure des champs est portée par le token
  border-strong et par la règle ci-dessus, pas par un composant.

## Do's and Don'ts

**À faire**

- Utiliser les tokens du front-matter ; aucune valeur en dur dans une page.
- Écrire l'accent de la marque, jamais « un teal » ou « un bleu foncé ».
- Poser chaque affirmation factuelle sur une source listée dans le registre du groupe.
- Respecter le lexique figé : team building, Tero Lodges, farm to fork, événement, sur-mesure.
- Afficher le rattachement au groupe — pilier et lien tero.be — sur toute page de marque.

**À ne jamais faire**

- Une couleur hors des listes du § Colors, en particulier la sauge #97AB83 : c'est une dérive
  mesurée (620 occurrences), pas une couleur de marque.
- La graisse 800, une seconde famille typographique, plus d'un mot en script par page.
- Un logo recréé, recoloré, recomposé, ou un lockup inventé : tant qu'un lockup n'est pas dessiné
  par le studio, l'endossement est textuel.
- Une ombre, une boîte autour d'un bloc de texte, un quatrième rayon.
- Un chiffre, un prix, une capacité, une distinction ou une histoire sans source : écrire « à
  confirmer par le client ».

## Règles du groupe Tero — extension normative

Cette section est propre au groupe : le format autorise les sections inconnues, il ne les rejette
pas. Elle doit être conservée telle quelle dans chaque DESIGN.md de marque. [RÈGLE]

- **Signature** : live. share. reconnect. — minuscules, points, jamais modifiée. [MESURÉ]
- **Graphie** : le mot-symbole est tero en minuscules ; la rédaction écrit Tero ; TERO en
  capitales est une erreur. [MESURÉ]
- **Endossement** : pilier, marque forte endossée, marque autonome nominative, ou co-marque
  encadrée — quatre relations, aucune improvisation. Forme textuelle tant que le lockup n'existe
  pas. [RÈGLE]
- **Accent scellé** : un accent de marque n'apparaît sur aucun autre domaine. Un accent hors de son
  domaine est une dérive. [RÈGLE]
- **Un fait, une source** : aucun chiffre affiché sans source ; un chiffre ne s'affiche pas deux
  fois dans deux sections voisines. [RÈGLE]
- **Langues** : le français est la version de référence ; le néerlandais est du néerlandais belge,
  l'anglais est britannique. Les noms propres ne se traduisent jamais. [RÈGLE]

## Ce qui reste à confirmer par le client

- **Accent de la marque et son domaine de scellement** : à figer dans le registre des logos et le
  registre des accents. À confirmer par le client.
- **Usage de WildYouth pour cette marque** : utilisée ou non ; si oui, sur quel mot et dans quelle
  couleur. À confirmer par le client.
- **Registre des faits** (adresses, capacités, chiffres) : source de vérité par marque, à créer dans
  content/sources/. À confirmer par le client.
- **Endossement retenu** pour cette marque : parmi les quatre relations, laquelle, et avec quelle
  formulation exacte de mention. À confirmer par le client.

4. Valeurs verrouillées du groupe

Ces valeurs sont communes à toutes les marques. Les recopier sans les modifier. [RÈGLE]

4.1 Neutres et fonctionnels

4.2 Accents de pilier et accents de marque mesurés

Un accent ne peut pas servir à la fois de texte sur blanc et d'aplat à texte blanc : chaque thème a

donc trois variables — accent, accent-hover, on-accent. [RÈGLE]

Les accents **sable #FAD282 (1,44:1), rose poudré #D7B4B4 (1,90:1), cyan #00B7FF (2,28:1) et rose

vif #FF1D58 (3,77:1)** ne sont jamais du texte sur fond clair : ce sont des aplats, avec du texte

noir. [MESURÉ] Ratios recalculés selon la formule WCAG 2.1.

4.3 Rayons et espacements

Trois rayons : pill 999 px, plate 20 px, card 12 px. Rythme vertical : 48 / 72 / 96 / 144 px ;

gouttières 24 px (desktop) et 16 px (mobile).

5. Le contrat des trois variables d'accent

Pour chaque marque, remplir exactement trois valeurs et les mesurer avant publication :

• accent — l'accent de la marque. Il doit passer AA (4,5:1) sur blanc s'il porte du texte ;

sinon il n'est utilisé qu'en aplat, avec du texte noir.

• on-accent — #FFFFFF si le blanc sur l'accent atteint 4,5:1, sinon #000000. Jamais deviné :

c'est un calcul. Cas limite mesuré : #A56933 est à 4,50:1 avec du blanc et 4,67:1 avec du noir —

on retient le noir.

• accent-hover — accent assombri de 12 %, puis remesuré. Le survol doit conserver le

contraste du texte qu'il porte.

Trois variables par thème, en clair, et les trois mêmes en sombre si le thème sombre est activé.

Un accent sans ses trois variables est un thème incomplet. [RÈGLE]

6. États

Tout composant déclare explicitement : survol, focus visible, actif, désactivé, vide, erreur,

chargement. Un état non déclaré est un défaut. [RÈGLE] Le front-matter les exprime en entrées de

composant distinctes (button-primary-hover, button-disabled…) ; les états vide, erreur et

chargement, non couverts par le format, sont décrits en prose dans la section Components.

7. Vérification et critère d'acceptation

# 1. Validation structurelle et contrôle des contrastes, sortie JSON
npx -p @google/design.md designmd lint docs/design/marques/<id>.DESIGN.md

# 2. Détection des régressions entre deux versions
npx -p @google/design.md designmd diff <avant>.DESIGN.md <apres>.DESIGN.md

# 3. Export vers l'écosystème de tokens
npx -p @google/design.md designmd export --format dtcg <fichier> > tokens.json

Critère d'acceptation, dans cet ordre : le lint sort sans erreur ; aucune référence de token n'est

cassée ; chaque couple texte/fond atteint 4,5:1 (ou 3:1 pour un texte d'au moins 24 px, ou 18,66 px

en graisse 700) ; puis le test de résistance — une page produite par un agent à partir du seul

DESIGN.md ne contient aucune valeur hors charte. Une livraison sans cette sortie de commande est une

opinion, pas une livraison. [RÈGLE]

8. Ce que ce gabarit ne couvre pas

• Le lockup : tant que le studio n'a pas dessiné un lockup, aucune forme graphique d'endossement

n'est autorisée ; le gabarit décrit la mention textuelle. [RÈGLE]

• Les états non couverts par le format (vide, erreur, chargement) : décrits en prose.
• Le contenu factuel (adresses, capacités, chiffres) : il vit dans les sources de vérité du

groupe, pas dans le DESIGN.md ; le fichier cite, il ne stocke pas. [RÈGLE]

• Le mode sombre public : décidé pour la charte, différé sur tero.be ; les tokens sombres sont

prêts mais leur activation est une décision de contenu. [À VALIDER CLIENT]