Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Une grille de références clientes, à cadre et à hauteur constants, avec une pastille de preuve chiffrée en option.
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-logos
# @mur-de-logos
Une grille de références clientes, à cadre et à hauteur constants, avec une pastille de preuve chiffrée en option.
## Quand l'employer
Établir la surface d'une maison en une page. Le nombre et la constance de la grille font la preuve, pas le commentaire.
## Les entrées attendues
- `titre`
- `8 à 12 références (nom, secteur)`
- `pastille de preuve`
- `mention d'autorisation`
## Les règles
1. Toutes les cases ont la même hauteur et la même largeur. Un logo plus gros que les autres se lit comme un aveu.
2. Les noms se rangent par secteur ou par ordre alphabétique, jamais par ordre de préférence.
3. Huit références au minimum. En dessous, la grille reste vide et dessert le propos.
4. La pastille de preuve porte un chiffre vérifiable, avec sa période.
5. La mention d'autorisation figure en pied : citer un client suppose son accord.
## À ne pas lui demander
- Compléter la grille avec des prospects ou des contacts : une case vide vaut mieux qu'une case fausse.
- Mélanger des logos et du texte dans la même grille.
## 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 .logo{border:var(--brand-line) solid var(--brand-rule);border-radius:var(--brand-radius);
display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:16px 12px;min-height:92px;gap:7px}
.c .logo b{font-family:var(--brand-display);font-size:16px;font-weight:600;letter-spacing:-.01em}
.c .logo span{font-size:11px;color:var(--brand-ink-2);letter-spacing:.06em;text-transform:uppercase}
</style>
<div class="c">
<div style="display:flex;align-items:flex-end;justify-content:space-between;gap:36px">
<h2 class="t-menu" style="max-width:22ch">{{titre}}</h2>
<div style="background:var(--brand-accent-soft);border-radius:var(--brand-radius);padding:16px 22px;text-align:right">
<p style="margin:0;font-family:var(--brand-display);font-size:32px;line-height:1;font-weight:600;color:var(--brand-accent)">{{preuve_val}}</p>
<p style="margin:7px 0 0;font-size:12.5px;color:var(--brand-ink-2);max-width:22ch">{{preuve_lec}}</p>
</div>
</div>
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:36px;flex:1;align-content:center">
{{#references}}
<div class="logo"><b>{{nom}}</b><span>{{secteur}}</span></div>
{{/references}}
</div>
<div class="foot"><span>{{mention}}</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-logos Une grille de références clientes, à cadre et à hauteur constants, avec une pastille de preuve chiffrée en option. ## Quand l'employer Établir la surface d'une maison en une page. Le nombre et la constance de la grille font la preuve, pas le commentaire. ## Les entrées attendues - `titre` - `8 à 12 références (nom, secteur)` - `pastille de preuve` - `mention d'autorisation` ## Les règles 1. Toutes les cases ont la même hauteur et la même largeur. Un logo plus gros que les autres se lit comme un aveu. 2. Les noms se rangent par secteur ou par ordre alphabétique, jamais par ordre de préférence. 3. Huit références au minimum. En dessous, la grille reste vide et dessert le propos. 4. La pastille de preuve porte un chiffre vérifiable, avec sa période. 5. La mention d'autorisation figure en pied : citer un client suppose son accord. ## À ne pas lui demander - Compléter la grille avec des prospects ou des contacts : une case vide vaut mieux qu'une case fausse. - Mélanger des logos et du texte dans la même grille. ## 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
6 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.
Cartes clients, logo puis preuve courte
Trois cartes identiques alignent chacune un logo, trois lignes de fait vérifiable et un lien de lecture, sans adjectif ni promesse. La preuve tient parce qu'elle nomme le client et l'usage précis, pas parce qu'elle affirme un bénéfice.
Mur de logos à pastilles chiffrées
Une trentaine de logos clients en grille sobre, dont quelques-uns portent une pastille turquoise en surimpression avec leur nombre de points de vente ou leur revenu annuel. La preuve sociale devient preuve chiffrée sans réclamer une slide de plus.
Planche de captures d'écran brutes
Les preuves gardent leur chrome de fenêtre, barre de titre, boutons, date de l'article, et se chevauchent en collage avec des découpes détourées. Rien n'est reformaté, ce qui signale que le rapport observe un terrain au lieu de l'illustrer.
Mur de preuves tierces en cartes
Quatre cartes réunissent des preuves de nature différente, un quadrant d'analyste, une citation, un classement, chacune avec sa source dans une pastille posée sous le texte. La slide n'affirme rien en son nom propre, elle rassemble ce que d'autres ont écrit.
Preuve par captures d'écran de plateforme
Trois captures de TikTok et de presse sont posées en collage à des tailles différentes, avec un commentaire court en machine à écrire et une légende qui donne le volume de vues. La capture brute prouve que le phénomène existe hors du deck, là où un graphique demanderait de croire l'auteur sur parole.
Mur de logos en carte
Huit logos sont rangés par paires dans une carte claire, chacun suivi de son nom sur deux ou trois lignes, sous un titre souligné d'un filet. Les logos gardent leurs couleurs propres sans casser la page, parce que la carte les isole du fond.
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é.