# Charte AVQN

L'IA, c'est ludique et ce n'est pas compliqué.

Valeurs exactes : https://styleguide.contentos.ch/tokens.json. CSS à importer : https://styleguide.contentos.ch/tokens.css.
Une interface ne code jamais une couleur brute : elle code un rôle, et le rôle suit le thème.

L'IA, c'est ludique et ce n'est pas compliqué : tout ce qui porte la marque doit en avoir l'air. La base est suisse, propre et calme ; le jeu arrive par touches, aux endroits prévus pour lui.

## Ce qui ne bouge pas

1. **Le papier et l'encre.** Fond `papier`, texte `encre` : des couleurs chaudes, jamais de blanc ni de noir purs. La nuit, le fond passe au `charbon`, un gris presque noir et sans teinte, et le texte reste couleur papier.
2. **Le vermillon agit.** C'est la seule couleur d'action : boutons, liens, emphase d'un titre. Un seul primaire par vue.
3. **La serif porte le message.** Un titre en Instrument Serif, son fragment fort en italique vermillon. Le reste recule en gris.
4. **Le quadrillage.** Le papier millimétré en fond des entrées, et tout s'aligne dessus.
5. **Beaucoup d'air.** Un écran dit une idée.

## Où le jeu entre

Cinq couleurs d'appoint (jaune, ciel, menthe, rose, lilas) entrent par trois portes, et seulement par elles :

- **les cases** : quelques cases du quadrillage s'allument, comme des pixels ;
- **l'ombre de l'objet** : la carte qu'on met en avant pose une ombre dure, teintée ;
- **les étiquettes** : catégories, numéros d'étape, pastilles.

Une couleur d'appoint ne porte jamais une action et ne colore jamais un texte. Les angles sont doux (12 px). Au survol, un élément change de couleur ; il ne bouge pas.

## Le test

Devant un écran, une slide ou une vidéo : est-ce que ça donne envie d'essayer, et est-ce qu'on comprend en trois secondes ? Si l'un des deux manque, on enlève quelque chose.

## Couleurs
papier #FAF8F3 · papier-2 #F1EDE4 · encre #211C17 · charbon #131313 · charbon-2 #1E1E1E · vermillon #E0542B · vermillon-fonce #C94A24 · gris #6B645C · gris-nuit #B8B8B8 · filet #E7E1D8 · jaune #FFC94D · ciel #B9D3F7 · menthe #A8DDB5 · rose #F7B5C4 · lilas #CDBBF5 · rouge #B3261E · rouge-nuit #F2877B · vert #2F7A4D · vert-nuit #7CCB97 · bleu #3B7DD8 · ambre #B8860F · framboise #D65F8C · violet #7657C9 · emeraude #2C9A6A

## Rôles, thème clair
fond #FAF8F3 · surface #F1EDE4 · texte #211C17 · discret #6B645C · filet #E7E1D8 · trait #211C17 · accent #E0542B · accent-appuye #C94A24 · sur-accent #FAF8F3 · appoint-1 #FFC94D · appoint-2 #B9D3F7 · appoint-3 #A8DDB5 · appoint-4 #F7B5C4 · appoint-5 #CDBBF5 · sur-appoint #211C17 · teinte-ombre #FFC94D · danger #B3261E · succes #2F7A4D · donnee-1 #E0542B · donnee-2 #3B7DD8 · donnee-3 #B8860F · donnee-4 #D65F8C · donnee-5 #7657C9 · donnee-6 #2C9A6A · quadrillage-couleur rgba(33, 28, 23, 0.05) · quadrillage-pas 46px

## Rôles, thème nocturne
fond #131313 · surface #1E1E1E · texte #FAF8F3 · discret #B8B8B8 · filet rgba(255, 255, 255, 0.12) · trait #FAF8F3 · accent #E0542B · accent-appuye #C94A24 · sur-accent #FAF8F3 · appoint-1 #FFC94D · appoint-2 #B9D3F7 · appoint-3 #A8DDB5 · appoint-4 #F7B5C4 · appoint-5 #CDBBF5 · sur-appoint #211C17 · teinte-ombre #FFC94D · danger #F2877B · succes #7CCB97 · donnee-1 #E0542B · donnee-2 #3B7DD8 · donnee-3 #B8860F · donnee-4 #D65F8C · donnee-5 #7657C9 · donnee-6 #2C9A6A · quadrillage-couleur rgba(255, 255, 255, 0.055) · quadrillage-pas 46px

## Polices
titre : "Instrument Serif", serif · texte : "Geist", system-ui, sans-serif · mono : "Geist Mono", monospace · choc : "Anton", sans-serif

## Doctrine
- Couleur : Un contraste chaud, une seule couleur qui agit, cinq couleurs qui jouent. Les valeurs vivent dans `tokens/couleur.json`. https://styleguide.contentos.ch/doctrine/couleur.md
- Données : Un chiffre se lit d'abord, se décore ensuite. Les graphiques gardent le calme de la charte : des marques fines, beaucoup d'air, et la couleur qui ne sert qu'à distinguer. https://styleguide.contentos.ch/doctrine/donnees.md
- Essence : L'IA, c'est ludique et ce n'est pas compliqué : tout ce qui porte la marque doit en avoir l'air. La base est suisse, propre et calme ; le jeu arrive par touches, aux endroits prévus pour lui. https://styleguide.contentos.ch/doctrine/essence.md
- États : Un écran n'a pas toujours quelque chose à montrer. Chargement, vide, erreur, succès : ce sont des moments pour guider. Chaque message dit ce qui se passe et quoi faire, dans la voix de l'interface. https://styleguide.contentos.ch/doctrine/etats.md
- Forme et mouvement : Des angles doux, des traits nets, un mouvement qui répond. Les valeurs vivent dans `tokens/forme.json` et `tokens/mouvement.json`. https://styleguide.contentos.ch/doctrine/forme-et-mouvement.md
- Icônes : Deux jeux, chacun son rôle. Solar habille l'interface de tous les jours, en deux tons ; Pixelarticons arrive en grand, là où vit le quadrillage. Dans une app, tout s'importe depuis un seul fichier, `src/components/icones.tsx`. https://styleguide.contentos.ch/doctrine/icones.md
- Quadrillage : Le papier millimétré est le terrain de la marque : un fond discret sur lequel tout s'aligne, et dont quelques cases s'allument. Les valeurs vivent dans `tokens/quadrillage.json`. https://styleguide.contentos.ch/doctrine/quadrillage.md
- Slides : Une slide dit une idée. Le deck garde le calme de la charte : beaucoup d'air, une seule voix forte, et le quadrillage pour les moments d'entrée. Les gabarits vivent dans `slides.css`, à poser sur `tokens.css`. https://styleguide.contentos.ch/doctrine/slides.md
- Typographie : Quatre voix, une seule gamme. La serif porte le message, tout le reste recule pour la servir. Les valeurs vivent dans `tokens/typographie.json`. https://styleguide.contentos.ch/doctrine/typographie.md
- Visuels : Un visuel est une slide sur un autre canevas : mêmes pièces, mêmes règles, d'autres proportions. Il s'arrête dans un fil qui défile, donc il dit une seule chose, lisible en deux secondes sur un téléphone. Les gabarits vivent dans `visuels.css`, à poser sur `tokens.css` et `slides.css`. https://styleguide.contentos.ch/doctrine/visuels.md