# 01 — Marque, logos et images **Statut : fait · Phase : P0 · Mis à jour : 25/10/2026.** ## 1. Décisions déjà prises - **Mot-symbole** : `recit` en minuscules, **Red Hat Display Black Italic** (900, italique), vectorisé en chemins SVG (aucune police chargée à l'affichage). - **Marque** : pleine et inclinée, comme le framework de sites (`translate(6.5 0) skewX(-15)`). - **Icône de base, option B** : des signes de ponctuation découpés dans la feuille. - **Marque : Q07** (finalistes Q03 et Q07) : - ✅ **Q07, les points de suspension `…`, est retenu** comme marque de Récit (décision du 24/10/2026). Il évoque l'histoire « à suivre ». - Q03, le guillemet `"`, est archivé. Il pourra servir d'icône secondaire, par exemple pour les citations, ou d'état de chargement. - **Une icône par format** (famille dérivée de la marque n° 30, le rouleau qui se déroule) : `deck`, `motion`, `report`, `docs`, `toon`, `book`. À harmoniser avec Q07 (même découpe en signes). - **Couleur : une teinte par format** (décision du 25/10/2026, elle **remplace** celle du 24/10 qui imposait une teinte unique). La marque reste la même partout — c'est l'icône et la teinte qui situent le format. Les valeurs claires et sombres des dix teintes sont dans `brand/boards/colors/palette.json`, les planches de comparaison dans `brand/boards/colors/index.html` (`pnpm -F @recit/brand-tools boards:colors`). Une teinte ne passe pas 4,5:1 sur `#ffffff` et `#0b0b0f` à la fois (le meilleur théorique est environ 4,43:1) : chaque teinte a donc une valeur claire et une valeur sombre de `--primary`. Mise en œuvre après les lots de l'audit (`audit.md` §6), voir `06-roadmap.md`. | Cible | Teinte | Pourquoi | | -------------------------------------------- | ----------------- | ---------------------------------------------------- | | **recit.dev** | **noir et blanc** | la vitrine globale n'appartient à aucun format | | **Défaut** : docs, components, sites d'outil | **graphite** | sobre, ne concurrence aucune teinte de format | | `deck` (presentation.recit.dev) | bleu | — | | `motion` (motion.recit.dev) | violet | ancienne couleur de travail, conservée pour la vidéo | | `report` (report.recit.dev) | sarcelle | — | | `toon` (webtoon.recit.dev) | orange | — | | `book` (book.recit.dev) | ambre | — | | `roadmap` (roadmap.recit.dev) | vert | — | | `calendar` (calendar.recit.dev) | rouge | — | | `stories` (story.recit.dev) | magenta | — | | `atlas` et bloc `::map` (maps.recit.dev) | indigo | — | Le défaut de `@recit/theme` (donc d'un deck ou d'une vidéo sans thème choisi) est **graphite**, pas la teinte d'un format : un utilisateur qui n'a rien configuré n'hérite pas de la couleur de Récit. ## 2. Où se trouvent les fichiers aujourd'hui Tout est dans **presentation-engine**, rien n'est commité. ### 2.1 Planches PNG (racine de presentation-engine) | Fichier | Contenu | | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | | `proposal-recit.png` | Déclinaison du logo Récit | | `proposal-recit-og.png` | Carte Open Graph | | `proposal-recit-base.png` | Pistes d'icône de base (options A, B…) | | `proposal-recit-signs.png` | Itérations « signes découpés » (option B), d'où viennent Q03 et Q07 | | `proposal-recit-colors.png` | Itérations de couleur, **en cours** | | `proposal-story.png` | Famille de noms et icônes par format | | `proposal-1.png` à `proposal-5.png`, `proposal-all.png`, `proposal-names.png`, `proposal-narrato-*.png` | Historique (nom « Presentation », Kami / Emaki / Kamido, Narrato) | ### 2.2 SVG (`presentation-engine/docs/public/logo-proposals/recit/`) | Fichiers | Contenu | | ----------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | `final/q07-*.svg` (**retenu**), `final/q03-*.svg` (archivé) | Les deux finalistes, en variantes `color`, `dark`, `light`, `icon`, `stacked` et `tile` | | `fmt-{deck,motion,report,docs,toon,book}-*.svg` | Icônes par format (`color`, `dark`, `light`, `icon`, `stacked`). **À créer** dans la même famille : `fmt-roadmap`, `fmt-calendar`, `fmt-stories` | | `base-blank-*.svg` | Feuille vide (base des icônes) | | `og-card.svg` | Carte de partage 1200×630 | | `tile-{black,white,violet,quotes}.svg` | Tuiles d'application (favicon, avatar GitHub ou npm) | | `m01–m08`, `q01–q12`, `t01–t06`, `w01–w03` | Itérations non retenues | | `index.html`, `base.html`, `signs.html`, `colors.html` | Planches de comparaison (navigateur) | | `sections.json`, `signs.json` | Données des planches | ### 2.3 Générateurs (⚠️ temporaires) Les SVG sont générés par des scripts Node (opentype.js) qui vivent dans le **scratchpad de la session**. Ce dossier sera supprimé : ``` ``` **Action prioritaire** : copier `recit.mjs` et `recit-signs.mjs` dans `brand/tools/` avant toute autre chose. Sans eux, les itérations de couleur ne pourront plus être régénérées. Les polices se réinstallent depuis npm (`@fontsource/red-hat-display@5.3.0`), il n'est pas nécessaire de les versionner. ## 3. Cible dans ce dépôt On ne touche pas à `assets/` (le `github-hero.png` du framework de sites). On crée un dossier `brand/` : ``` brand/ logo/ q07-*.svg, puis recit-{color,dark,light,icon,stacked,tile}.svg une fois la couleur choisie archive/ q03-*.svg formats/ fmt-*-{icon,color,dark,light,stacked}.svg tiles/ tile-*.svg, favicon.svg (dérivé de la tuile retenue) social/ og-card.svg (+ og-card.png exporté) boards/ proposal-recit*.png, proposal-story.png (historique utile) tools/ recit.mjs, recit-signs.mjs, package.json (opentype.js, @fontsource/red-hat-display) ``` Les planches anciennes (`proposal-1..5`, `narrato`, `names`) restent dans presentation-engine comme archive. ### Utilisation des assets | Cible | Fichier | | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | Tous les sites (`sites/*`, via `@recit/site-kit`) : `logo.src.light` / `logo.src.dark` | `brand/logo/recit-light.svg`, `recit-dark.svg` exposés par `@recit/site-kit` | | Favicon du site | `brand/tiles/favicon.svg` | | Icônes de format dans la doc (cartes « Formats », sidebar) | `brand/formats/fmt-*-icon.svg` | | Avatar GitHub `recit-dev`, avatar npm `@recit` | `brand/tiles/tile-*.svg` exporté en PNG 512×512 | | Open Graph de recit.dev | `brand/social/og-card.png` | | Interface du deck (bouton « powered by », page 404) | `brand/logo/recit-icon.svg` | ## 4. Actions - [ ] Copier les générateurs dans `brand/tools/` (voir 2.3) et vérifier que `node brand/tools/recit-signs.mjs` régénère `final/`. - [ ] Copier Q07 (et Q03 dans `brand/archive/`), les icônes de format, les tuiles et la carte OG dans `brand/`. - [x] Itérations de couleur sur **Q07** : dix teintes générées en clair et en sombre (`brand/boards/colors/`), avec leurs tokens `--primary` et leurs rapports de contraste. - [x] Choisir entre Q03 et Q07 : **Q07**. - [x] Choisir la règle de couleur : **une teinte par format** (25/10, voir §1), noir et blanc pour recit.dev, graphite par défaut. - [ ] Générer le jeu final par teinte : logo, icônes de format, tuiles et carte OG de chaque site, depuis `palette.json` (un dossier par teinte existe déjà sous `brand/boards/colors/`, il faut promouvoir les fichiers retenus dans `brand/`). - [ ] Décliner Q07 par sous-domaine : la même marque avec l'icône du format pour presentation., motion., etc. (voir `07-domaines.md`), plus une carte OG par site. - [ ] Générer les fichiers finaux `recit-*.svg` et exporter les PNG (favicon 32/180/512, OG 1200×630) : en noir et blanc pour recit.dev, dans sa teinte pour chaque site de format. - [ ] Dériver les tokens de thème (`--primary` en HSL) depuis `palette.json` : **graphite** pour le défaut de `@recit/theme`, la teinte du format pour chaque site (thème par site dans `@recit/site-kit`). - [ ] Vérifier les licences : Red Hat Display est sous OFL. Les mots-symboles vectorisés peuvent être distribués, la licence reste mentionnée dans `brand/tools/`.