Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Un graphique en barres et la lecture qui l'accompagne, côte à côte. Le titre porte la conclusion, la figure la démontre.
Entrées attendues
Prêt à coller
Remplacez les quinze valeurs de charte par les vôtres, décrivez votre contenu, et rendez la slide. Votre texte ne passe par aucun serveur tiers : il reste dans votre conversation.
Tu produis une slide au format HTML, à la charte ci-dessous. Applique le skill sans l'interpréter.
## Ma charte
--brand-paper: #FFFFFF /* fond de slide */
--brand-ink: #101F2C /* encre principale */
--brand-ink-2: #5B6875 /* encre secondaire */
--brand-wash: #EEF2F5 /* aplat neutre */
--brand-accent: #0E6B8A /* accent, avec parcimonie */
--brand-accent-soft: #DDEDF3 /* accent adouci */
--brand-rule: #D7DEE4 /* filets */
--brand-radius: 4px /* rayon unique */
--brand-line: 1px /* épaisseur de filet unique */
--brand-display: "…" /* police des titres */
--brand-body: "…" /* police du corps */
/* les quatre suivantes ne servent qu'aux composants qui portent une image */
--brand-img-voile: linear-gradient(180deg, rgba(16,31,44,.72) 0%, rgba(16,31,44,.42) 55%, rgba(16,31,44,.66) 100%);
/* voile posé sur l'image, obligatoire */
--brand-img-ink: #FFFFFF /* encre du texte posé SUR l'image */
--brand-img-filtre: grayscale(.35) contrast(1.06) brightness(.95)
/* traitement, identique pour toute image */
--brand-img-teinte: rgba(14,107,138,.22)
/* teinte projetée, en mélange multiply */
Remplacez ces quinze valeurs par les vôtres.
L'encre d'image ne se déduit ni du papier ni de l'encre : elle se lit contre le
voile, qui reste sombre même sur une charte sombre.
## Le skill de @graphique-commente
# @graphique-commente
Un graphique en barres et la lecture qui l'accompagne, côte à côte. Le titre porte la conclusion, la figure la démontre.
## Quand l'employer
Poser un chiffre qui évolue et dire tout de suite ce qu'il faut en retenir. C'est le composant de la preuve chiffrée, celui qui sert le plus souvent dans un document d'analyse.
## Les entrées attendues
- `titre-conclusion`
- `barres (libellé, valeur, hauteur)`
- `2 ou 3 points de lecture`
- `source`
## Les règles
1. Le titre porte la conclusion, jamais l'objet. « La marge gagne 5,5 points en quatre ans » et non « Évolution de la marge ».
2. La valeur se lit sur la barre elle-même. Aucun axe vertical, aucune grille de fond : la barre porte son chiffre.
3. La colonne de lecture explique la figure, elle ne la répète pas. Deux points, trois au plus.
4. La barre décisive prend l'accent, les autres restent en aplat neutre. Un seul accent par figure.
5. La source figure sous la figure, dans le pied, dès qu'un chiffre est cité.
## À ne pas lui demander
- Empiler deux séries dans la même barre : la comparaison devient illisible, employez @petits-multiples.
- Dépasser sept barres. Au-delà, la lecture bascule vers un tableau.
- Colorer chaque barre d'une couleur différente : la couleur sert à désigner, pas à décorer.
## Tokens de charte employés
Ce composant n'écrit aucune couleur, aucune police, aucun rayon ni aucune
épaisseur de filet en dur. Il lit uniquement :
`--brand-paper`, `--brand-ink`, `--brand-ink-2`, `--brand-wash`,
`--brand-accent`, `--brand-accent-soft`, `--brand-rule`, `--brand-radius`,
`--brand-line`, `--brand-display`, `--brand-body`.
Ce composant lit ces onze valeurs et s'y conforme sans interprétation. La
charte complète en compte quinze : les quatre autres règlent le traitement des
images et ne servent qu'aux composants qui en portent une.
## Le composant
```html
<style>
.c{position:absolute;inset:0;background:var(--brand-paper);color:var(--brand-ink);
font-family:var(--brand-body);padding:72px 88px 104px;box-sizing:border-box;display:flex;
flex-direction:column}
.c h2{font-family:var(--brand-display);font-size:46px;line-height:1.08;letter-spacing:-.026em;
font-weight:600;margin:0;max-width:24ch}
.c h2.t-fort{font-size:68px;line-height:1.02;letter-spacing:-.035em;max-width:17ch}
.c h2.t-menu{font-size:34px;line-height:1.14;letter-spacing:-.018em;max-width:30ch}
.c .sub{color:var(--brand-ink-2);font-size:19px;margin:14px 0 0;max-width:62ch;line-height:1.45}
.c .foot{position:absolute;left:88px;right:88px;bottom:40px;display:flex;justify-content:space-between;
font-size:13px;color:var(--brand-ink-2)}
.c .kicker{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-accent);
font-weight:600;margin:0 0 18px}
/* image : voile, filtre et teinte viennent tous de la charte */
.c .img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;
filter:var(--brand-img-filtre)}
.c .voile{position:absolute;inset:0;background:var(--brand-img-voile)}
.c .teinte{position:absolute;inset:0;background:var(--brand-img-teinte);mix-blend-mode:multiply}
.c .bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;flex:1}
.c .bar span{font-family:var(--brand-display);font-size:19px;font-weight:600;margin-bottom:10px}
.c .bar i{display:block;width:100%;background:var(--brand-wash);border-radius:var(--brand-radius) var(--brand-radius) 0 0}
.c .bar.on i{background:var(--brand-accent)}
.c .bar.on span{color:var(--brand-accent)}
.c .bar em{font-style:normal;font-size:13px;color:var(--brand-ink-2);margin-top:12px}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<div style="display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:56px;margin-top:42px;flex:1">
<div style="display:flex;align-items:stretch;gap:18px;border-bottom:var(--brand-line) solid var(--brand-rule);padding-bottom:14px">
{{#barres}}
<div class="bar {{etat}}">
<span>{{val}}</span>
<i style="height:{{h}}px"></i>
<em>{{lib}}</em>
</div>
{{/barres}}
</div>
<div style="display:flex;flex-direction:column;justify-content:center;gap:24px;
border-left:var(--brand-line) solid var(--brand-rule);padding-left:34px">
{{#lectures}}
<div>
<p style="margin:0;font-family:var(--brand-display);font-size:17px;font-weight:600;line-height:1.25">{{t}}</p>
<p style="margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--brand-ink-2)">{{d}}</p>
</div>
{{/lectures}}
</div>
</div>
<div class="foot"><span>{{source}}</span><span>{{page}}</span></div>
</div>
```
## Mon contenu
Remplacez les valeurs entre accolades par les vôtres, puis rendez la slide en
1280 × 720. Ne changez aucune règle graphique du composant.Les règles
Rien n'est caché derrière une inscription. Le fichier de règles est ce qui empêche le modèle d'improviser, et vous devez pouvoir le juger avant de payer quoi que ce soit.
# @graphique-commente Un graphique en barres et la lecture qui l'accompagne, côte à côte. Le titre porte la conclusion, la figure la démontre. ## Quand l'employer Poser un chiffre qui évolue et dire tout de suite ce qu'il faut en retenir. C'est le composant de la preuve chiffrée, celui qui sert le plus souvent dans un document d'analyse. ## Les entrées attendues - `titre-conclusion` - `barres (libellé, valeur, hauteur)` - `2 ou 3 points de lecture` - `source` ## Les règles 1. Le titre porte la conclusion, jamais l'objet. « La marge gagne 5,5 points en quatre ans » et non « Évolution de la marge ». 2. La valeur se lit sur la barre elle-même. Aucun axe vertical, aucune grille de fond : la barre porte son chiffre. 3. La colonne de lecture explique la figure, elle ne la répète pas. Deux points, trois au plus. 4. La barre décisive prend l'accent, les autres restent en aplat neutre. Un seul accent par figure. 5. La source figure sous la figure, dans le pied, dès qu'un chiffre est cité. ## À ne pas lui demander - Empiler deux séries dans la même barre : la comparaison devient illisible, employez @petits-multiples. - Dépasser sept barres. Au-delà, la lecture bascule vers un tableau. - Colorer chaque barre d'une couleur différente : la couleur sert à désigner, pas à décorer. ## Tokens de charte employés Ce composant n'écrit aucune couleur, aucune police, aucun rayon ni aucune épaisseur de filet en dur. Il lit uniquement : `--brand-paper`, `--brand-ink`, `--brand-ink-2`, `--brand-wash`, `--brand-accent`, `--brand-accent-soft`, `--brand-rule`, `--brand-radius`, `--brand-line`, `--brand-display`, `--brand-body`. Ce composant lit ces onze valeurs et s'y conforme sans interprétation. La charte complète en compte quinze : les quatre autres règlent le traitement des images et ne servent qu'aux composants qui en portent une.
Même famille · Preuve
Relevé dans 13 documents · Lefty, Ace & Tate
Quatre indicateurs avec libellé, valeur et phrase de lecture.
type: chiffres clés · charte: héritée
Relevé dans 9 documents · Arkive Inc., Combo
Oppose deux options ligne à ligne sur les mêmes critères. La colonne retenue prend l'accent, jamais une couleur de validation.
type: comparatif · charte: héritée
Relevé dans 6 documents · BB Agency, Riot Games
Tableau à lignes alternées avec une ligne de médiane et une ligne mise en avant.
type: tableau · charte: héritée
Vu dans des présentations réelles
18 pages relevées dans la galerie
Chaque vignette est la page réelle du document, créditée à son éditeur, avec la leçon qui explique pourquoi la mise en page tient. Le composant ci-dessus la refait à votre charte.
Graphique à gauche, expert à droite
Le titre énonce la conclusion, le graphique la mesure, et la colonne de droite laisse un expert nommé expliquer le mécanisme sur toute la hauteur, séparée par un simple filet vertical. Le chiffre et son interprétation restent sur la même page, donc le lecteur n'a pas à faire le rapprochement lui-même.
Prose à gauche, donnée à droite
Toutes les pages de résultats suivent le même partage, le titre et l'analyse rédigée à gauche, la phrase de lecture puis le graphique à droite. Le lecteur pressé descend la colonne de droite d'un bout à l'autre du rapport, le lecteur attentif lit à gauche, et aucun des deux ne se perd.
Argumentaire à gauche, preuves en cartes
La colonne de gauche déroule la démonstration en prose, un filet vertical la sépare de trois cartes qui portent chacune un pictogramme, un titre court et sa source entre crochets. Le lecteur pressé lit les trois cartes, le lecteur attentif lit la colonne, et les deux arrivent à la même conclusion.
Filet qui relie commentaire et graphique
Un trait fin part du bloc de commentaire, descend le long de la page et vient toucher le cadre du graphique qu'il commente. Le lecteur sait quelle phrase lit quelle courbe, sans flèche ni légende ajoutée.
Titre-conclusion en colonne inversée
La conclusion occupe une colonne blanche étroite sur toute la hauteur, en gros corps et en lignes courtes, pendant que la démonstration tient le reste de la page en noir. Le titre devient un objet à lire en premier et facile à retenir, au lieu d'une ligne posée en haut de page.
Titre-conclusion, commentaire, graphique
Le titre énonce le résultat en une phrase, la colonne de gauche l'explique en trois paragraphes, le graphique de droite le prouve. Personne n'a à déchiffrer les barres pour savoir quoi en retenir.
Nous construisons votre socle de marque et déclinons toute la bibliothèque à vos couleurs, vos polices et vos mesures. Vous en devenez propriétaire, sans licence ni abonnement imposé.