Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Quatre indicateurs avec libellé, valeur et phrase de lecture.
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 @chiffres-cles
# @chiffres-cles
Quatre indicateurs avec libellé, valeur et phrase de lecture.
## Quand l'employer
Poser quatre indicateurs qui soutiennent le titre de la slide.
## Les entrées attendues
- `titre`
- `4 × (libellé, valeur, lecture)`
- `source`
## Les règles
1. Exactement quatre colonnes. À trois, la grille se déséquilibre ; à cinq, les valeurs deviennent illisibles.
2. Chaque valeur porte son unité dans la valeur elle-même, jamais dans le libellé.
3. La phrase de lecture explique le chiffre, elle ne le répète pas.
4. La source figure au pied dès qu'un chiffre est cité.
## À ne pas lui demander
- Mélanger des unités hétérogènes sans le dire dans la lecture.
- Employer ce composant pour une seule statistique : un chiffre isolé appelle une autre mise en page.
## 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}
</style>
<div class="c">
<h2>{{titre}}</h2>
<div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;
border-top:var(--brand-line) solid var(--brand-rule)">
{{#kpis}}
<div style="padding:30px 26px 30px 0;border-right:var(--brand-line) solid var(--brand-rule)">
<p style="font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2);margin:0 0 14px">{{lib}}</p>
<p style="font-family:var(--brand-display);font-size:46px;line-height:1;margin:0;font-weight:600">{{val}}</p>
<p style="font-size:14px;color:var(--brand-ink-2);margin:14px 0 0;line-height:1.4">{{lec}}</p>
</div>
{{/kpis}}
</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.
# @chiffres-cles Quatre indicateurs avec libellé, valeur et phrase de lecture. ## Quand l'employer Poser quatre indicateurs qui soutiennent le titre de la slide. ## Les entrées attendues - `titre` - `4 × (libellé, valeur, lecture)` - `source` ## Les règles 1. Exactement quatre colonnes. À trois, la grille se déséquilibre ; à cinq, les valeurs deviennent illisibles. 2. Chaque valeur porte son unité dans la valeur elle-même, jamais dans le libellé. 3. La phrase de lecture explique le chiffre, elle ne le répète pas. 4. La source figure au pied dès qu'un chiffre est cité. ## À ne pas lui demander - Mélanger des unités hétérogènes sans le dire dans la lecture. - Employer ce composant pour une seule statistique : un chiffre isolé appelle une autre mise en page. ## 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 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
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
13 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 indicateurs sous la légende
Sous la photo, un court paragraphe raconte l'opération et quatre indicateurs alignés la mesurent, chaque libellé en petit gris posé au-dessus de sa valeur. Le récit et le chiffrage tiennent sur la même page sans passer par un tableau.
Chiffres clés en formes libres
Les chiffres ne s'alignent pas en colonnes, ils flottent dans des formes libres de tailles inégales. La forme la plus grande porte le chiffre le plus fort, donc la hiérarchie se lit avant les libellés.
Un fait par tuile, chiffre en accent
Chaque tuile applique la même règle, le chiffre ou le mot fort en couleur d'accent, la légende en blanc et en petit corps. Répéter cette règle sur trente tuiles fait tenir une page très dense sans qu'aucune hiérarchie ne soit à deviner.
Chiffre en pastille dans le texte
Le chiffre ne prend pas sa propre page, il s'installe en pastille colorée au-dessus de la colonne qu'il résume, en très gros corps, avec sa phrase de contexte collée dedans. La preuve reste au contact de l'argument qu'elle sert.
Chiffres empilés, chacun avec sa phrase
Quatre pourcentages s'empilent en lignes séparées par un filet, chacun suivi de la phrase qui l'explique. La ligne laisse la place d'une explication complète, là où une rangée de quatre colonnes obligerait à couper l'argument.
Chiffre logé dans une forme colorée
Le rapport loge ses deux statistiques dans un carré vert incliné et un rond jaune qui chevauchent la photo détourée, et le sujet de l'image semble les tenir. Le chiffre devient un objet de la scène au lieu d'un encart gris plaqué dans un coin.
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é.