Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Une part rendue visible avant d'être lue : anneaux, grille de cent, pictogrammes unitaires. Le chiffre confirme ce que l'œil a déjà compris.
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 @proportion-visuelle
# @proportion-visuelle
Une part rendue visible avant d'être lue : anneaux, grille de cent, pictogrammes unitaires. Le chiffre confirme ce que l'œil a déjà compris.
## Quand l'employer
Faire sentir une proportion plutôt que l'énoncer. Un « 68 % » écrit se lit ; un anneau aux deux tiers pleins se comprend avant d'être lu.
## Les entrées attendues
- `titre`
- `2 ou 3 parts (libellé, pourcentage, lecture)`
- `source`
## Les règles
1. L'anneau porte sa valeur en son centre. Aucune légende déportée, aucun renvoi de couleur à décoder.
2. Trois parts au maximum. Un camembert à sept parts ne se lit plus, il se déchiffre.
3. La part décisive prend l'accent, les autres l'aplat neutre. Une seule part à l'accent par page.
4. La phrase de lecture dit ce que la part signifie, jamais ce qu'elle vaut : le chiffre est déjà là.
5. Les parts d'une même page se lisent sur la même base. Une base différente se dit dans le libellé.
## À ne pas lui demander
- Comparer des proportions de bases différentes sans le signaler : la figure ment alors sans le dire.
- Employer ce composant pour une évolution dans le temps, 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 .anneau{display:flex;flex-direction:column;align-items:center;text-align:center}
.c .anneau .disc{width:196px;height:196px;border-radius:50%;display:grid;place-items:center;position:relative}
.c .anneau .disc::after{content:"";position:absolute;inset:26px;border-radius:50%;background:var(--brand-paper)}
.c .anneau .val{position:relative;z-index:1;font-family:var(--brand-display);font-size:42px;
line-height:1;font-weight:600}
.c .anneau .lib{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2);margin:22px 0 0}
.c .anneau .lec{font-size:14px;line-height:1.45;color:var(--brand-ink-2);margin:10px 0 0;max-width:24ch}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<div style="display:flex;justify-content:space-around;align-items:center;gap:40px;margin-top:20px;flex:1">
{{#parts}}
<div class="anneau">
<div class="disc" style="background:conic-gradient({{teinte}} {{deg}}deg, var(--brand-wash) 0)">
<span class="val">{{pct}}</span>
</div>
<p class="lib">{{lib}}</p>
<p class="lec">{{lec}}</p>
</div>
{{/parts}}
</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.
# @proportion-visuelle Une part rendue visible avant d'être lue : anneaux, grille de cent, pictogrammes unitaires. Le chiffre confirme ce que l'œil a déjà compris. ## Quand l'employer Faire sentir une proportion plutôt que l'énoncer. Un « 68 % » écrit se lit ; un anneau aux deux tiers pleins se comprend avant d'être lu. ## Les entrées attendues - `titre` - `2 ou 3 parts (libellé, pourcentage, lecture)` - `source` ## Les règles 1. L'anneau porte sa valeur en son centre. Aucune légende déportée, aucun renvoi de couleur à décoder. 2. Trois parts au maximum. Un camembert à sept parts ne se lit plus, il se déchiffre. 3. La part décisive prend l'accent, les autres l'aplat neutre. Une seule part à l'accent par page. 4. La phrase de lecture dit ce que la part signifie, jamais ce qu'elle vaut : le chiffre est déjà là. 5. Les parts d'une même page se lisent sur la même base. Une base différente se dit dans le libellé. ## À ne pas lui demander - Comparer des proportions de bases différentes sans le signaler : la figure ment alors sans le dire. - Employer ce composant pour une évolution dans le temps, 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
7 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.
Anneaux qui grossissent avec la valeur
Trois anneaux de diamètres croissants portent 18 %, 31 % puis 49 %. La progression se voit avant d'être lue, parce que la taille du cercle grandit en même temps que le chiffre. Trois camemberts de même taille auraient demandé un effort de lecture pour un gain nul.
Ratio dessiné, un élément coloré
Dix portraits dessinés, un seul en bleu, et la phrase du bas reprend ce bleu sur la moitié qui porte l'information. Le rapport d'un sur dix se voit avant d'être lu, ce qu'un pourcentage écrit ne fait jamais.
Chiffre décomposé en grilles de points
Le nombre est composé dans la phrase elle-même, à un corps quatre fois supérieur au reste, puis deux cartes en découpent les sous-ensembles et dessinent autant de points qu'il y a d'unités. Le lecteur perçoit la quantité avant de lire le chiffre, et la décomposition reste vérifiable puisque les points se comptent.
Pictogrammes unitaires au lieu de barres
Chaque disque jaune vaut un ami et le dernier disque est coupé pour rendre la décimale, donc la moyenne se compte à l'oeil sans jamais lire un axe. L'écart entre 6,6 et 2,6 devient physique, là où deux barres se seraient ressemblées.
Cadran de pourcentage, chiffre au centre
L'arc noir porte la part et le pourcentage s'écrit dans le disque, donc la figure et sa valeur ne se lisent pas à deux endroits. Les deux légendes se suivent et forment une seule phrase d'un cadran à l'autre, ce qui installe la comparaison sans une ligne de texte de plus.
Grille de cent carrés, deux proportions
Deux réponses à 35 % et 34 % remplissent la même grille de cent carrés, en bleu et en rouge, avec le libellé écrit à l'intérieur du bloc. La quasi-égalité se voit à la surface occupée, là où deux barres auraient désigné un faux gagnant.
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é.