---L’en-tête YAML : c’est tout ce que l’agent lit au démarrage.
name: charte-graphique-adalanLe nom du dossier, en minuscules, chiffres et tirets. C’est aussi celui de l’appel explicite.
description: "Charte graphique d'adalan pour construire tout support web aux couleurs de la marque, qu'il s'agisse d'un site, d'un mini-site, d'une landing page, d'une application, d'un tableau de bord, d'une présentation HTML, d'un email ou d'une maquette. Donne les logos SVG, les couleurs (encre #1f175a, pêche #f9a66b), les polices (Mona Sans, Monaspace Neon), la forme en diagonale, les composants CSS prêts à l'emploi, des modèles de page, de présentation et d'email (avec son script d'envoi Mailgun, images intégrées), et les règles pour les photos Unsplash. À utiliser dès qu'on crée, habille ou relit un support adalan, ou que l'utilisateur parle de charte, d'identité visuelle, de branding, de logo, de couleurs ou de style adalan."Ce que fait le skill et quand s’en servir : c’est elle qui le déclenche.
metadata: author: adalan version: "3.0"évolution.correction : on compare ce numéro à celui de sa copie.
---Charte graphique adalan
Les lignes directrices pour construire un support web adalan : application, présentation, site, mini-site, email. Elles sont tirées du site adalan.fr et de la présentation du séminaire du 24 septembre 2026.
Démarrer
-
Identifier le support et lire la référence qui lui correspond :
Support Lire Partir de Présentation, deck, slides references/presentations.md assets/modeles/presentation.htmlSite, mini-site, landing page references/sites-et-applications.md assets/modeles/page.htmlApplication, tableau de bord, outil interne references/sites-et-applications.md assets/modeles/page.htmlEmail, invitation, lettre d'information references/emails.md assets/modeles/email.html, envoyé parscripts/envoyer_email.pyTout support avec des photos references/photos-unsplash.md -
Copier le dossier
assets/dans le projet :adalan.css(tokens et composants),logos/,motifs/,modeles/, etemail/pour un email. Le détail des classes est dans references/composants.md. -
Construire avec les tokens et les composants d'
adalan.cssplutôt que des valeurs en dur. -
Relire le support avec la liste de vérification en fin de fichier.
L'essentiel
- Deux couleurs, deux voix. L'encre est la voix engagée (navigation, stratégie, le visiteur) ; la pêche est la voix chaleureuse (l'assistant, l'accent, l'état choisi). Pas de troisième couleur d'accent.
- La diagonale. Chaque surface a deux coins grands et deux coins vifs, en haut à gauche et en bas à droite, comme le pictogramme. Jamais de pilule, jamais de cercle.
- Une seule famille, deux axes. Mona Sans jouée sur la graisse et la largeur des lettres pour affirmer ; Monaspace Neon pour ce que la machine produit ou compte.
- Les courbes de niveau. Le motif topographique habille les fonds encre : l'idée de prendre de la hauteur.
- Clair par défaut, encre et photo pour les temps forts. Les fonds sombres et les photos plein cadre sont permis sur tous les supports.
Nom et signature
- Le nom s'écrit en minuscules, partout, même en début de phrase : adalan, adalan Consulting, adalan Factory. Seules les mentions légales emploient la raison sociale ADALAN.
- Le nom ne passe jamais en capitales : il ne va pas dans un sur-titre ou un libellé en
text-transform: uppercase. - Signature : AI Driven Insight, sous ou à côté du logo, jamais traduite.
- « IA » dans un texte en français (« workflows IA », « parcours IA »), « AI » dans un terme ou un texte en anglais (la signature, AI Act, Shadow AI).
- Noms d'outils internes : Roadalan, Grace, Kamelot, la plateforme de formation adalan.
Logos
Fichiers dans assets/logos/ :
| Fichier | Contenu | Usage |
|---|---|---|
logo-label.svg |
Logotype encre, « a » central pêche | Fonds clairs (lavande, papier, pêche claire) |
logo-label-white-orange.svg |
Logotype blanc, « a » central pêche | Fonds encre et photos voilées |
logo.svg |
Pictogramme : carré pêche en diagonale, « a » encre | Favicon, avatar, petits formats, coin de carte |
logos-sprite.svg |
Symboles logo-label et logo-mark |
Intégration inline : couleur des lettres par color (currentColor), « a » par --accent |
- Garder les proportions ; ne pas recolorer hors des versions fournies ; pas d'ombre, de contour ni d'effet.
- En dessous de 80 px de large, le logotype devient illisible : utiliser le pictogramme.
- Sur photo, poser le logo blanc sur la zone voilée, jamais sur une zone chargée.
- Pour une intégration inline, copier les
<symbol>du sprite dans la page (le modèle de présentation le fait) : un<use>vers un fichier externe ne marche pas enfile://.
Couleurs
| Token | Valeur | Rôle |
|---|---|---|
--ink |
#1f175a |
Texte par défaut, fonds encre, boutons principaux |
--ink-950 / --ink-900 |
#0e0a2e / #150f44 |
Voiles, fonds de scène, voiles de photo |
--ink-600 / --ink-500 |
#3a2fa0 / #5047b0 |
Nuances de graphiques, dégradés de barres |
--ink-300 / --ink-200 / --ink-100 |
#a8a2dc / #cfcbee / #e8e6f6 |
Textes secondaires sur encre |
--ink-50 |
#f4f3fb |
Cartes internes, fonds discrets |
--peach |
#f9a66b |
Accent : boutons chaleureux, états choisis, avatar, texte accentué sur encre |
--peach-100 / --peach-200 / --peach-300 |
#fdefe4 / #fbd9bf / #fcc6a0 |
Pastilles d'icône, sélection, surlignage |
--peach-600 |
#d96a1f |
Focus, curseur, mot accentué dans un grand titre sur fond clair |
--peach-700 |
#a94d08 |
Seule pêche pour du texte courant sur fond clair : sur-titres, erreurs, icônes |
--ground |
#f6f5fb |
Fond de page lavande |
--paper |
#ffffff |
Cartes, champs au focus, sections blanches |
--text-2 / --text-3 |
#4b467a / #6e6a93 |
Texte courant / métadonnées, légendes |
--line / --line-2 |
encre à 10 % / 18 % | Filets, en ombre interne |
Règles :
- Lisibilité de la pêche. Sur fond clair, le texte pêche est en peach-700 ; peach-600 n'écrit qu'en taille display (2,2 rem et plus, graisse 780 et plus) ; pêche et peach-400 n'écrivent que sur encre.
- Sur encre : texte blanc, texte secondaire ink-200, métadonnées ink-300, accent pêche.
- Familles Kamelot (
--f1à--f5) : réservées aux pastilles des cinq familles de Quests Kamelot. Jamais en texte, jamais comme accent ailleurs. - Pas de noir pur, pas de gris neutre : les neutres sont teintés encre.
Typographie
- Mona Sans (variable : graisse 200 à 900, largeur 75 à 125 %) pour tout le texte.
- Monaspace Neon pour la voix machine : sur-titres, codes, dates, compteurs, métadonnées, crédits photo, traces.
adalan.csscharge les deux (Google Fonts pour Mona Sans, jsDelivr pour Monaspace Neon). En production, les héberger avec@fontsource-variable/mona-sanset@fontsource/monaspace-neon.
| Rôle | Taille (web) | Graisse | Largeur |
|---|---|---|---|
| Hero (un par page) | clamp(2.4rem, 0.9rem + 3.9vw, 4.6rem) |
820 | 114 % |
| Display | clamp(2.2rem, 1.25rem + 3.1vw, 4.25rem) |
780 | 112 % |
| Titre de section | clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem) |
750 | 110 % |
| Titre de carte | clamp(1.35rem, 1.12rem + 0.8vw, 1.85rem) |
720 | 108 % |
| Chapeau | clamp(1.12rem, 1.02rem + 0.42vw, 1.38rem) |
440 | 100 % |
| Texte courant | 1.0625rem, interligne 1,55 | 420 | 100 % |
| Libellé | 0.9rem | 560 à 620 | 104 % |
| Sur-titre | 0.78rem Monaspace, capitales, espacement 0,2 em | 500 |
- L'emphase passe par la graisse et la largeur, jamais par l'italique ni une autre police. Un titre sous 104 % de largeur n'est pas dans la voix d'adalan.
- Un mot accentué dans un titre passe en pêche (
<em>dansadalan.css). - Titres serrés (interlettrage négatif), équilibrés (
text-wrap: balance) ; texte courant à 62 caractères au plus. - Sur-titre : Monaspace en capitales, peach-700 sur clair, pêche sur encre, précédé d'un petit carré en diagonale. Il situe (une partie, un thème) en trois ou quatre mots, sans répéter le titre. Il ne contient pas le nom adalan.
Forme
| Token | Valeur | Usage |
|---|---|---|
--shape |
28 / 6 px | Grandes surfaces : cartes, sections arrondies, compositeur |
--shape-mirror |
6 / 28 px | L'autre voix : la bulle du visiteur, qui répond à la diagonale |
--shape-md |
18 / 5 px | Cartes internes, confirmations |
--shape-s |
12 / 4 px | Boutons, pastilles, champs |
--shape-xs |
7 / 2 px | Étiquettes, petits carrés, puces |
--shape-ink |
jusqu'à 64 / 6 px | Plaques encre, qui grandissent avec l'écran |
Un rayon uniforme (pilule, cercle, 8 px partout) est hors charte. Seules exceptions : barres de défilement et curseur de texte.
Profondeur et motifs
- Surfaces plates au repos ; filets en ombre interne d'un pixel (
--line,--line-2), jamais enborder. - Ombres teintées encre, longues et diffuses (
--shadow-1,--shadow-2) ; ombre chaude pêche (--shadow-peach) pour ce qui est pêche ou choisi. Jamais d'ombre noire ou décalée dure, jamais de halo lumineux. - Courbes de niveau :
motifs/topo-sur-encre.svgsur fond encre,motifs/topo-sur-clair.svgsur fond clair, en fond couvrant, dérive lente de 34 à 38 s..band--inket.card--inkles posent seuls. - Fonds encre : halos violets doux (en haut à droite) et plus sombres (en bas à gauche), déjà dans
.band--ink.
Mouvement
- Tout est visible sans script ; le mouvement ne fait qu'accompagner l'arrivée du contenu.
- Les éléments montent (translateY) en se révélant, décalés de 18 à 85 ms selon la taille.
- Courbes :
--ease(sortie douce) pour les entrées et les états,--ease-iopour les bascules,--ease-backpour les coches. - Survol : montée de 1 à 2 px ; choisi : montée de 4 px et réchauffement pêche.
prefers-reduced-motionfige tout (déjà dansadalan.css).
Ton et écriture
- Français direct, concret et chaleureux ; phrases courtes qui tranchent. Montrer plutôt qu'affirmer.
- Écriture inclusive : consultant(e)s, salarié(e)s.
- Typographie française : espace insécable avant
:, espace fine insécable avant;!?, entre un nombre et son unité (10 %,2,8 M€), dans les guillemets« ». Apostrophe typographique’. - Ne jamais inventer de témoignage, d'étude de cas chiffrée, de résultat client, de certification ni d'effectif. Les chiffres d'affaires et de croissance d'adalan ne sortent pas dans un support externe.
- Valeurs, si le support les cite : expertise, bienveillance, intelligence collective, engagement, impact social.
Icônes et photos
- Icônes Lucide, trait 1,75,
currentColor. Pas d'icône remplie, pas d'emoji. - Photos d'illustration : Unsplash, univers de la hauteur et de la progression, voile encre, crédit « Photo : Prénom Nom / Unsplash ». Détail dans references/photos-unsplash.md.
À ne pas faire
- Écrire « Adalan » ou « ADALAN » dans un support.
- Ajouter une troisième couleur d'accent, un dégradé fluo, du néon, un fond noir pur.
- Utiliser des coins uniformément arrondis ou des pilules.
- Écrire du texte courant en pêche claire sur fond clair.
- Mettre Monaspace dans un titre, une phrase ou un lien de navigation.
- Mettre un titre en italique ou dans une autre police.
- Construire une grille de cartes de services, un mur de logos, une photo d'équipe plein écran.
- Présenter une photo Unsplash comme une photo d'adalan ou d'un client.
Vérification finale
- Le nom est en minuscules partout, jamais en capitales.
- Le logo est la bonne version pour le fond, net et sans déformation.
- Seules l'encre et la pêche portent la couleur ; la pêche sur fond clair est en peach-700 pour le texte courant.
- Toutes les surfaces ont la diagonale ; aucun rayon uniforme.
- Les titres sont en Mona Sans, graisse 720 et plus, largeur 104 % et plus ; Monaspace ne sert qu'à la voix machine.
- Chaque photo est une photo Unsplash gratuite, voilée si du texte la recouvre, et créditée.
- Aucun chiffre, témoignage ou résultat inventé.
- Contrastes, focus visible, navigation au clavier,
prefers-reduced-motionrespectés. - Typographie française appliquée (espaces insécables, apostrophes).