# Companion — Exploration de marque 001

Document de travail · 24 septembre 2026 · Aucune direction validée.

## Brief de design

- Produit : poste de travail web pour le développement assisté par plusieurs moteurs d’agents.
- Public présumé : développeurs, makers et équipes produit qui pilotent plusieurs projets.
- Besoin central : passer d’une intention à un résultat vérifiable tout en gardant le contrôle.
- Promesse proposée : « Vous pilotez. Vos agents construisent. »
- Positionnement : le centre de gravité de votre développement avec l’IA.
- Personnalité : précis, capable, calme, complice.
- Action centrale : donner une instruction puis examiner les changements et le résultat.
- Critère de réussite : identifier rapidement le projet, l’agent, l’état et la prochaine action.
- Contrainte : conserver globalement la navigation et la structure du produit actuel.
- Liberté : aucune palette, typographie ou identité existante imposée.
- Direction privilégiée : ARC, cockpit orbital — précision, présence, profondeur, maîtrise.
- Mise en page : arborescence à gauche, sessions et vues en haut, conversation au centre, contexte à droite.
- Typographie : lecture sans sérif et métadonnées monospaces ; expressivité dans les titres.
- Couleur : grandes surfaces neutres, accent identitaire ciblé, statuts indépendants.
- Mouvement : feedback court et contextualisé, activité visible uniquement pendant une action.
- Accessibilité : libellés associés aux états, focus visible, mode sans animation, adaptation mobile.
- Livrable : trois directions comparables dans une démo HTML autonome avec données fictives.

## 1. Ce que révèle le produit

Analyse fondée sur README.md, docs/specifications/README.md, les composants du shell, lib/shell.ts et les composants de discussion. La maquette de référence Discussion a également été examinée. Cette étude ne constitue pas une recette d’une instance en fonctionnement.

Companion relie plusieurs dimensions habituellement dispersées : projets, sessions, moteurs d’agents, fichiers, Git, previews, contexte, mémoire et outils de projet. La marque peut exprimer l’orchestration et la continuité plutôt que se limiter à une conversation avec une IA.

Trois preuves de la promesse :

1. **Piloter** : plusieurs projets, sessions et moteurs dans un espace commun.
2. **Comprendre** : activité des outils, modifications, mémoire et consommation de contexte.
3. **Vérifier** : fichiers, Git et preview à proximité du travail agentique.

L’imaginaire « Tony Stark » devient une direction de design : un instrument personnel extrêmement capable, une profondeur maîtrisée, une interface réactive. Une identité originale doit émerger, sans reprendre les logos, noms, interfaces ou éléments narratifs de Marvel.

Le nom **Companion** est conservé dans cette exploration. ARC, FORGE et ION sont des noms de territoires artistiques, pas des propositions de renommage du produit. Aucun examen juridique de disponibilité n’a été effectué.

## 2. Structure conservée

Le code actuel expose six onglets principaux : Discussion, Fichiers, Git, Preview, Projet, Memory. Les anciennes maquettes exposaient davantage de vues directement ; la proposition suit le code actuel.

Repères conservés : arborescence projets/sessions à gauche, onglets de sessions ouverts, barre des vues de projet, fil de discussion et composeur, panneau de session latéral. La disposition mobile de la démo simplifie l’affichage pour la consultation ; elle ne propose pas un remplacement complet de la navigation mobile de production.

Le panneau droit réinterprète des informations existantes : moteur, quota, contexte consommé, modifications et preview. Le cadran représente le contexte consommé, pas une intelligence ou une puissance calculée artificiellement. Les valeurs sont fictives. La galerie comprend une discussion détaillée et cinq esquisses complémentaires ; ce ne sont pas six écrans fonctionnels complets.

La géométrie du cadran constitue un concept visuel à tester. Une barre discrète devra rester possible en mode compact. L’échelle de la démonstration favorise la comparaison sur écran ; une intégration demanderait de reprendre les tailles de lecture réelles et les préférences de densité existantes.

## 3. Trois territoires

### 01 — ARC / Cockpit orbital

**Idée :** vos agents gravitent autour de votre intention. Le centre reste humain.

**Émotion :** anticipation, maîtrise, intelligence présente.

**Palette :** Obsidienne #080D12 ; panneau #101922 ; relief #15222C ; cyan #68E0ED ; texte #E8F0F5 ; secondaire #98AAB8.

**Signe :** deux arcs ouverts et une ligne de connexion. Un C immédiatement perceptible, un centre commun, un mouvement vers l’extérieur. Fonctionne en monochrome ; vérifier sa distinction et sa lisibilité à 16 px avant validation.

**Typographies candidates :** Manrope pour l’interface et les titres ; IBM Plex Mono pour le code, les mesures et les identifiants. Démo rendue en polices système, donc validation typographique restant à faire.

**Géométrie :** angles de 8 px, traits fins, cadres imbriqués, cadrans réservés aux mesures. Lumière douce sur une sélection ou une action.

**Motion :** microfeedback 160 ms ; panneau 280 ms ; courbe cubic-bezier(.16,1,.3,1). Rotation périphérique pendant l’activité uniquement ; chiffres et lecture restent fixes. Aucune animation d’ambiance obligatoire.

**Voix :** « Prêt pour la suite. » / « Trois fichiers modifiés. À vous de vérifier. » / « Votre validation est nécessaire. »

**Déclinaisons :** marque sur fond sombre ; affiche avec arcs ouverts ; page d’entrée avec un seul noyau graphique ; favicon tiré du C ; captures produit avec fines lignes de repérage.

**Force :** correspondance directe avec l’univers demandé. **Vigilance :** contenir les halos et éviter le cliché du HUD saturé de cyan.

### 02 — FORGE / Atelier de haute précision

**Idée :** les intentions deviennent des objets construits, testés et livrables.

**Émotion :** robustesse, maîtrise artisanale, impact tangible.

**Palette :** Carbone #14120F ; panneau #1C1915 ; relief #26211B ; cuivre clair #FFB36A ; texte #F0E8DC ; secondaire #B2A596.

**Signe :** C usiné à ouverture franche et trait d’assemblage. Silhouette compacte ; fonctionne en gravure, monochrome et petit format après ajustements optiques.

**Typographies candidates :** Barlow, avec une variante condensée réservée aux titres de marque ; IBM Plex Mono pour l’instrumentation.

**Géométrie :** angles de 2 px, contrastes francs, séparateurs comme des joints d’assemblage, blocs de statut. Cuivre pour les commandes ; éviter de l’utiliser seul pour les avertissements.

**Motion :** microfeedback 120 ms ; panneau 220 ms ; mêmes courbes amorties, sans rebond. Un indicateur se verrouille sur un état terminé.

**Voix :** « Construit. Vérifié. À vous. » / « Correction prête pour revue. » / « Le test a échoué : voir le détail. »

**Déclinaisons :** plaques de marque, numérotation de versions, compositions typographiques massives pour les annonces, favicon angulaire.

**Force :** plus singulier et matériel ; caractère d’outil professionnel. **Vigilance :** préserver la convivialité de Companion et ne pas transformer le produit en console militaire.

### 03 — ION / Laboratoire augmenté

**Idée :** faire apparaître la clarté au sein de systèmes complexes.

**Émotion :** sérénité, lucidité, sophistication.

**Palette :** Porcelaine #F1F3F3 ; panneau #FAFBFA ; relief #E8EDF0 ; aluminium #CBD4DC ; indigo #4358CB ; texte #192B3B ; secondaire #526576.

**Signe :** C ouvert et lignes optiques. La lecture, le contexte et les couches de raisonnement deviennent un motif abstrait.

**Typographies candidates :** Instrument Sans ; IBM Plex Mono pour les métadonnées.

**Géométrie :** angles de 14 px, séparateurs fins, légère élévation, surfaces opaques. Éviter les transparences qui diminuent la lisibilité.

**Motion :** microfeedback 180 ms ; panneau 320 ms ; entrée courte par opacité et déplacement de 6 px maximum.

**Voix :** « Tout est prêt. À vous de jouer. » / « Le contexte est partagé. » / « Reprenez là où vous en étiez. »

**Déclinaisons :** grandes marges et dessins optiques dans les supports de marque ; captures claires ; favicon en indigo.

**Force :** démontre que le futurisme peut être lumineux ; bon territoire pour une identité plus ouverte. **Vigilance :** moins immédiatement spectaculaire que ARC ; tester le confort dans les vues de code denses.

## 4. Système commun proposé

### Hiérarchie et composants

- Surface de fond pour l’environnement ; panneau pour le travail ; relief pour la sélection.
- Un accent de marque principal. Réserver les halos aux éléments actifs.
- Icônes à trait cohérent, 16–20 px dans l’app ; aucun alphabet décoratif à apprendre.
- Graphiques uniquement associés à une information vérifiable.
- Corps de texte cible 14–16 px ; métadonnées 11–12 px ; titres d’écran 20–24 px. Les petites annotations du laboratoire ne sont pas la norme de production.
- Espacements : 4 / 8 / 12 / 16 / 24 / 32 / 48 px.
- Monospace réservée au code et aux données, pas aux paragraphes.
- Les logos des fournisseurs conservent leur identité dans une intégration réelle. Les glyphes de la maquette sont des substituts exploratoires.

### Couleurs sémantiques

| Rôle | ARC | FORGE | ION |
| --- | --- | --- | --- |
| Action | #68E0ED | #FFB36A | #4358CB |
| Texte sur action | #07191C | #251608 | #FFFFFF |
| Succès | #81DCAF | #ABD18C | #247044 |
| Erreur | #FF929A | #FF9692 | #B53D43 |
| Avertissement proposé | #F1C77B | #E9D78E | #8A560B |

Un avertissement porte un pictogramme et une phrase explicite. Les ajouts et suppressions Git gardent leurs signes + et −. La teinte seule n’est jamais porteuse de l’état.

### Tokens exploratoires

```css
:root {
  --page: #080D12;
  --surface: #101922;
  --raised: #15222C;
  --text: #E8F0F5;
  --muted: #98AAB8;
  --border: #263640;
  --accent: #68E0ED;
  --accent-ink: #07191C;
  --success: #81DCAF;
  --danger: #FF929A;
  --radius: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --duration-micro: 160ms;
  --duration-panel: 280ms;
  --ease-out: cubic-bezier(.16,1,.3,1);
}
```

La démo implémente les trois palettes avec les mêmes rôles CSS. Dans une intégration future, mapper ces rôles vers les tokens existants au lieu de créer un deuxième système concurrent.

### États à décliner avant intégration

Repos : surfaces mates. Survol : accent discret. Focus : contour visible. Actif : filet et fond légèrement teinté. Chargement : état textuel et indicateur mesuré, bouton indisponible. Vide : une action utile et une explication courte. Erreur : cause, conséquence et moyen de reprise. Succès : confirmation locale, sans animation qui bloque le travail.

La démonstration couvre sélection, focus, saisie, instruction vide, progression simulée, bouton désactivé et retour au repos. Les autres états sont une spécification à maquettter dans la prochaine passe, pas des fonctionnalités implémentées ici.

## 5. Direction éditoriale

**Promesse principale :** Vous pilotez. Vos agents construisent.

**Descripteur :** Votre poste de travail pour développer avec l’IA.

**Piliers :** contrôle humain, continuité du contexte, résultats observables.

**Ton :** précis, simple, calme. Companion rend l’action compréhensible. Garder le vouvoiement dans l’app ; pas de personnification théâtrale systématique.

**Exemples :**

- État vide : « Que construisons-nous aujourd’hui ? »
- Agent actif : « Analyse des fichiers concernés… »
- Besoin de validation : « Cette action attend votre accord. »
- Résultat : « Correction proposée. Deux fichiers à examiner. »
- Erreur : « La preview ne répond pas. Consultez les logs ou relancez le service. »

Éviter les promesses absolues : aucune interface ne doit affirmer qu’un résultat est parfait, sûr ou déployé sans preuve correspondante.

## 6. Recommandation et prochaine itération

**Je recommande d’approfondir ARC** pour sa proximité avec l’intention exprimée et sa compatibilité avec l’organisation actuelle. Son caractère doit venir de la qualité du dessin, du contraste des surfaces et de transitions utiles. Un niveau de calme doit rester disponible pour les longues sessions.

La comparaison ne doit pas se limiter à « quelle couleur préférez-vous ? ». Choisir d’abord l’émotion : cockpit orbital, atelier industriel ou laboratoire lumineux. Puis préciser l’intensité : discret / affirmé / spectaculaire ponctuellement.

Après retour : produire un écran Discussion finalisé, une vue Fichiers dense et une vue Accueil ; dessiner le symbole à 16, 24 et 64 px ; installer les polices retenues ; comparer les modes clair et sombre si souhaités ; décliner les états ; valider les contrastes et la navigation clavier ; documenter les règles complètes de composants. Aucune intégration au produit sans nouvelle demande.

## 7. Livrables et limites

- index.html, lab.css, lab.js : laboratoire indépendant, sans dépendance ni appel au backend.
- Trois directions : palette, signe vectoriel exploratoire, traitement des surfaces, voix et motion proposée.
- Une discussion détaillée, cinq esquisses de vues, changement de moteur illustratif, envoi simulé.
- direction-marque.md : analyse, positionnement, territoires, tokens, règles et étapes de validation.
- Les familles typographiques sont proposées, pas chargées dans cette version.
- Les signes sont des recherches de forme, pas des logos finalisés.
- Les contenus, identifiants et métriques de l’interface sont fictifs.
- Aucun fichier applicatif existant modifié, aucune donnée métier écrite, aucun déploiement de l’application.
- Brain Cloud consulté : aucun projet identifié sous le nom Companion ; aucune mémoire ajoutée à un autre projet par supposition.

## 8. Vérifications

Consulter qa.md pour les contrôles réellement réalisés sur cette version. Une proposition visuelle ne vaut pas validation d’accessibilité complète de l’application.