Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Une citation en grand corps, avec son auteur en texte courant. Jamais de nom en capitales interlettrées.
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 @citation-client
# @citation-client
Une citation en grand corps, avec son auteur en texte courant. Jamais de nom en capitales interlettrées.
## Quand l'employer
Porter une phrase prononcée par une personne nommée.
## Les entrées attendues
- `citation`
- `nom`
- `fonction`
## Les règles
1. La citation tient en vingt-cinq mots au maximum.
2. Le nom reste en texte courant, en graisse moyenne. Une ligne de crédit n'est pas une étiquette de rubrique.
3. La fonction suit le nom sur une seconde ligne, en encre secondaire.
## À ne pas lui demander
- Mettre le nom en capitales interlettrées : le nom devient illisible, lettre à lettre.
- Ajouter des guillemets décoratifs en gros corps.
- Citer sans nommer la personne.
## 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" style="justify-content:center;background:var(--brand-wash)">
<p style="font-family:var(--brand-display);font-size:40px;line-height:1.25;letter-spacing:-.015em;
margin:0;max-width:24ch;font-weight:600">{{citation}}</p>
<div style="margin-top:38px;display:flex;align-items:center;gap:14px">
<div style="width:38px;height:var(--brand-line);background:var(--brand-accent)"></div>
<div>
<p style="margin:0;font-size:16px;font-weight:600">{{nom}}</p>
<p style="margin:2px 0 0;font-size:14px;color:var(--brand-ink-2)">{{fonction}}</p>
</div>
</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.
# @citation-client Une citation en grand corps, avec son auteur en texte courant. Jamais de nom en capitales interlettrées. ## Quand l'employer Porter une phrase prononcée par une personne nommée. ## Les entrées attendues - `citation` - `nom` - `fonction` ## Les règles 1. La citation tient en vingt-cinq mots au maximum. 2. Le nom reste en texte courant, en graisse moyenne. Une ligne de crédit n'est pas une étiquette de rubrique. 3. La fonction suit le nom sur une seconde ligne, en encre secondaire. ## À ne pas lui demander - Mettre le nom en capitales interlettrées : le nom devient illisible, lettre à lettre. - Ajouter des guillemets décoratifs en gros corps. - Citer sans nommer la personne. ## 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 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
Relevé dans 2 documents · Figma, NIKE
Quatre à six personnes avec nom, fonction et une ligne de contexte. Le nom reste en texte courant.
type: équipe · charte: héritée
Vu dans des présentations réelles
12 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.
Citation en couleur, troisième colonne
La citation occupe la troisième colonne, composée en couleur de marque et à la taille du titre. Elle sert de respiration entre deux blocs de texte, et l'attribution en gras juste dessous évite de chercher qui parle.
Question de l'usager parmi les specs
Une phrase que l'utilisateur prononcerait vraiment, « Siri, how much did I sleep last night ? », est composée en couleur au milieu des caractéristiques techniques. Elle rompt la monotonie de la liste et montre un usage là où les tuiles voisines ne montrent qu'une capacité.
Citation en pleine page saturée
La citation occupe tout le format, composée en condensé serré dans une ellipse noire, les mots porteurs soulignés et l'attribution reléguée en petit dans un coin incliné. Une voix extérieure obtient alors le même poids visuel qu'un chiffre.
La photo déborde sur la citation
Un gros serif porte la citation sur fond blanc, et le portrait vient mordre ses dernières lignes avant de sortir par le bord droit. Le recouvrement lie l'auteur à ses mots bien mieux qu'une photo sagement rangée à côté, et le procédé revient trois fois dans le document, ce qui en fait un système et pas un accident.
Citation signée par une pastille photo
La citation vit dans la colonne de texte, passée en gras, suivie d'un portrait rond haut d'une ligne et du nom. L'expert est identifié sans qu'une slide entière lui soit consacrée.
Témoignage à gauche, démonstration à droite
La colonne de gauche porte la voix du client avec le portrait, la citation en grand corps et la signature en monospace, pendant que les deux colonnes de droite déroulent les faits et les résultats. Séparer l'émotion et la preuve évite le mélange qui affaiblit les deux.
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é.