# Brandbook entre-espace

> Le brandbook d'entre-espace : lignes directrices, marque et design system, lisibles par un humain comme par un agent.

Source : https://www.entre-espace.net/brandbook

Ce brandbook rassemble ce qui fait entre-espace : pourquoi ce nom, ce que le Manifeste défend, les postures et les principes qui guident le design et l'usage de l'IA, puis la marque (le ton, le logo) et le design system qui la porte à l'écran.

### Trois parties

- **Lignes directrices** : le nom, le Manifeste et la méthodologie de l'objet, les postures et principes de design, les postures et principes d'IA.
- **La marque Entre-espace** : le tone of voice et le logo.
- **Design system** : typographie, couleurs, mise en page, composants et accessibilité.

### Pour un humain, pour un agent

Chaque page se lit de haut en bas : une intention, des règles, puis ce qu'il faut faire et éviter. Les valeurs exactes (couleurs, tailles, espacements) sont données en clair, jamais seulement en image.

Un agent qui produit pour entre-espace (texte, page, visuel) part de deux fichiers :

- [le brandbook complet en Markdown](/brandbook.md), une seule page, sans mise en forme ;
- [les jetons du design system en JSON](/brandbook/tokens.json), qui reflètent les variables CSS du site.


Les pages marquées **Proposition** ont été rédigées à partir des textes de Denis Giraudon et attendent sa validation. Tant qu'elles portent cette mention, elles se lisent comme des hypothèses de travail, pas comme des règles.

---

## Lignes directrices · Entre-espace

> Pourquoi ce nom : l'espace entre deux mondes, deux expertises, deux tensions, là où le design travaille.

> Statut : proposition, en attente de validation par Denis Giraudon.

Source : https://www.entre-espace.net/brandbook/entre-espace

Un entre-espace, c'est l'espace qui sépare deux choses et qui, du même coup, les relie. Une marge, un seuil, un interstice. C'est là que le design travaille : non pas au centre d'une discipline, mais à la jonction de plusieurs.

### Pourquoi ce nom me ressemble

Culture et design, science et éthique, commun et individuel, je me suis toujours senti tiraillé par la tension entre les deux. J'ai également toujours accueilli cette capacité qui, comme toutes les caractéristiques, peut aussi bien passer de super-pouvoir à malédiction. L'entre-espace est cet endroit où j'essaie d'exprimer ce en quoi je crois, en pouvant laisser aller tous les atypismes qui font de moi ce que je suis : un entre-espace.

### D'où vient le nom

Le premier entre-espace, en 2010, était un blog "entre design et culture". Le nom disait déjà le geste : se placer entre deux mondes plutôt que dans l'un d'eux. Le site a fermé, puis a repris vie en 2025 avec la même idée, élargie à la design fiction, à la dataviz et aux essais critiques.

### Ce que le nom engage

- **Chaque projet est un entre-espace.** Les cas du portfolio s'ouvrent tous par une tension : "l'entre-espace entre" une contrainte et une autre, entre ce que disent les chiffres et ce que vivent les gens, entre la vision d'un fondateur et la réalité d'un collectif.
- **Un entre-espace met en dialogue des expertises.** Un rapprochement entre deux disciplines s'appuie sur une analyse identifiable, pas sur une simple analogie.
- **Le vide est une forme.** Le logo le dessine : quatre chevrons qui se tournent le dos et laissent un espace au centre. L'entre-espace n'est pas un manque à combler, c'est le lieu où quelque chose devient possible.

### Les mots de la famille

Le préfixe circule dans les rubriques : **Entre-temps** (le cahier de notes), **Entre-aperçu** (ce qui a été vu ailleurs), **entre-espaces** (l'ancien nom de la carte des idées). Il se garde en français, y compris dans la version anglaise du site, où "entre-espace" se traduit au besoin par "in-between space".


**À faire** : écrire "entre-espace" en minuscules dans le texte courant, avec son trait d'union ; Entre-espace avec majuscule en début de phrase ou comme nom de marque.



**À éviter** : "Entre Espace", "EntreEspace", "entre espace" sans trait d'union.

---

## Lignes directrices · Manifeste

> Le Manifeste d'entre-espace et la méthodologie de l'objet : le design comme travail sur les conditions de coopération.

Source : https://www.entre-espace.net/brandbook/manifeste

**« Je tisse les liens d'un collectif créatif, ouvert et impactant par le Design ».**

### I believe in

**« Le design fait partie de la solution ».**

Je crois en une approche du design où le professionnel agit comme un **cartographe d'itinéraires**, capable de transformer une simple roadmap en une carte de trajectoires lisibles. Mon action s'inscrit dans une recherche de **lucidité systémique** pour répondre aux défis de notre **« destin commun »**.

**Ma conviction profonde :** « Le designer en collectif est l'un des métiers qui peuvent rendre tangible un **humanisme planétaire** à l'échelle des projets ». Son rôle est de créer les conditions pour que des collectifs lucides choisissent leurs itinéraires en connaissance de cause, en voyant comment leurs choix s'inscrivent dans une communauté de destin terrestre.

### La méthodologie de l'objet

**« Chaque personne qui pratique le design devrait essayer de visualiser son projet comme un objet ».**

Pour garantir la cohérence d'une solution, il est impératif de suivre ce protocole de manipulation physique et intellectuelle :

1. **« Tourner autour »** pour en voir toutes les perspectives.
2. **« Le tenir dans sa main »**, le peser et tester sa cohérence.
3. **« Le manipuler »** pour vérifier sa facilité d'utilisation et son accessibilité.
4. **« Le scanner »** et vérifier toutes les connexions.
5. **« Le poser sur la table »** et enfin le documenter.

Les postures et la place de l'IA, qui prolongeaient le Manifeste, ont désormais leurs pages : [Postures & principes design](/brandbook/principes-design) et [Postures & principes IA](/brandbook/principes-ia).

---

## Lignes directrices · Postures & principes design

> Les quatre postures du designer en collectif et les principes qui guident ses choix.

> Statut : proposition, en attente de validation par Denis Giraudon.

Source : https://www.entre-espace.net/brandbook/principes-design

Les postures disent qui je suis dans un projet. Les principes disent comment je choisis.

### Les 4 postures

Quatre rôles pour orchestrer la complexité d'un projet (extrait du Manifeste) :

- **Design Strategist** : je tisse les liens pour assurer la synchronisation des objectifs à leurs mesures et faire rayonner les pratiques design.
- **Design Lover** : l'écoute et l'argumentation sont la base du commun ; je crée les **rites et rythmes** de l'équipe pour remplacer le "faire faire" par le **"faire penser"**.
- **Design Thinker** : je crée avec empathie le **bon atelier** pour transformer chaque problème en opportunité collective.
- **Design Maker** : j'assure avec méthode et pédagogie la qualité du design produit, de la discovery au delivery, avec l'impact utilisateur pour boussole.

### Principes


**Proposition.** Ces huit principes sont tirés des textes de Denis Giraudon, chacun avec sa source. À garder, reformuler ou retirer.


#### 1. Lier plutôt que séparer

Le métier de designer est d'abord un métier de liens : entre disciplines, personnes, usages, règles et conséquences. Un livrable qui isole une partie du système sans dire ce qu'elle touche est incomplet.
*Source : le texte « Lier plutôt que séparer ».*

#### 2. Rendre lisible sans simplifier

Le cartographe ne supprime pas les routes difficiles : il les rend lisibles. On clarifie la structure, on garde la complexité qui fait le sens.
*Source : Itinéraires, la carte d'itinéraires.*

#### 3. Faire penser plutôt que faire faire

Un atelier réussi laisse au collectif une compréhension partagée, pas une liste de tâches. Les rites et les rythmes servent à penser ensemble.
*Source : la posture Design Lover.*

#### 4. Tourner autour de l'objet avant de trancher

Avant de décider, on regarde le projet sous tous ses angles, on le pèse, on le manipule, on vérifie ses connexions. La décision vient après.
*Source : la méthodologie de l'objet.*

#### 5. Des croyances, pas des certitudes

Une conviction interne est une hypothèse tant qu'elle n'a pas été confrontée au terrain. On la formule, on la teste, on mesure.
*Source : les cas Purpose, Pillars, Principles et Créer un pôle user research.*

#### 6. Mesurer ce que l'on avance

L'impact se prouve : audit chiffré, niveau de preuve d'un constat, RRL et PRL d'une fiction. On dit ce que l'on sait, avec quel degré de certitude.
*Source : les audits, la recherche atomique, la méthode RRL/PRL.*

#### 7. Être éthique est un choix

Une méthode, même systémique, ne rend pas éthique. On demande qui bénéficie, qui paie, et ce que le cadre laisse dehors.
*Source : « By éthic, by design », l'exemple Yuka.*

#### 8. La forme au service du sens

La forme n'habille pas une idée, elle la porte. Une couleur code, une image documente, un mot déplace un cadre.
*Source : le Préambule, le Bauhaus.*

---

## Lignes directrices · Postures & principes IA

> La place de l'IA dans le travail : ses postures, ses limites, et la responsabilité de l'humain sur ce qui est publié.

> Statut : proposition, en attente de validation par Denis Giraudon.

Source : https://www.entre-espace.net/brandbook/principes-ia

**« Passer du design des fonctions périphériques au levier systémique ».**

L'IA ne doit pas être un gadget de surface, mais une **plaque structurelle** intégrée à la carte d'itinéraires. L'approche consiste à (extrait du Manifeste) :

- utiliser l'IA comme **agent spécialisé** pour vérifier la cohérence d'un backlog ou suggérer des indicateurs de maturité ;
- architecturer des **champs de possibilités** où chaque couche périphérique (IA, data) devient un levier de transformation systémique ;
- assurer une **gouvernance adaptative** pour intégrer les normes éthiques et réglementaires (AI Act) au cœur des décisions collectives.


**Proposition.** Les postures et les principes ci-dessous sont tirés du REX de design fiction avec IA, de la charte éditoriale et du Manifeste. À valider.


### Les postures de l'IA

- **L'agent spécialisé** : il vérifie, compare, documente. Il ne décide pas.
- **L'assistant critique** : il comprend, cartographie, produit, puis cherche les failles de ce qu'il a produit.
- **Le révélateur** : comme le Petit Prince de Design Infection, il regarde là où le récit officiel craque, au lieu de résorber l'écart.

### Principes

#### 1. L'humain répond du conte

Si un texte ou une image sort de l'atelier, l'auteur doit pouvoir se nommer comme totalement responsable de ce qui a été produit. « Ce n'est pas moi, c'est l'outil » n'existe pas.
*Source : REX de design fiction avec IA.*

#### 2. Séparer les couches

La fiction n'est pas le socle réel, le commentaire n'est pas l'image, l'image n'est pas la preuve. L'IA aime recoller ce que l'on sépare : on l'en empêche.
*Source : REX de design fiction avec IA.*

#### 3. Garder la friction

L'IA générative tend vers la fluidité et la résolution. La contradiction, l'angle mort et le trouble se remettent à la main dans le texte.
*Source : REX de design fiction avec IA.*

#### 4. Une hypothèse n'est pas un fait

Chaque affirmation factuelle a sa source. On distingue ce qui est sourcé, ce qui est une hypothèse et ce qui reste à vérifier.
*Source : la charte éditoriale, valeur 1.*

#### 5. Ne jamais inventer de vécu

Aucun souvenir, aucune émotion, aucune parole n'est attribué à l'auteur s'il ne l'a pas écrit ou dit.
*Source : le brand book éditorial, contrat de travail pour une IA.*

#### 6. Rendre visibles les interventions

Ce que l'IA ajoute se voit : en violet dans les copies de travail, et par une mention en pied de page sur le site.
*Source : le brand book éditorial ; le pied de page d'entre-espace.*

#### 7. Dire le coût

Toute production qui a demandé un travail d'IA notable se termine par une note sur l'ordre de grandeur de son coût (léger, modéré, conséquent) et le modèle utilisé.
*Source : la charte éditoriale, valeur 2.*

---

## La marque · Tone of voice

> Comment entre-espace écrit : faire sentir avant de faire comprendre, puis relier. Deux voix, une typographie, des règles.

> Statut : proposition, en attente de validation par Denis Giraudon.

Source : https://www.entre-espace.net/brandbook/ton

**Faire sentir avant de faire comprendre, puis relier ce que l'habitude fait regarder séparément.**

Le mouvement caractéristique va d'une expérience, d'un objet ou d'une référence culturelle vers une question de conception, puis vers ses conséquences humaines, collectives et écologiques. Un vinyle, un casque, un lieu, une conversation permettent d'entrer dans l'idée : le concret n'est pas une décoration ajoutée après l'argument, il le construit.

### Deux voix

- **Corey** : le registre essayiste. Un "je" situé, une position argumentée, une critique qui nomme un mécanisme plutôt qu'une personne.
- **Coreygraphe / Denis Giraudon** : le registre data-fiction. Factuel en surface ; la tension se loge dans le montage des chiffres. Chaque chiffre est sourcé.

Même idiolecte, régimes d'énonciation différents. On ne mélange pas les deux dans un même texte.

### Le ton, dimension par dimension

| Dimension | À préserver | À éviter |
|---|---|---|
| Incarnation | Un "je" situé : j'observe, j'ai éprouvé, je propose. | Le gourou omniscient, la fausse confession. |
| Relation | Un lecteur invité à regarder et discuter. | La leçon surplombante. |
| Sensibilité | Des images précises quand elles portent le propos. | Le lyrisme générique à chaque paragraphe. |
| Critique | Une position assumée, un mécanisme nommé. | La neutralisation molle ou la surenchère indignée. |
| Pédagogie | Une distinction, un exemple, ses conditions d'application. | Le jargon empilé, le cours sans enjeu. |
| Humour | Le clin d'œil, l'autodérision, le jeu de mots occasionnel. | La formule publicitaire, le sarcasme contre des personnes. |
| Certitude | Affirmer quand c'est assumé, réserver quand c'est nécessaire. | Transformer un doute en verdict. |
| Rythme | Fluide dans la structure, avec des tensions dans la narration. | Lisser les aspérités par défaut. |

### Typographie de l'écriture


**À faire**

- Guillemets "…" pour mettre en avant un mot ou une expression.
- Guillemets « … » pour une citation.
- Deux-points, virgule, parenthèses ou nouvelle phrase là où l'on serait tenté par un tiret.
- Espaces insécables avant ; : ! ? et à l'intérieur des « » (le site les ajoute seul).



**À éviter**

- Le tiret cadratin, sauf en début de réplique dans un dialogue.
- Les majuscules de prestige et les anglicismes sans nécessité de métier.


### Adresse

Vouvoiement dans les articles ; tutoiement dans les outils et les interfaces de Novum. Un texte choisit son lecteur : designers, équipes produit, data et IA, ou un public plus large.

### Lexique

Champs récurrents : liens, collectif, contexte, focale, complexité, expérience, conséquences, mesure. Images structurantes : carte, itinéraire, chemin, pont, foyer, tissage. Une image directrice par mouvement de texte ; on ne saupoudre pas "systémique" ou "complexité" pour faire ressemblant.


**Statut.** La signature (faire sentir, comprendre, relier) et les deux voix sont validées. Le tableau du ton et le lexique viennent du brand book éditorial en version 0.1 et restent des propositions.

---

## La marque · Logo

> Un X de quatre chevrons, un mot écrit à la main : versions, tailles, usages et fichiers.

Source : https://www.entre-espace.net/brandbook/logo

Le logo associe un **X de quatre chevrons** et le mot **entre-espace** écrit à la main, en capitales étroites. Les quatre chevrons se tournent le dos et laissent un vide au centre : l'entre-espace.

### Versions

- **Mot foncé** (#1C1E24) sur fond clair.
- **Mot clair** (#ECECEE) sur fond sombre.

Le X garde toujours ses quatre teintes d'origine : jaune #FBCB04, cyan #4DC1D5, lime #CFDD02, rose #ED6FA7. Sur le site, le logo est inséré en SVG et le mot prend la couleur du texte : il passe seul du foncé au clair avec le mode sombre.

### Tailles

| Emplacement | Hauteur |
|---|---|
| En-tête, ordinateur | 60 px |
| En-tête, téléphone | 40 px |
| Pied de page | 32 px |

En dessous de 24 px, le mot n'est plus lisible : on utilise les quatre carrés seuls (favicon).

### Espace de protection

Autour du logo, garder au minimum la largeur d'un chevron de vide, de chaque côté.


**À éviter** : recolorer le X, le poser sur une photo chargée, l'étirer ou le déformer, l'enfermer dans un cadre ou un aplat de couleur, séparer le mot du X dans une même composition.


### Fichiers

- [Logo, mot foncé (SVG)](/img/logo-entre-espace.svg)
- [Logo, mot clair (SVG)](/img/logo-entre-espace-clair.svg)
- [Les quatre carrés, favicon (SVG)](/favicon.svg)

---

## Design system · Typographie

> IBM Plex Sans pour le texte et les titres, DM Mono pour les étiquettes et l'interface ; Poppins et Caveat Brush pour les planches.

Source : https://www.entre-espace.net/brandbook/typographie

Deux familles sur le site, servies par le site lui-même (aucun appel à un service tiers), et deux autres pour les planches et infographies.

### Familles

| Famille | Rôle | Graisses |
|---|---|---|
| IBM Plex Sans | Texte courant, intertitres, titres | Light 300 (texte), Medium 500 (intertitres, gras), Bold 700 (titres de page) |
| DM Mono | Étiquettes, surtitres, dates, menus, filtres | Regular 400, en capitales, approche .06em |
| Poppins | Planches et infographies (Qui est « je » ?, séries LinkedIn) | 300 à 700 |
| Caveat Brush | Devises écrites à la main, sur les planches | 400 |

### Échelle

| Jeton | Valeur | Usage |
|---|---|---|
| `--t-label` | 12px | Étiquettes, surtitres, menus (DM Mono) |
| `--t-meta` | 14px | Métadonnées, légendes |
| corps | 16px, interligne 1,65 | Texte courant |
| `--t-intro` | clamp(21px, 2.1vw, 28px) | Chapô, entrées du menu mobile |
| h3 | 1.12rem | Intertitres de niveau 3 |
| h2 | 1.45rem | Intertitres |
| h1 | clamp(1.9rem, 4.5vw, 2.8rem) | Titre de page |
| `--t-titre` | clamp(30px, 3vw, 40px) | Titres de section |
| `--t-une` | clamp(42px, 6.4vw, 96px) | Grands titres (pied de page) |

Titres en interlignage serré (1,12) et approche légèrement négative (-0,025em).


**À faire** : une colonne de lecture de 42rem au plus (65 à 75 signes par ligne) ; le surlignage jaune pour une phrase clé.



**À éviter** : le gras pour des paragraphes entiers, l'italique pour mettre en avant (réservé aux titres d'œuvres et aux mots étrangers), plus de deux graisses dans un même bloc.

---

## Design system · Couleurs

> Quatre couleurs en accent et en codage, jamais en décor ; des neutres en clair et en sombre.

Source : https://www.entre-espace.net/brandbook/couleurs

Le fond reste sobre. Chaque couleur code une rubrique d'écriture ou une famille de compétences ; elle n'habille pas une page.

### Accents

| Couleur | Valeur | Jeton | Code |
|---|---|---|---|
| Jaune | #F7C600 | `--jaune` | Entropie, surlignage ; prospective et systémie |
| Cyan | #29BDEC | `--cyan` | Entre-temps ; design ops |
| Lime | #C4D630 | `--lime` | Portfolio ; UX/UI design |
| Magenta | #E6007E | `--magenta` | Design infection ; recherche et sémiotique ; bandeau citation |

Toujours dans cet ordre quand elles apparaissent ensemble : jaune, cyan, lime, magenta.

### Neutres

| Rôle | Jeton | Clair | Sombre |
|---|---|---|---|
| Fond | `--fond` | #FFFFFF | #141518 |
| Texte | `--texte` | #1C1E24 | #ECECEE |
| Texte secondaire | `--doux` | #5C5E66 | #A6A8B0 |
| Surface | `--surface` | #F4F4F5 | #1F2127 |
| Filet | `--filet` | #E6E6E6 | #2E3037 |

Le site suit le réglage clair ou sombre de l'appareil. La carte des idées reste sur fond blanc dans les deux cas : ses couleurs de lignes sont pensées pour lui.


**À faire** : une couleur d'accent sur une petite surface (pastille, carré, surlignage) ; texte foncé sur jaune, cyan et lime, texte blanc sur magenta.



**À éviter** : un fond de page coloré, un filet ou un bandeau de couleur en bord de carte ou de fenêtre, du texte jaune, cyan ou lime sur fond blanc (contraste insuffisant), la couleur comme seule porteuse de sens.

---

## Design system · Mise en page

> Largeurs, marges, grilles, gabarits et points de rupture du site.

Source : https://www.entre-espace.net/brandbook/mise-en-page

Une page large pour regarder, une colonne étroite pour lire.

### Largeurs et marges

| Jeton | Valeur | Rôle |
|---|---|---|
| `--large` | 1400px | Largeur maximale du contenu |
| `--mesure` | 42rem | Colonne de lecture |
| `--marge` | clamp(16px, 4vw, 56px) | Marge latérale, de 16 px sur téléphone à 56 px |
| `--r-m` | 8px | Rayon des surfaces (fiches, notes) |
| `--r-pill` | 999px | Boutons en pilule |

### Gabarits

| Gabarit | Composition |
|---|---|
| Article | Une colonne de 42rem ; images à la largeur de la colonne, les suivantes élargies jusqu'à 72rem |
| Entropie | Deux colonnes : image fixe (65 %) et texte (35 %), surlignage jaune |
| Cas du portfolio | Une colonne ; fiche en deux colonnes équilibrées (rôle et client, période et contexte, livrables dans la plus courte) |
| Rubrique | Titre centré, grille de cartes en 3, 2 puis 1 colonne |
| Accueil | Héros pleine largeur, derniers textes en cartes, duo Novum / Entre-aperçu, extrait du Manifeste, bandeau citation |
| Brandbook | Navigation gauche fixe, contenu à droite |

### Points de rupture

| Largeur | Ce qui change |
|---|---|
| 1024 px | La carte des idées laisse place à un extrait fixe |
| 900 px | Les grilles passent de 3 à 2 colonnes |
| 640 px | Menu en panneau, une colonne partout |

### Rythme vertical

Les sections se séparent par un filet (1px, `--filet`) et 3 à 5rem d'espace. Les paragraphes ont 1,1rem de marge basse ; les intertitres h2, 2,6rem au-dessus.


**À éviter** : du texte courant sur toute la largeur, des cartes de hauteurs inégales dans une même rangée, des ombres décoratives.

---

## Design system · Composants

> Les pièces qui reviennent : surtitre et pastille, surlignage, boutons, carte, fiche, note, quatre carrés, bandeau citation.

Source : https://www.entre-espace.net/brandbook/composants

Chaque composant a un rôle unique. On ne crée pas une variante quand un composant existant suffit.

| Composant | Rôle | Règle |
|---|---|---|
| Surtitre et pastille | Situer un texte : rubrique, série, tension | DM Mono en capitales ; la pastille porte la couleur de la rubrique |
| Surlignage | Marquer une phrase clé | Jaune translucide ; une ou deux phrases par texte, pas plus |
| Bouton plein | L'action principale | Un seul par écran, en pilule |
| Bouton contour | Les actions secondaires | Même forme, sans fond |
| Carte | Mener vers un texte | Visuel 5:3, étiquette, titre, résumé, date et temps de lecture |
| Fiche | Résumer un cas | Surface grise, deux colonnes de définitions |
| Note | Une mise à jour, un statut | Surface grise, texte en 0,92rem |
| Les quatre carrés | La signature réduite | Favicon, puce, codage d'une liste |
| Bandeau citation | Une phrase qui porte la page | Pleine largeur, magenta, texte blanc ; un par page au plus |

---

## Design system · Accessibilité

> Le niveau visé (WCAG 2.2 AA), les contrastes mesurés et les règles qui le tiennent.

Source : https://www.entre-espace.net/brandbook/accessibilite

Le site vise le niveau **WCAG 2.2 AA**. Il est contrôlé avec axe-core sur toutes les pages, en clair et en sombre, sur ordinateur et sur téléphone : 0 écart au 31 octobre 2026.

### Contrastes mesurés

| Paire | Ratio | Usage |
|---|---|---|
| Texte sur fond, clair | 16,7:1 | Texte courant |
| Texte secondaire sur fond, clair | 6,5:1 | Résumés, métadonnées |
| Texte secondaire sur surface, clair | 5,9:1 | Fiches, notes |
| Texte sur fond, sombre | 15,5:1 | Texte courant |
| Texte secondaire sur fond, sombre | 7,7:1 | Résumés, métadonnées |
| Texte foncé sur jaune | 10,3:1 | Étiquettes de légende |
| Texte foncé sur cyan | 7,6:1 | Étiquettes de légende |
| Texte foncé sur lime | 10,3:1 | Étiquettes de légende |
| Blanc sur magenta | 4,5:1 | Bandeau citation, légende |
| Jaune sur fond blanc | 1,6:1 | Jamais pour du texte |
| Cyan sur fond blanc | 2,2:1 | Jamais pour du texte |

### Règles

- **Couleur jamais seule** : chaque famille de couleur a aussi un motif (points, hachures) dans les graphiques, et un nom.
- **Clavier** : tout ce qui s'ouvre au survol s'ouvre aussi au clavier (menus, bulles des graphiques, nœuds de la fleur) ; Échap referme.
- **Focus visible** : contour de 2px dans la couleur du texte.
- **Lien d'évitement** « Aller au contenu » en tête de chaque page.
- **Titres sans saut de niveau** : un h1 par page, puis h2, h3.
- **Images** : un texte alternatif qui dit ce que l'image montre ; vide si elle est décorative.
- **Mouvement** : pas de lecture automatique ; les animations s'arrêtent si l'appareil demande moins de mouvement.
- **Cibles tactiles** : 44 × 44 px au minimum.
- **Langue** : chaque page déclare sa langue ; les passages dans une autre langue aussi.
- **Mode sombre** : le site suit le réglage de l'appareil, pour que le navigateur ne recolore pas les pages à sa façon.

---

## Jetons (JSON)

```json
{
  "_source": "Jetons du design system entre-espace. Miroir de src/styles/global.css (:root et le mode sombre) : toute modification se fait dans les deux fichiers.",
  "couleur": {
    "accent": {
      "jaune": {
        "valeur": "#F7C600",
        "jeton": "--jaune",
        "code": "Entropie, surlignage, prospective et systémie"
      },
      "cyan": {
        "valeur": "#29BDEC",
        "jeton": "--cyan",
        "code": "Entre-temps, design ops"
      },
      "lime": {
        "valeur": "#C4D630",
        "jeton": "--lime",
        "code": "Portfolio, UX/UI design"
      },
      "magenta": {
        "valeur": "#E6007E",
        "jeton": "--magenta",
        "code": "Design infection, recherche et sémiotique, bandeau citation"
      }
    },
    "logo": {
      "jaune": "#FBCB04",
      "cyan": "#4DC1D5",
      "lime": "#CFDD02",
      "rose": "#ED6FA7"
    },
    "neutre": {
      "clair": {
        "fond": "#FFFFFF",
        "texte": "#1C1E24",
        "doux": "#5C5E66",
        "surface": "#F4F4F5",
        "filet": "#E6E6E6",
        "surligne": "rgba(247, 198, 0, .42)"
      },
      "sombre": {
        "fond": "#141518",
        "texte": "#ECECEE",
        "doux": "#A6A8B0",
        "surface": "#1F2127",
        "filet": "#2E3037",
        "surligne": "rgba(247, 198, 0, .34)"
      }
    }
  },
  "typographie": {
    "texte": {
      "famille": "IBM Plex Sans",
      "graisses": {
        "texte": 300,
        "intertitre": 500,
        "titre": 700
      },
      "corps": "16px",
      "interligne": 1.65
    },
    "etiquette": {
      "famille": "DM Mono",
      "graisse": 400,
      "taille": "12px",
      "casse": "capitales",
      "approche": ".06em"
    },
    "echelle": {
      "label": "12px",
      "meta": "14px",
      "intro": "clamp(21px, 2.1vw, 28px)",
      "titre": "clamp(30px, 3vw, 40px)",
      "une": "clamp(42px, 6.4vw, 96px)",
      "h1": "clamp(1.9rem, 4.5vw, 2.8rem)",
      "h2": "1.45rem",
      "h3": "1.12rem"
    },
    "planches": {
      "texte": "Poppins",
      "devise": "Caveat Brush"
    }
  },
  "mise_en_page": {
    "mesure": "42rem",
    "large": "1400px",
    "marge": "clamp(16px, 4vw, 56px)",
    "rayon": {
      "m": "8px",
      "pilule": "999px"
    },
    "ombre": {
      "clair": "0 6px 20px rgba(0,0,0,.08)",
      "sombre": "0 6px 20px rgba(0,0,0,.5)"
    },
    "points_de_rupture": {
      "telephone": "640px",
      "tablette": "900px",
      "carte_metro": "1024px"
    }
  },
  "regles": {
    "tiret_cadratin": "jamais, sauf en début de réplique de dialogue",
    "guillemets": {
      "mise_en_avant": "\"…\"",
      "citation": "« … »"
    },
    "couleur": "accent et codage seulement, jamais en décor ; jamais seule porteuse de sens",
    "bordures_colorees": "jamais de filet ou de bandeau de couleur en bord de carte ou de fenêtre"
  }
}
```