Dossier de direction artistique · v1 · septembre 2026

Une seule lumière chaude,
tout le reste en retrait.

Le référentiel complet de l’identité visuelle de Brunel : le logo et sa géométrie exacte, les couleurs, la typographie, les composants, le mouvement et les règles d’usage. Chaque valeur de ce dossier est celle qui tourne en production.

Brunel

01 · Essence de marque

Un ingénieur, pas un décorateur.

Brunel transforme un dépôt GitHub en architecture cloud chiffrée et validée. L’identité doit dire la même chose : précision, solidité, sobriété. Rien n’est décoratif ; tout est construit.

Le nom

Hommage à Isambard Kingdom Brunel, l’ingénieur victorien des ponts, des tunnels et du Great Western Railway : quelqu’un qui dessinait des infrastructures, les chiffrait et les faisait tenir. C’est exactement le métier du produit.

Le signe

Un losange taillé en quatre strates, la plus claire en haut, comme des couches géologiques vues en coupe. Quatre couches, comme les quatre paliers d’architecture que Brunel propose ; de la surface visible jusqu’à la fondation, la plus dense.

La lumière

Une marque sombre uniquement, éclairée par une seule couleur : l’orange braise #EC6F10. Pas de photo, pas d’illustration générée : chaque effet (dégradés, trames, rails) est dessiné en code.

1couleur d’accent, jamais deux

4strates dans le signe

3familles de caractères

0photo ou image générée

02 · Le logo

Le losange stratifié.

Le signe est la pièce maîtresse de l’identité. Il existe seul (favicon, avatar, puces), ou accompagné du nom (logotype). Sa version de référence : orange braise sur encre #161616.

Version de référence · orange #EC6F10 sur #161616

Lecture du signe

Losange : un carré posé sur la pointe, arêtes à 45° exactement. Stable, précis, orienté vers le bas comme une fondation.
Quatre strates : triangle, trapèze, trapèze, triangle. Symétrie parfaite haut / bas et gauche / droite.
Gradient d’opacité : 45 %, 70 %, 88 %, 100 %. La lumière descend et se densifie ; c’est ce qui donne la profondeur sans aucun dégradé.
Coupes vides : trois fentes horizontales identiques. Elles sont le signe autant que les pleins ; elles ne se remplissent jamais.

Une seule couleur, quatre intensités

Le logo n’utilise qu’une teinte. Les strates sont la même couleur à des opacités différentes, jamais quatre teintes distinctes. C’est ce qui le rend reproductible partout, du favicon à la broderie.

03 · Construction

Géométrie exacte.

Le signe est dessiné sur une grille de 24 × 24 unités (celle des icônes de l’interface). Toutes les cotes ci‑dessous sont les coordonnées réelles du fichier source src/components/shell/logo-mark.ts.

24 × 24grille de dessin

20 uhauteur et largeur du losange (pointe 2 → 22)

1,2 ufente entre strates (6 % de la hauteur)

45°toutes les arêtes obliques

Strate	Forme	Points (x,y sur 24)	Hauteur	Opacité	Aplat sur #161616	Aplat sur blanc
1 · surface	Triangle	`12,2 16.6,6.6 7.4,6.6`	4,6 u	45 %	`#763E13`	`#F6BE93`
2	Trapèze	`6.2,7.8 17.8,7.8 21.4,11.4 2.6,11.4`	3,6 u	70 %	`#AC5412`	`#F29A58`
3	Trapèze	`2.6,12.6 21.4,12.6 17.8,16.2 6.2,16.2`	3,6 u	88 %	`#D26411`	`#EE802D`
4 · fondation	Triangle	`7.4,17.4 16.6,17.4 12,22`	4,6 u	100 %	`#EC6F10`	`#EC6F10`

Les « aplats » sont les couleurs obtenues par transparence. Utilisez‑les uniquement là où la transparence n’existe pas (impression Pantone ou quadri, broderie, gravure, certains logiciels). Partout ailleurs, gardez la couleur unique et les opacités.

Règle de construction

Partir d’un carré de 20 u posé sur sa pointe, centré en (12,12). Le couper par trois bandes horizontales de 1,2 u centrées sur y = 7,2, 12 et 16,8. On obtient deux triangles de 4,6 u et deux trapèzes de 3,6 u.

Marges internes

2 u de vide autour du losange dans le carré de 24 u (8,3 %). Les deux pointes latérales tombent dans la fente centrale : le losange n’a donc pas de sommet gauche ni droit visible, ce qui l’allège.

Centre optique

Le signe est parfaitement symétrique : son centre géométrique est son centre optique. On l’aligne sur le milieu vertical du texte ou du conteneur, jamais sur la ligne de base.

04 · Logotype

Le signe et le nom.

Le nom s’écrit toujours « Brunel » : une capitale, puis des minuscules. Jamais « BRUNEL », « brunel » ou « Brunel.cloud » dans le logotype.

Logotype horizontal · signe S = 88 px, nom 92 px, espace 24 px (image de partage)

Proportions

Caractère du nom	Inter, graisse 600
Approche	`-0.025em` en interface, `-0.033em` au‑delà de 48 px
Hauteur du signe S	≈ la taille du corps du nom (0,95 à 1,25 ×)
Espace signe / nom	0,27 S (grands formats) à 0,4 S (interface : 20 px + 8 px)
Alignement	Centre du signe sur le centre des minuscules
Couleur du nom	Blanc `#FFFFFF` sur fond sombre, `#161616` sur fond clair ; jamais orange

Horizontal

Brunel

Par défaut. En-têtes, pied de page, documents, factures, signatures d’e‑mail.

Signe seul

Quand le nom est déjà écrit à côté ou que la place manque : favicon, avatar, barre latérale repliée, puce « Eyebrow ».

Empilé

Brunel

Formats carrés uniquement (affiche, écran de chargement, goodies). Signe = 1,8 × la hauteur du nom, espace 0,25 S.

05 · Usages

Zone de protection, tailles, fonds.

Zone de protection

Autour du signe, un vide égal à la moitié de sa taille S (le carré de 24 u). Autour du logotype, un vide égal à ½ S sur les quatre côtés. Aucun texte, bord ou image n’y entre.

Tailles minimales

Signe seul à l’écran : 16 px. En dessous, utiliser la version favicon.
Logotype à l’écran : signe de 20 px (nom en 15–17 px).
Impression : signe de 6 mm, logotype de 25 mm de large.

Échelle

20 · UI

88 · OG

144

Fonds autorisés

Référence. Orange sur encre #161616 ou toute surface sombre de la palette.

Sur la lumière chaude. Blanc sur le dégradé braise (couvertures, cartes de partage).

Sur orange. Encre #161616, mêmes opacités. Usage rare : goodies, bannière événement.

Sur papier blanc. Orange, uniquement pour les documents imprimés (contrats, factures). Jamais dans le produit.

06 · Interdits

Ce qu’on ne fait jamais.

NON

Faire pivoter ou retourner le signe.

NON

L’étirer ou le déformer.

NON

Aplatir les opacités (sauf gravure / broderie une couleur).

NON

Remplir les fentes ou redessiner un losange plein.

NON

Colorer chaque strate différemment.

NON

Le dessiner en contour.

NON

Ombre portée, lueur, biseau, 3D, dégradé.

NON

Le poser sur un gris moyen, une photo ou un fond chargé.

Pas d’inversion de l’ordre

La strate la plus claire est toujours en haut. Inverser les opacités renverse le sens (la fondation doit être la plus dense).

Pas de nom en orange

L’orange appartient au signe et aux actions. Le nom reste blanc (ou encre sur fond clair).

Pas d’autre typographie

Le nom ne se compose qu’en Inter 600. Pas de serif, pas d’italique, pas de capitales.

07 · Déclinaisons

Le signe dans ses contextes.

Tous ces supports sont générés par le code à partir de la même source (MARK_LAYERS_24, BRAND). Pour changer le logo, on ne modifie qu’un fichier.

Favicon · `app/icon.svg`

Grille 32, carré encre à coins de 8 (25 %). Le losange grandit (22 u de haut sur 32, pointes en 5 et 27) et ses fentes passent à 1,6 u. Opacités relevées à 55 / 75 / 90 / 100 % pour rester lisible à 16 px.

Image de partage · 1200 × 630

Brunel

From a GitHub repository to a priced, validated cloud architecture.

Marge 20 px, carte à coins de 32, trame de points 8 px à 7 %, signe 88 px + nom 92 px graisse 600, accroche 48 px, ligne secondaire 26 px à 72 % de blanc.

Paiement Stripe

Brunel

Sur les pages de paiement (fond clair imposé par Stripe), chaque strate est relevée de +10 % d’opacité (55 / 80 / 98 / 100 %) pour garder le contraste. Couleur de marque Stripe : #EC6F10, accent #161616.

Puce « Eyebrow »

Le signe en petit ouvre les sur-titres, séparé du texte par un filet.

Architecture validée

Pied de page

Le signe et le nom en très grand, en orange à 22 % d’opacité qui s’efface vers le bas jusqu’à 0 %. Seul endroit où le nom prend l’orange : c’est une texture, pas un logotype.

Avatar réseaux sociaux

Reprendre le favicon : carré encre #161616, signe orange occupant 70 % de la hauteur, centré. Les plateformes rognent en cercle : le losange y tient sans toucher le bord.

08 · Couleurs

Encre, filets, et une braise.

Les composants utilisent les jetons (src/styles/tokens.css), jamais les valeurs hexadécimales. L’orange est rare : bouton principal, liens, focus, états actifs, le signe. Tout le reste est en niveaux chauds de noir.

Rôle	Jeton	Valeur	Usage
Page	`--background`	`#161616`	Toutes les pages : site, app, console, docs
Carte	`--card`	`#1B1A19`	Cartes, panneaux, pied de page
Menu	`--popover`	`#1F1E1D`	Menus, info-bulles
Surfaces calmes	`--muted` · `--secondary` · `--accent`	`#211F1E #232120 #262422`	Puces, champs, survol
Filets	`--border` · `--input`	`#2F2B2A #3A3533`	Bordures, rails, champs
Texte	`--foreground`	`#FFFFFF`	Titres et texte courant
Texte secondaire	`--muted-foreground`	`#B3ACA7`	Chapeaux, légendes (contraste 8,4:1 sur #161616)
Accent	`--primary` · `--ring`	`#EC6F10`	Bouton principal, liens, focus, actif, le signe
Ambre	`BRAND.amber`	`#F2A15E`	Reflets, chaînes de caractères dans le code
Lumière chaude	`--brand-ember · rust · brown · ink`	`#DC7723 #8A4A1C #2B2019 #111111`	Dégradés de couverture, panneaux tramés, teinte des puces
États	`--success · --warning · --destructive`	`#3FBF7F #F2B544 #FF5F57`	Toujours avec une icône ou un mot

Couleurs de domaine (schémas et graphiques)

Validées sur la surface carte : bande de luminance, chroma minimal, séparation daltonisme, contraste 3:1. Toujours dans cet ordre, jamais réaffectées.

Compute #DA6600

Data #12A195

Network #2769B7

Security #C92F33

Observability #B98A00

CI/CD #8559B2

Resilience #479C4D

Environments #BC4B87

Les deux textures de la marque

Couverture chaude (.hero-warm) · trame de points 1 px tous les 6 px à 6 % de blanc, sur dégradé vertical #1e1d1c 0 % → #221c17 30 % → #4a2c16 72 % → #8a4f22 100 %. Coins de 32 px, retrait de 8 à 16 px du bord de la fenêtre.

Panneau chaud (.panel-warm) · même trame sur #2b211a → #231c17. Pour la cellule mise en avant d’une grille, l’offre recommandée, le bloc du nom en pied de page.

09 · Typographie

Une grotesque, un mot en italique.

L’architecte que votre dépôt mérite.

Titre : Inter Display 500, approche -0,02 em, interligne 1,11. Un seul mot en Instrument Serif italique, en fin de titre de préférence.

Titres et texte

Inter Display

Titres en graisse 500. Texte courant en 400, 16 px, interligne 1,6. Le nom « Brunel » en 600.

font-sans.font-display

Accent

Instrument Serif

Italique uniquement, un mot par titre, via <em>. Jamais une phrase entière, jamais dans le texte courant ni dans les boutons.

<em>

Données

Geist Mono

Chiffres, prix, code, petites étiquettes en capitales (11–12 px, espacement +0,08 em).

font-mono.font-label

Niveau	Taille	Graisse	Approche	Interligne
Titre de page (h1)	`clamp(2.6rem, 1.4rem + 4.4vw, 4.5rem)` → 72 px	500	-0,02 em	1,11
Titre de section (h2)	`clamp(2rem, 1.3rem + 2.4vw, 3rem)` → 48 px	500	-0,02 em	1,11
Chapeau	18 px	400	0	1,55 · couleur #B3ACA7
Texte	16 px (14 px dans l’app)	400	0	1,6
Étiquette	11–12 px mono, capitales	400–500	+0,08 em	1,2

10 · Composants

Boutons, cartes, rails.

Site vitrine

GlowButton : bloc #111 de 170 × 56 (155 × 52 sous 600 px), coins carrés, quatre arêtes de lumière qui dépassent les angles, floutées par le filtre SVG #unopaq ; au survol une trame s’allume et le halo s’élargit. Un seul par écran.

LineButton : action secondaire, même taille et mêmes coins, filet qui s’éclaircit, libellé qui roule vers le haut.

Aperçu simplifié ici ; la référence est src/components/ui/glow-button.tsx.

Application et console

Button, coins de 12 px : default orange avec liseré clair, outline filet, ghost, link, destructive. Rayon global des composants : 0.75rem.

Le bouton d’envoi du chat reste rond et orange.

Carte (.lift)

Survolez : elle monte de 4 px, le filet se réchauffe (orange 35 %), une lueur orange très douce apparaît. 400 ms.

Rails

Chaque section est posée entre deux lignes verticales de 1 px qui s’effacent aux extrémités, avec un filet en haut et de petits carrés de 7 px (coins 1 px, #3A3533) aux intersections. Visibles sur ce dossier en grand écran.

Panneau chaud

Pour la seule chose à mettre en avant dans une grille. Un par grille, pas plus.

11 · Mouvement

Des entrées, jamais de spectacle.

Seules la position et l’opacité bougent. Tout mouvement disparaît quand l’utilisateur demande moins d’animations.

Jeton	Valeur
`--ease-out`	`cubic-bezier(.25,.46,.45,.94)`
`--ease-out-strong`	`cubic-bezier(.215,.61,.355,1)`
`--ease-in-out`	`cubic-bezier(.645,.045,.355,1)`
`--ease-soft`	`cubic-bezier(.2,.7,.2,1)`
`--dur-quick · base · slow · reveal`	300 · 400 · 600 · 800 ms

Titres : les caractères montent d’un masque, 0,3 s chacun, 25 ms d’écart.
Texte : les lignes montent d’un masque, 250 ms d’écart.
Blocs et cartes : montée de 32 px + fondu, 0,8 s ; 70 ms entre cartes d’une grille.
Liens et boutons secondaires : le libellé roule vers une copie de lui‑même, 400 ms.
Le signe lui‑même ne s’anime pas en interface. Pour une vidéo ou un chargement : les strates apparaissent de haut en bas, 80 ms d’écart, montée de 2 u, ease-out-strong.

12 · Ton et contenu visuel

Sobre, factuel, chiffré.

Oui

Des phrases courtes qui disent ce que fait le produit, avec des chiffres réels.
Des captures de l’interface réelle, 1440 × 900, reprises à chaque changement visible.
Des schémas dessinés en code avec les couleurs de domaine.
Un mot en italique serif pour donner la voix, pas plus.

Non

Photos d’illustration, images générées, personnages, icônes 3D.
Superlatifs creux (« révolutionnaire », « magique »), émojis dans l’interface.
Une seconde couleur d’accent (bleu, violet…) hors schémas.
Mode clair pour le produit : Brunel est sombre uniquement.

13 · Fichiers maîtres

Le logo en code.

Copiez ces sources pour tout nouveau support, ou téléchargez les fichiers prêts à l’emploi : signe, signe en aplats, signe blanc, logotype (fond sombre), logotype (fond clair), icône.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <g fill="#EC6F10">
    <polygon points="12,2 16.6,6.6 7.4,6.6" fill-opacity=".45"/>
    <polygon points="6.2,7.8 17.8,7.8 21.4,11.4 2.6,11.4" fill-opacity=".7"/>
    <polygon points="2.6,12.6 21.4,12.6 17.8,16.2 6.2,16.2" fill-opacity=".88"/>
    <polygon points="7.4,17.4 16.6,17.4 12,22"/>
  </g>
</svg>

Signe · référence (fond transparent)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <polygon points="12,2 16.6,6.6 7.4,6.6" fill="#763E13"/>
  <polygon points="6.2,7.8 17.8,7.8 21.4,11.4 2.6,11.4" fill="#AC5412"/>
  <polygon points="2.6,12.6 21.4,12.6 17.8,16.2 6.2,16.2" fill="#D26411"/>
  <polygon points="7.4,17.4 16.6,17.4 12,22" fill="#EC6F10"/>
</svg>

Signe · aplats pour fond #161616 (impression, sans transparence)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <rect width="32" height="32" rx="8" fill="#161616"/>
  <g fill="#EC6F10">
    <polygon points="16,5 20.8,9.8 11.2,9.8" fill-opacity=".55"/>
    <polygon points="9.6,11.4 22.4,11.4 26.2,15.2 5.8,15.2" fill-opacity=".75"/>
    <polygon points="5.8,16.8 26.2,16.8 22.4,20.6 9.6,20.6" fill-opacity=".9"/>
    <polygon points="11.2,22.2 20.8,22.2 16,27"/>
  </g>
</svg>

Favicon / avatar (src/app/icon.svg)

Où vit chaque élément

src/components/shell/logo-mark.ts : géométrie et couleurs du signe
src/components/shell/logo.tsx : signe et logotype de l’interface
src/app/icon.svg, apple-icon.tsx : icônes
src/app/opengraph-image.tsx : image de partage
src/app/brand/checkout-art.tsx : visuels de paiement
src/styles/tokens.css, src/app/globals.css : jetons, textures, mouvement
docs/art-direction.md : la version courte de ce dossier

Liste de contrôle avant publication

Le signe a ses quatre strates, la plus claire en haut, fentes vides, arêtes à 45°.
Une seule teinte dans le signe ; orange sur sombre, ou blanc sur la couverture chaude.
Zone de protection de ½ S respectée ; taille ≥ 16 px à l’écran, ≥ 6 mm à l’impression.
Le nom est en Inter 600, « Brunel », en blanc (ou encre sur papier).
Un seul mot en italique serif par titre, un seul bouton lumineux par écran.
L’orange n’apparaît que sur l’action principale, les liens, le focus et le signe.
Aucune photo, aucune image générée, aucune ombre ni lueur ajoutée au logo.

Un ingénieur, pas un décorateur.

Le nom

Le signe

La lumière

Le losange stratifié.

Lecture du signe

Une seule couleur, quatre intensités

Géométrie exacte.

Règle de construction

Marges internes

Centre optique

Le signe et le nom.

Proportions

Horizontal

Signe seul

Empilé

Zone de protection, tailles, fonds.

Zone de protection

Tailles minimales

Échelle

Fonds autorisés

Ce qu’on ne fait jamais.

Pas d’inversion de l’ordre

Pas de nom en orange

Pas d’autre typographie

Le signe dans ses contextes.

Favicon · app/icon.svg

Image de partage · 1200 × 630

Paiement Stripe

Puce « Eyebrow »

Pied de page

Avatar réseaux sociaux

Encre, filets, et une braise.

Couleurs de domaine (schémas et graphiques)

Les deux textures de la marque

Une grotesque, un mot en italique.

Boutons, cartes, rails.

Site vitrine

Application et console

Carte (.lift)

Rails

Panneau chaud

Des entrées, jamais de spectacle.

Sobre, factuel, chiffré.

Oui

Non

Le logo en code.

Où vit chaque élément

Liste de contrôle avant publication

Favicon · `app/icon.svg`