Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
La même figure répétée en cartes alignées, une par segment. Mêmes échelles partout, donc la comparaison se fait à l'œil.
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 @petits-multiples
# @petits-multiples
La même figure répétée en cartes alignées, une par segment. Mêmes échelles partout, donc la comparaison se fait à l'œil.
## Quand l'employer
Comparer la même grandeur sur plusieurs segments, plusieurs pays ou plusieurs périodes. Six petits graphiques identiques se comparent mieux qu'un grand graphique à six courbes.
## Les entrées attendues
- `titre`
- `4 à 6 cartes (segment, série de valeurs, valeur mise en avant)`
- `échelle commune`
- `source`
## Les règles
1. L'échelle est commune à toutes les cartes, et elle est écrite une fois. Sans échelle commune, la figure ment.
2. Toutes les cartes ont la même taille, la même grille et le même ordre de lecture.
3. Le segment se nomme dans la carte, jamais dans une légende déportée.
4. La dernière valeur de chaque série prend l'accent, ce qui donne le point de comparaison.
5. Six cartes au maximum. Au-delà, la page devient un tableau de figures que personne ne lit plus.
## À ne pas lui demander
- Adapter l'échelle carte par carte pour « mieux voir » : c'est exactement ce que la figure interdit.
- Employer ce composant pour une seule série, qui appelle @graphique-commente.
## 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 .pm{border:var(--brand-line) solid var(--brand-rule);border-radius:var(--brand-radius);
padding:16px 18px 14px;display:flex;flex-direction:column;gap:12px}
.c .pm .seg{margin:0;font-size:12.5px;font-weight:600;font-family:var(--brand-display)}
.c .pm .fig{display:flex;align-items:flex-end;gap:5px;height:74px}
.c .pm .fig i{flex:1;background:var(--brand-wash);border-radius:1px}
.c .pm .fig i.on{background:var(--brand-accent)}
.c .pm .der{margin:0;font-size:11px;color:var(--brand-ink-2)}
.c .pm .der b{font-family:var(--brand-display);font-size:17px;color:var(--brand-ink);font-weight:600}
</style>
<div class="c">
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:30px">
<h2 class="t-menu" style="max-width:24ch">{{titre}}</h2>
<p style="margin:0;font-size:12px;color:var(--brand-ink-2);border:var(--brand-line) solid var(--brand-rule);
border-radius:var(--brand-radius);padding:8px 14px;white-space:nowrap">{{echelle}}</p>
</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;flex:1;align-content:center">
{{#cartes}}
<div class="pm">
<p class="seg">{{seg}}</p>
<div class="fig">
{{#barres}}<i class="{{etat}}" style="height:{{h}}%"></i>{{/barres}}
</div>
<p class="der"><b>{{val}}</b> {{lec}}</p>
</div>
{{/cartes}}
</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.
# @petits-multiples La même figure répétée en cartes alignées, une par segment. Mêmes échelles partout, donc la comparaison se fait à l'œil. ## Quand l'employer Comparer la même grandeur sur plusieurs segments, plusieurs pays ou plusieurs périodes. Six petits graphiques identiques se comparent mieux qu'un grand graphique à six courbes. ## Les entrées attendues - `titre` - `4 à 6 cartes (segment, série de valeurs, valeur mise en avant)` - `échelle commune` - `source` ## Les règles 1. L'échelle est commune à toutes les cartes, et elle est écrite une fois. Sans échelle commune, la figure ment. 2. Toutes les cartes ont la même taille, la même grille et le même ordre de lecture. 3. Le segment se nomme dans la carte, jamais dans une légende déportée. 4. La dernière valeur de chaque série prend l'accent, ce qui donne le point de comparaison. 5. Six cartes au maximum. Au-delà, la page devient un tableau de figures que personne ne lit plus. ## À ne pas lui demander - Adapter l'échelle carte par carte pour « mieux voir » : c'est exactement ce que la figure interdit. - Employer ce composant pour une seule série, qui appelle @graphique-commente. ## 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 16 documents · GHARAGE GmbH & Co. KG, Artsy
Un graphique en barres et la lecture qui l'accompagne, côte à côte. Le titre porte la conclusion, la figure la démontre.
type: graphique · charte: héritée
Vu dans des présentations réelles
4 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.
Quatre graphiques en cartes alignées
Quatre indicateurs, quatre cartes de même largeur, chacune avec son titre, son unité et ses trois barres annotées. La répétition rend la comparaison immédiate là où un graphique unique à quatre axes obligerait à décoder une légende.
Trois cartes, un mini-graphe chacune
Plutôt que d'empiler trois séries dans un même graphique, chaque série reçoit sa carte blanche, avec la même grammaire de lecture et la valeur écrite au bout de la barre. La comparaison se fait d'une carte à l'autre, jamais dans un enchevêtrement de couleurs.
Petits multiples pour comparer des segments
La figure principale est répétée en deux exemplaires réduits, un par segment, alignés dessous avec la même palette et les mêmes libellés. La comparaison se fait par superposition mentale, ce qu'un graphique de type différent aurait interdit.
Deux graphiques sous un filet vertical
La même grandeur est montrée deux fois sur la page, par trimestre à gauche et par année à droite, séparées par un simple filet vertical, chaque bloc portant sa variation en orange avec une flèche vers la dernière barre. Le lecteur juge le trimestre sans perdre la tendance longue.
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é.