Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Les engagements en lignes : la promesse, l'avancement, le statut, un par ligne et rien de plus.
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 @tableau-de-suivi
# @tableau-de-suivi
Les engagements en lignes : la promesse, l'avancement, le statut, un par ligne et rien de plus.
## Quand l'employer
Rendre compte devant un comité d'engagements déjà pris. La ligne unique par engagement force à trancher plutôt qu'à commenter.
## Les entrées attendues
- `titre`
- `5 ou 6 lignes (engagement, échéance, avancement, statut)`
- `date d'arrêté`
## Les règles
1. Un engagement par ligne, formulé comme il l'a été pris. Ne pas le réécrire à la lumière du résultat.
2. L'avancement se lit en barre et en chiffre. La barre donne le coup d'œil, le chiffre donne la valeur.
3. Le statut prend un mot, pas une phrase. Tenu, en cours, décalé, abandonné.
4. La date d'arrêté figure en pied. Un tableau de suivi sans date est un tableau faux dès le lendemain.
5. Les lignes se rangent par échéance, jamais par statut : ranger par statut cache les retards en bas.
## À ne pas lui demander
- Retirer une ligne abandonnée : elle reste, avec son statut. Le tableau perd sa valeur dès qu'il s'expurge.
- Employer une couleur de feu tricolore comme seule marque de statut.
## 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 .ln{display:grid;grid-template-columns:minmax(0,1fr) 120px 190px 120px;gap:22px;align-items:center;
padding:15px 0;border-bottom:var(--brand-line) solid var(--brand-rule);font-size:14px}
.c .ln.tete{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2);
padding-bottom:11px;border-bottom:2px solid var(--brand-ink)}
.c .jauge{height:7px;border-radius:99px;background:var(--brand-wash);position:relative;overflow:hidden}
.c .jauge i{position:absolute;inset:0 auto 0 0;background:var(--brand-accent);border-radius:99px}
.c .avc{display:flex;align-items:center;gap:12px}
.c .avc span{font-size:12.5px;color:var(--brand-ink-2);width:38px;text-align:right}
.c .st{font-size:12px;letter-spacing:.06em;text-transform:uppercase;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:26ch">{{titre}}</h2>
<p style="margin:0;font-size:12.5px;color:var(--brand-ink-2);white-space:nowrap">{{arrete}}</p>
</div>
<div style="margin-top:30px;flex:1">
<div class="ln tete"><span>Engagement</span><span>Échéance</span><span>Avancement</span><span>Statut</span></div>
{{#lignes}}
<div class="ln">
<span>{{engagement}}</span>
<span style="color:var(--brand-ink-2)">{{echeance}}</span>
<span class="avc">
<span class="jauge" style="flex:1"><i style="width:{{pct}}%"></i></span>
<span>{{pct}} %</span>
</span>
<span class="st" style="color:{{teinte}}">{{statut}}</span>
</div>
{{/lignes}}
</div>
<div class="foot"><span>{{note}}</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.
# @tableau-de-suivi Les engagements en lignes : la promesse, l'avancement, le statut, un par ligne et rien de plus. ## Quand l'employer Rendre compte devant un comité d'engagements déjà pris. La ligne unique par engagement force à trancher plutôt qu'à commenter. ## Les entrées attendues - `titre` - `5 ou 6 lignes (engagement, échéance, avancement, statut)` - `date d'arrêté` ## Les règles 1. Un engagement par ligne, formulé comme il l'a été pris. Ne pas le réécrire à la lumière du résultat. 2. L'avancement se lit en barre et en chiffre. La barre donne le coup d'œil, le chiffre donne la valeur. 3. Le statut prend un mot, pas une phrase. Tenu, en cours, décalé, abandonné. 4. La date d'arrêté figure en pied. Un tableau de suivi sans date est un tableau faux dès le lendemain. 5. Les lignes se rangent par échéance, jamais par statut : ranger par statut cache les retards en bas. ## À ne pas lui demander - Retirer une ligne abandonnée : elle reste, avec son statut. Le tableau perd sa valeur dès qu'il s'expurge. - Employer une couleur de feu tricolore comme seule marque de statut. ## 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
2 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.
Aplat pleine page, engagements numérotés
La page d'engagements bascule sur un aplat de couleur pleine, titre en haut à gauche et liste numérotée en deux colonnes à droite. La moitié basse reste vide, ce qui donne à la couleur un rôle de séparation entre deux chapitres.
Engagement, avancement, statut sur une ligne
Chaque promesse est réécrite mot pour mot à gauche, son avancement rédigé au centre, son statut symbolisé à droite, y compris quand l'avancement déçoit. Le lecteur ne peut pas confondre l'intention et le résultat, et la colonne de statut donne le bilan en une seconde.
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é.