Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Un gabarit d'étude de cas répétable : le client, le contexte, ce qui a été fait, le résultat chiffré, les crédits.
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 @fiche-de-cas
# @fiche-de-cas
Un gabarit d'étude de cas répétable : le client, le contexte, ce qui a été fait, le résultat chiffré, les crédits.
## Quand l'employer
Aligner plusieurs références dans un même document. Le gabarit fixe rend les cas comparables, ce qu'une page libre par client ne permet jamais.
## Les entrées attendues
- `client`
- `secteur`
- `contexte`
- `intervention`
- `2 ou 3 résultats chiffrés`
- `crédits`
## Les règles
1. Le gabarit ne bouge pas d'un cas à l'autre. C'est la constance qui rend la lecture rapide.
2. Le contexte dit le problème du client, pas votre offre. Deux phrases suffisent.
3. Les résultats portent une unité et une période. Un pourcentage sans base de départ ne prouve rien.
4. Les crédits nomment qui a fait quoi, y compris les tiers. Une référence sans crédit se retourne contre vous.
5. Le nom du client figure en clair, ou pas du tout. « Un grand groupe du CAC 40 » ne convainc personne.
## À ne pas lui demander
- Faire varier le nombre de résultats d'un cas à l'autre : deux partout, ou trois partout.
- Mélanger des cas de tailles très différentes sans le dire dans le contexte.
## 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 .res{border-top:2px solid var(--brand-accent);padding-top:14px}
.c .res b{display:block;font-family:var(--brand-display);font-size:38px;line-height:1;font-weight:600}
.c .res span{display:block;font-size:13px;color:var(--brand-ink-2);margin-top:10px;line-height:1.4}
</style>
<div class="c">
<div style="display:flex;align-items:baseline;justify-content:space-between;gap:24px;
border-bottom:var(--brand-line) solid var(--brand-rule);padding-bottom:20px">
<h2 class="t-menu" style="font-size:32px;margin:0">{{client}}</h2>
<p style="margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2)">{{secteur}}</p>
</div>
<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:34px;flex:1">
<div style="display:flex;flex-direction:column;gap:26px">
<div>
<p style="margin:0 0 9px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-accent);font-weight:600">Le contexte</p>
<p style="margin:0;font-size:15px;line-height:1.55;color:var(--brand-ink-2)">{{contexte}}</p>
</div>
<div>
<p style="margin:0 0 9px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-accent);font-weight:600">L'intervention</p>
<p style="margin:0;font-size:15px;line-height:1.55;color:var(--brand-ink-2)">{{intervention}}</p>
</div>
</div>
<div style="background:var(--brand-wash);border-radius:var(--brand-radius);padding:30px 32px;
display:flex;flex-direction:column;justify-content:center;gap:28px">
{{#resultats}}
<div class="res"><b>{{val}}</b><span>{{lec}}</span></div>
{{/resultats}}
</div>
</div>
<div class="foot"><span>{{credits}}</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.
# @fiche-de-cas Un gabarit d'étude de cas répétable : le client, le contexte, ce qui a été fait, le résultat chiffré, les crédits. ## Quand l'employer Aligner plusieurs références dans un même document. Le gabarit fixe rend les cas comparables, ce qu'une page libre par client ne permet jamais. ## Les entrées attendues - `client` - `secteur` - `contexte` - `intervention` - `2 ou 3 résultats chiffrés` - `crédits` ## Les règles 1. Le gabarit ne bouge pas d'un cas à l'autre. C'est la constance qui rend la lecture rapide. 2. Le contexte dit le problème du client, pas votre offre. Deux phrases suffisent. 3. Les résultats portent une unité et une période. Un pourcentage sans base de départ ne prouve rien. 4. Les crédits nomment qui a fait quoi, y compris les tiers. Une référence sans crédit se retourne contre vous. 5. Le nom du client figure en clair, ou pas du tout. « Un grand groupe du CAC 40 » ne convainc personne. ## À ne pas lui demander - Faire varier le nombre de résultats d'un cas à l'autre : deux partout, ou trois partout. - Mélanger des cas de tailles très différentes sans le dire dans le contexte. ## 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
9 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.
Fiche de cas répétée à l'identique
Chaque cas reprend la même structure, un titre à deux étages avec le nom en serif et la ville en linéale, une bande de trois photos alignées, puis deux colonnes de légende. La répétition stricte rend les cas comparables et accélère la lecture dès le deuxième.
Étude de cas en texte seul
La page ne montre aucune image, seulement le récit du projet, un sous-titre Les résultats, et un bouton en bas à droite qui renvoie vers l'étude complète. Assumer de ne pas tout dire raccourcit la slide et laisse le lien porter la preuve détaillée.
Fiche de cas à ordre fixe
Le logo du client et une phrase de promesse ouvrent la page, des pastilles rangent les métiers mobilisés à droite, la capture du travail occupe le centre, et deux résultats chiffrés ferment le bas sur un fond translucide. La page raconte le cas complet dans un ordre toujours identique, ce qui rend dix références comparables entre elles.
Fiche de tendance à gabarit constant
Chaque tendance reçoit la même fiche, grand titre, deux colonnes de corps, étiquettes de caractéristiques en bas, mosaïque d'images sur l'autre moitié. Le lecteur apprend le gabarit à la première fiche et lit toutes les suivantes plus vite.
Cas client en trois bandes verticales
Mosaïque d'images à gauche, récit au centre, colonne de trois résultats chiffrés à droite sur fond teinté. Le même gabarit sert huit cas d'affilée, donc le lecteur apprend à le lire une seule fois puis compare les cas sans effort.
Fiche de cas à crédits incrustés
Chaque référence tient dans un bloc répétable qui enchaîne un bandeau titre avec onglet d'action, le visuel, une étiquette agence-client-pays incrustée dans le coin de l'image, puis le paragraphe d'explication. Deux ou trois de ces blocs cohabitent sur une même page sans se gêner parce que leur anatomie ne change jamais.
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é.