One Hat Cyber Team

Edit File: SITE-DNA.md

# SITE-DNA — neogogol.com

**Niche :** télétravail, bureau à domicile, productivité (NON-YMYL, ergonomie informative).
**Voix :** Élise Fontaine — calme, pragmatique, « vous » posé, « on montre un geste, on n'ordonne pas ».
**Concept directeur :** **l'établi calme et fonctionnel.** Un atelier de travail bien rangé : lumière fraîche, surfaces nettes, outils à portée de main, rien de décoratif. L'identité sert la voix — sobre, mesurée, jamais tapageuse.

> Contrainte de divergence assumée : neogogol est l'exact **opposé** d'afropuff.fr (chaleur intime, magazine beauté, serif éditorial) et se distingue nettement de brassardamerique.com (énergie sportive, olive, franc-parler). Voir la section **Divergence** en fin de document.

---

## 1. Palette — fraîche, posée, neutres froids

Base neutre **froide** (bleu-gris / ardoise), un **unique accent pétrole** calme. Aucun sable, aucune crème, aucun terracotta : la lumière du site est celle d'un matin d'atelier, pas d'un salon chaud.

| Nom | Hex | Rôle |
|---|---|---|
| **Encre** | `#16212b` | Texte principal, titres — bleu-noir froid, jamais du noir pur |
| **Papier** | `#eef2f3` | Fond de page — blanc cassé **froid**, très légèrement bleuté (jamais crème) |
| **Craie** | `#ffffff` | Surfaces surélevées : cartes, panneaux-outils, blocs de données |
| **Brume** | `#d5dee1` | Filets 1px, bordures, séparateurs, lignes de tableau — gris froid discret |
| **Ardoise** | `#556270` | Texte secondaire, kickers mono, légendes, axes de data-viz |
| **Pétrole** | `#0e6b6b` | Accent unique : liens, focus, coche de checklist, marque de donnée clé |

**Biais des neutres :** froid et minéral (bleu-gris/ardoise). Le « Papier » tire vers le bleu, jamais vers le jaune/sable. Contraste doux mais net (Encre sur Papier ≈ 13:1). Le Pétrole est le **seul** accent — pas de seconde couleur vive ; les nuances de data-viz sont des **teintes de pétrole** (`#0e6b6b` → `#4c9a9a` → `#a9cccc`) plus l'Ardoise en série secondaire. La couleur est rare, donc elle compte.

---

## 2. Typographie — grotesque géométrique + mono pour la donnée

Système « atelier/outil » : un display grotesque géométrique pour la structure, un texte grotesque humaniste très lisible pour le corps, un **mono** pour tout ce qui est chiffre, repère, étiquette. Toutes les familles sont **réelles, libres (SIL OFL) et self-hostables** en woff2.

| Usage | Famille | Poids | Pourquoi |
|---|---|---|---|
| **Display** (H1–H3, kickers larges, chiffres-clés) | **Space Grotesk** | 500 / 700 | Grotesque géométrique, arêtes techniques et posées ; pose l'ambiance « établi » sans être froide |
| **Texte** (corps, UI, listes) | **IBM Plex Sans** | 400 / 500 / 600 | Grotesque humaniste, lisibilité longue durée, tempérament fonctionnel qui sert le « vous » calme |
| **Mono** (data, repères chiffrés, labels, index `// 01`, coches, colonnes de tableau) | **IBM Plex Mono** | 400 / 500 | Aligne les chiffres, signe la donnée, donne le côté « manuel d'atelier » |

**Réglages :** titres en Space Grotesk, `letter-spacing` négatif léger (`-0.01em`), pas de capitales décoratives. Corps IBM Plex Sans ~18px, interligne 1.65, **mesure 62–68 caractères**. Kickers/labels en IBM Plex Mono, `letter-spacing +0.04em`, préfixés d'un `//` ou d'un index (`// 03`). Chiffres de la DATA-BANK **toujours** en mono, avec unité.

**Alternatives self-hostables équivalentes :** Display → *Schibsted Grotesk* ou *Hanken Grotesk* ; Texte → *Inter* ou *Public Sans* ; Mono → *JetBrains Mono* ou *Space Mono*. (Familles retenues par défaut : Space Grotesk + IBM Plex Sans + IBM Plex Mono.)

---

## 3. Archétype de mise en page — « établi / tableau de bord » (asymétrique, orienté outil)

**Pas de hero photo.** La home s'ouvre sur un **hero typographique** : à gauche (~7 colonnes) une affirmation nette en Space Grotesk ; en vis-à-vis (~5 colonnes) un **panneau-outil fonctionnel** — checklist du poste, mini-tableau de repères chiffrés en mono, ou méthode en étapes. Grille asymétrique 12 colonnes, gouttières larges, **whitespace généreux**, et des **filets horizontaux fins** qui rendent la grille de base visible, comme les traits d'un plan de travail.

Le contenu se lit en **blocs-fiches modulaires** empilés (repères chiffrés → checklist → méthode en étapes → index des guides), chacun coiffé d'un **kicker mono indexé** (`// 01 Repères`, `// 02 Le poste`). La home est un **atelier rangé**, jamais un blog-roll ni des tuiles magazine. La **data-viz est sobre** : barres horizontales courtes, petits multiples, teintes de pétrole monochromes, axes en mono. Les pages articles passent en **mesure étroite** pour la lecture, avec des encarts mono en marge/inline pour les données (DATA-BANK) et un **bloc « réglage »** (astuce testée) à filet gauche pétrole.

---

## 4. Personnalité des composants — nette et discrète

- **Rayons :** faibles et carrés-doux. `3px` sur cartes/inputs/boutons, `2px` sur puces/chips. Jamais de pilules ni de gros arrondis tactiles (à l'opposé d'afropuff).
- **Bordures :** filet **1px Brume** partout — cartes, séparateurs, tableaux, blocs-outils. La bordure fine est la texture principale, à la place des ombres.
- **Ombres :** quasi nulles. Surfaces **plates**. Au plus une ombre froide unique et très légère sur les panneaux surélevés : `0 1px 2px rgba(22,33,43,.06)`. Aucun halo chaud, aucun relief marqué.
- **Motion :** calme et brève. `120–160ms ease-out`, translation `≤ 4px` + opacité. **Aucun** rebond, ressort ou scale « pop ». Les focus s'installent, ils ne sautent pas.
- **États :** liens et focus en Pétrole — soulignement `1.5px` au survol, anneau de focus `2px` pétrole. Bouton primaire = pétrole plein, carré-doux, sans dégradé ; secondaire = contour Encre 1px.
- **Motifs signature :** (1) **grille de filets** horizontaux fins visibles ; (2) **kickers mono** avec `//` et index numéroté ; (3) **coche de checklist** carrée pétrole dans une case 1px ; (4) **rangées de barres** en petits multiples monochromes ; (5) **bloc « réglage »** à filet gauche pétrole ; (6) **chiffres mono alignés à droite** dans les tableaux de repères.

**Tonalité d'ensemble :** un instrument de mesure propre. Précis, aéré, sans esbroufe — la mise en forme s'efface pour laisser passer le geste que décrit Élise.

---

## 5. Divergence — pourquoi neogogol ne ressemble ni à afropuff ni à brassardamerique

**vs afropuff.fr (RÉFÉRENCE à ne pas imiter) :**
- **Palette :** neutres **froids** bleu-gris + accent **pétrole** ↔ crèmes/sables **chauds** + **terracotta** intime. Température inversée.
- **Typo :** **grotesque géométrique + mono** (Space Grotesk / IBM Plex Sans / IBM Plex Mono) ↔ **serif éditorial** + sans humaniste de magazine.
- **Archétype :** **établi/tableau de bord** asymétrique orienté outil (pas de hero photo, checklist + data-viz sobre, blocs-fiches indexés) ↔ **magazine beauté** (grand hero photo chaleureux, grandes images, tuiles magazine, rythme intime).
- **Composants :** carrés-doux, **plats, filets 1px, sans ombre**, motion sobre ↔ arrondis doux, **tactiles, chaleureux**, « experte-copine ».

**vs brassardamerique.com (l'autre nouveau site — à distinguer clairement) :**
- **Palette :** **pétrole froid** minéral ↔ **olive** `#4d7c0f` chaud/vert-jaune sportif. Familles de teintes opposées.
- **Archétype / archétype de composants :** **atelier posé, whitespace, mesure, data-viz sobre** ↔ registre **énergique et terre-à-terre** du test-produit sportif. Tempérament calme (index mono, checklist) vs élan/impact.
- **Typo & ton :** grotesque **technique et neutre** servant le **« vous » calme** d'Élise ↔ système au service du **« tu » franc et punchy** de Julien Marchand.

**Bonus :** neogogol quitte aussi l'indigo « startup par défaut » (`#3b5bdb`) de sa première version pour un **pétrole plus posé et plus rare**, cohérent avec l'archétype établi/outil.