Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Plusieurs témoignages sur une même page, chaque attribution soudée à son bloc, les registres tenus distincts.
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 @mur-de-citations
# @mur-de-citations
Plusieurs témoignages sur une même page, chaque attribution soudée à son bloc, les registres tenus distincts.
## Quand l'employer
Faire porter une preuve par plusieurs voix plutôt que par une seule. Trois clients qui disent la même chose autrement valent mieux qu'un long témoignage.
## Les entrées attendues
- `titre`
- `3 ou 4 citations (verbatim, nom, fonction, maison)`
- `provenance`
## Les règles
1. L'attribution est collée à sa citation, dans le même bloc. Une grille d'attributions séparée crée des erreurs d'appariement.
2. Chaque citation garde le mot du client, coupures marquées. Un verbatim retouché n'est plus un verbatim.
3. Les citations disent des choses différentes. Trois fois la même louange se lit comme une seule.
4. L'attribution donne le nom, la fonction et la maison. Deux sur trois ne suffisent pas.
5. Quarante mots au maximum par citation. Au-delà, c'est un témoignage et il lui faut sa page.
## À ne pas lui demander
- Citer sans autorisation écrite, même un propos tenu en réunion.
- Composer toutes les citations en gros corps : la page devient un mur sans hiérarchie.
## 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 .cit{border-top:2px solid var(--brand-accent);padding-top:20px;display:flex;
flex-direction:column;justify-content:space-between;gap:20px}
.c .cit blockquote{margin:0;font-family:var(--brand-display);font-size:20px;line-height:1.32;
letter-spacing:-.014em;font-weight:600}
.c .cit.menu blockquote{font-size:16px;line-height:1.42;font-family:var(--brand-body);font-weight:400;
color:var(--brand-ink-2)}
.c .cit figcaption{font-size:12.5px;line-height:1.45;color:var(--brand-ink-2)}
.c .cit figcaption b{display:block;color:var(--brand-ink);font-size:13.5px;font-weight:600}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:40px;flex:1;align-content:center">
{{#citations}}
<figure class="cit {{registre}}" style="margin:0">
<blockquote>{{verbatim}}</blockquote>
<figcaption><b>{{nom}}</b>{{fonction}}, {{maison}}</figcaption>
</figure>
{{/citations}}
</div>
<div class="foot"><span>{{provenance}}</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.
# @mur-de-citations Plusieurs témoignages sur une même page, chaque attribution soudée à son bloc, les registres tenus distincts. ## Quand l'employer Faire porter une preuve par plusieurs voix plutôt que par une seule. Trois clients qui disent la même chose autrement valent mieux qu'un long témoignage. ## Les entrées attendues - `titre` - `3 ou 4 citations (verbatim, nom, fonction, maison)` - `provenance` ## Les règles 1. L'attribution est collée à sa citation, dans le même bloc. Une grille d'attributions séparée crée des erreurs d'appariement. 2. Chaque citation garde le mot du client, coupures marquées. Un verbatim retouché n'est plus un verbatim. 3. Les citations disent des choses différentes. Trois fois la même louange se lit comme une seule. 4. L'attribution donne le nom, la fonction et la maison. Deux sur trois ne suffisent pas. 5. Quarante mots au maximum par citation. Au-delà, c'est un témoignage et il lui faut sa page. ## À ne pas lui demander - Citer sans autorisation écrite, même un propos tenu en réunion. - Composer toutes les citations en gros corps : la page devient un mur sans hiérarchie. ## 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 · Narration
Relevé dans 11 documents · Accenture, Apple Inc.
Une citation en grand corps, avec son auteur en texte courant. Jamais de nom en capitales interlettrées.
type: citation · charte: héritée
Relevé dans 12 documents · Studio Freight, Diagram
Une phrase seule, en très gros corps, sur une page nue. Rien d'autre ne partage la page avec elle.
type: manifeste · charte: héritée
Relevé dans 2 documents · ilovecreatives, Land of Plenty
Questions et réponses en colonnes, le registre de la question tenu distinct de celui de la réponse.
type: questions · charte: héritée
Vu dans des présentations réelles
3 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.
Mur de citations à bandeau d'attribution
Six témoignages occupent la double page, chacun dans un bloc blanc dont l'attribution est soudée en bandeau noir juste sous le texte. Le bandeau sert à la fois de socle visuel et de signature, ce qui permet d'empiler des voix multiples sans que la page devienne illisible.
Verbatim anonyme et expert nommé ensemble
Deux régimes de citation cohabitent sur la même page. L'expert apparaît avec sa photo, son nom et sa fonction sur fond sombre, tandis que les verbatims de terrain tiennent sur des cartons clairs signés d'un prénom, d'un âge et d'un État. Le lecteur distingue l'autorité du témoignage sans qu'aucune légende ait à le lui expliquer.
Double témoignage avec logo et fonction
Deux cartes jumelles portent chacune une phrase de contexte, la citation en grand, la photo de l'intervenant sur scène, le logo de son entreprise et sa fonction exacte. La parole client arrive avec son autorité dans le même bloc, donc rien n'oblige à croire la marque sur parole.
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é.