Chartes graphiques

# 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; } ```