Chartes graphiques

Une charte documente palette, typographie et conventions visuelles (markdown). Un template peut s'y rattacher pour garder la cohérence de marque.

Nouvelle charte

Nom

Contenu (markdown)

# Charte graphique AVQN

**Brutalisme éditorial, noir & blanc, contraste typographique fort.**
Automatisation IA & n8n pour PME et indépendants de Suisse romande.

Cette charte cadre toute la production visuelle : templates, cartes stats, slides pédagogiques, posts, carrousels. Chaque visuel doit pouvoir tenir en une phrase : *un message net, une typo qui frappe, du vide, un trait.*

---

## 1. Principe directeur

Quatre règles non négociables :

1. **Contraste brutal.** Noir sur blanc OU blanc sur noir. Jamais de gris de fond, jamais de dégradé. Le contraste fait le travail.
2. **La typo est le design.** Pas de fioritures, pas d'icônes décoratives, pas d'illustrations gratuites. Un gros titre bold + un corps neutre suffisent.
3. **Le vide est un élément.** Marges généreuses, respiration. Un visuel chargé n'est pas AVQN.
4. **Aucun branding dans les coins.** Pas de logo, pas de wordmark AVQN, pas de signature ni de mention en pied. Le contenu occupe l'espace, rien d'autre. La marque se reconnaît à la DA, pas à une étiquette.

Signature reconnaissable : **cadre fin + ombre portée décalée**, **eyebrow en capitales espacées**, **trait d'accent court**, **texture discrète** (points ou carreaux).

---

## 2. Les deux modes

La charte fonctionne sur deux fonds, jamais mélangés dans un même bloc :

| Mode | Fond | Texte principal | Usage |
|------|------|-----------------|-------|
| **Clair** (défaut) | Blanc `#FFFFFF` | Encre `#13161B` | Cartes stats, landing, posts standard, contact |
| **Sombre** | Noir `#000000` | Blanc `#FFFFFF` | Contenu technique, code, moments d'emphase, titres de section |

Règle : on choisit un mode par visuel. Pour un carrousel, on peut alterner les modes d'une slide à l'autre — c'est même un bon rythme.

---

## 3. Palette

Volontairement minimale. Six valeurs + un accent.

| Token | Hex | Rôle |
|-------|-----|------|
| `--noir` | `#000000` | Aplats, boutons, fond mode sombre, ombres portées |
| `--encre` | `#13161B` | Texte et titres en mode clair (le « noir » bleuté de la marque) |
| `--blanc` | `#FFFFFF` | Fond mode clair, texte en mode sombre |
| `--ardoise` | `#5B6472` | Texte secondaire, sous-titres, gros chiffres atténués |
| `--brume` | `#9AA3B0` | Eyebrows, sources, légendes, mentions discrètes |
| `--filet` | `#E4E7EC` | Traits de séparation, cadres fins (clair), texture |
| `--magenta` | `#FF2D78` | **Accent unique.** 1 élément max par visuel. Bullets, micro-soulignement, point d'attention. Jamais sur du texte long. |

**Discipline couleur :** un visuel = noir, blanc, et au plus une touche de magenta. Si le magenta n'apporte rien, on le retire. Pas de gris en aplat, pas d'autre couleur.

---

## 4. Typographies

Duo principal + une mono technique.

### Archivo — Titres & display
- Google Fonts. Poids utilisés : **800** (Extrabold) et **900** (Black).
- Variante **Expanded** bienvenue pour les très gros titres (effet large, brutaliste).
- Toujours serré : `line-height` 0.95–1.05, `letter-spacing` -0.02em sur les gros corps.
- Casse : phrase normale pour les titres longs ; CAPITALES réservées aux mots-clés courts et aux boutons.

### Inter — Corps & interface
- Google Fonts. Poids : **400** (corps), **500/600** (intertitres, labels, mises en avant).
- `line-height` 1.4–1.6. Couleur `--encre` (clair) ou `--blanc` (sombre) ; secondaire en `--ardoise`.

### JetBrains Mono — Technique
- Google Fonts. Poids **400/500**.
- Réservé : blocs de code, arborescences de fichiers, noms de fichiers `.md`, sorties terminal, données brutes.
- Toujours sur fond contrasté, dans un cadre fin + ombre portée.

### Échelle typographique (base visuel ~1080px)

| Niveau | Famille | Taille | Poids | Notes |
|--------|---------|--------|-------|-------|
| Display | Archivo | 72–110 px | 900 | Titre principal d'un visuel. 2–3 lignes max. |
| H1 | Archivo | 48–64 px | 800 | Titre de carte / slide. |
| H2 | Archivo | 32–40 px | 800 | Sous-section. |
| Chiffre-clé | Archivo | 120–200 px | 900 | Stats type « −80% ». Domine la composition. |
| Corps | Inter | 22–28 px | 400 | Texte lisible. |
| Eyebrow | Inter | 14–16 px | 600 | CAPITALES, `letter-spacing` 0.18em, couleur `--brume`. |
| Source / légende | Inter | 13–15 px | 400 | `--brume` ou `--ardoise`. |
| Code | JetBrains Mono | 18–24 px | 400 | Selon densité. |

---

## 5. Textures de fond

Deux textures discrètes, jamais les deux ensemble, jamais dominantes (opacité basse).

- **Points (dot grid)** — pour les fonds clairs. Grille de points fins espacés ~24–32 px, couleur `--filet` ou magenta très désaturé. Évoque le papier millimétré / le canvas n8n.
- **Carreaux (grid)** — pour les fonds sombres. Quadrillage fin de lignes ~40 px, couleur blanc à 6–10% d'opacité. Évoque le blueprint / l'écran technique.

Règle : la texture reste **en arrière-plan absolu**. Si elle se voit au premier coup d'œil, elle est trop forte. Beaucoup de visuels n'en ont pas du tout — c'est très bien.

---

## 6. Signatures visuelles brutalistes

Ce sont les éléments qui rendent un visuel « AVQN » au premier regard — par la forme, pas par une étiquette.

### Cadre + ombre portée décalée
Le motif central de la marque. Un bloc (carte, code, photo) avec :
- Cadre fin : 1.5–2 px, couleur `--encre` (clair) ou `--blanc` (sombre).
- Ombre portée **dure et décalée** : pas de flou. Décalage ~12–20 px en bas à droite, couleur `--noir` plein. `box-shadow: 16px 16px 0 0 var(--noir);`
- Effet « papier empilé », tactile, assumé. Aucun arrondi, ou très léger (2–4 px max).

### Trait d'accent
Petit trait horizontal épais (4–6 px de haut, ~48–64 px de large) placé sous un titre ou un chiffre. Couleur `--encre`/`--blanc` selon le mode, ou `--magenta` si c'est l'accent unique du visuel.

### Eyebrow
Surtitre court en CAPITALES, `letter-spacing` large (0.18em), couleur `--brume`. Annonce la catégorie (« L'AUTOMATISATION EN CHIFFRES », « BOOTCAMP IA & N8N · 2026 »). Placé au-dessus du titre. C'est du contenu structurant, pas du branding.

### Bullets
Listes à puces : point rond plein **magenta** (`--magenta`), texte en Inter 600. Le seul endroit où le magenta est systématique.

---

## 7. Composants récurrents

Patterns à réutiliser tels quels dans les templates. **Aucun ne porte de logo ni de signature de coin.**

- **Carte stat** : eyebrow → chiffre-clé (Archivo 900, énorme) → trait d'accent → phrase explicative (Inter). La source de la stat est **intégrée au bloc de contenu**, juste sous la phrase, en `--brume` — pas en patte de mouche dans un coin. Sur fond clair, cadre + ombre décalée.
- **Carte citation / message** : titre Display centré ou aligné à gauche, beaucoup de vide. Un bouton ou une URL seulement si c'est un appel à l'action utile, traité comme contenu (centré, dans le flux) — pas comme une signature de pied.
- **Slide pédagogique split** : moitié texte (eyebrow + titre + trait + sous-titre), moitié photo plein cadre. Pas de signature en pied.
- **Bloc technique** : titre Display + trait + bloc code JetBrains Mono dans cadre/ombre, sur fond sombre avec texture carreaux. Légende explicative en bas en `--brume` si elle apporte de l'info — sinon rien.
- **Bouton** : aplat `--noir`, texte blanc, CAPITALES, `letter-spacing` 0.15em, pas d'arrondi (ou 2 px). Variante secondaire : fond transparent, cadre fin, texte encre. Utilisé comme CTA de contenu, pas comme tampon de marque.

---

## 8. Logo (hors visuels)

Le logo existe pour les supports où l'émetteur doit être identifié : site web, profils sociaux, signatures email, documents. **Il ne se colle jamais dans les coins des visuels de contenu** — ceux-ci restent nus, focalisés sur le message.

Quand le logo est utilisé (hors visuels donc) :
- **Monogramme** : glyphe géométrique AVQN, toujours monochrome (noir sur clair, blanc sur sombre). Jamais en couleur, jamais déformé.
- **Wordmark** : `AVQN` en CAPITALES espacées (`letter-spacing` ~0.15em).
- **Zone de protection** : marge libre autour du logo = hauteur du monogramme.

---

## 9. Do / Don't

**Do**
- Un message par visuel.
- Laisser respirer : si tu hésites à enlever un élément, enlève-le.
- Cadre + ombre décalée pour ancrer un bloc.
- Aligner sur une grille invisible, marges constantes.
- Garder les coins vides : c'est le contenu qui remplit l'espace.

**Don't**
- Pas de logo, de wordmark AVQN ni de signature dans les coins des visuels.
- Pas de mentions en pied type « Emmanuel Bernard · avqn.ch » sur les visuels de contenu.
- Pas de dégradés, pas d'ombres floues, pas de gris en aplat de fond.
- Pas plus d'une touche de magenta par visuel.
- Pas de mélange Archivo/Inter dans un même mot ou titre.
- Pas de texture visible au premier regard.
- Pas d'icônes ni d'illustrations décoratives gratuites.

---

## 10. Tokens CSS (à coller dans les templates)

```css
:root {
  /* Couleurs */
  --noir:    #000000;
  --encre:   #13161B;
  --blanc:   #FFFFFF;
  --ardoise: #5B6472;
  --brume:   #9AA3B0;
  --filet:   #E4E7EC;
  --magenta: #FF2D78;

/* Typo */
  --font-display: "Archivo", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", monospace;

/* Signatures */
  --trait: 5px;                         /* épaisseur trait d'accent */
  --ombre: 16px 16px 0 0 var(--noir);   /* ombre portée décalée dure */
  --cadre: 2px solid var(--encre);      /* cadre fin (mode clair) */
  --ls-eyebrow: 0.18em;                 /* letter-spacing capitales */
}

/* Google Fonts à charger dans le <head> du template :
   Archivo (800,900) · Inter (400,500,600) · JetBrains Mono (400,500) */

/* Eyebrow */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--brume);
}

/* Trait d'accent */
.trait {
  width: 56px;
  height: var(--trait);
  background: var(--encre);
}

/* Carte brutaliste */
.carte {
  background: var(--blanc);
  border: var(--cadre);
  box-shadow: var(--ombre);
  border-radius: 0;
}

/* Texture points (fond clair) */
.tex-points {
  background-image: radial-gradient(var(--filet) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
}

/* Texture carreaux (fond sombre) */
.tex-carreaux {
  background-color: var(--noir);
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}
```