Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Questions et réponses en colonnes, le registre de la question tenu distinct de celui de la réponse.
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 @faq
# @faq
Questions et réponses en colonnes, le registre de la question tenu distinct de celui de la réponse.
## Quand l'employer
Désamorcer les objections d'un comité avant qu'elles ne soient posées. Écrire la question telle qu'elle se pose vaut mieux que la reformuler poliment.
## Les entrées attendues
- `titre`
- `4 à 6 questions (question, réponse)`
- `renvoi`
## Les règles
1. La question est écrite comme elle se pose, avec ses mots. « Combien ça coûte » et non « Quel est le modèle tarifaire ».
2. La question et la réponse ne partagent pas le même style. Le changement de registre porte la lecture.
3. La réponse répond dès la première phrase. Le contexte vient après, ou pas du tout.
4. Les questions gênantes passent en premier. Reléguer une objection en bas de page l'aggrave.
5. Six questions au maximum sur une page. Au-delà, la page devient un document annexe.
## À ne pas lui demander
- Poser une question que personne ne pose, pour placer un argument.
- Répondre par un renvoi seul : la page doit rester lisible sans le document cité.
## 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 .qr{padding:17px 0;border-bottom:var(--brand-line) solid var(--brand-rule)}
.c .qr p.q{margin:0;font-family:var(--brand-display);font-size:17px;line-height:1.28;font-weight:600;
letter-spacing:-.014em}
.c .qr p.r{margin:9px 0 0;font-size:14px;line-height:1.5;color:var(--brand-ink-2)}
</style>
<div class="c">
<div style="display:grid;grid-template-columns:270px minmax(0,1fr);gap:56px;flex:1">
<div style="display:flex;flex-direction:column;justify-content:center">
<p class="kicker">{{kicker}}</p>
<h2 class="t-menu" style="font-size:30px">{{titre}}</h2>
<p style="margin:20px 0 0;font-size:14px;line-height:1.5;color:var(--brand-ink-2)">{{renvoi}}</p>
</div>
<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:0 40px;align-content:center">
{{#questions}}
<div class="qr"><p class="q">{{q}}</p><p class="r">{{r}}</p></div>
{{/questions}}
</div>
</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.
# @faq Questions et réponses en colonnes, le registre de la question tenu distinct de celui de la réponse. ## Quand l'employer Désamorcer les objections d'un comité avant qu'elles ne soient posées. Écrire la question telle qu'elle se pose vaut mieux que la reformuler poliment. ## Les entrées attendues - `titre` - `4 à 6 questions (question, réponse)` - `renvoi` ## Les règles 1. La question est écrite comme elle se pose, avec ses mots. « Combien ça coûte » et non « Quel est le modèle tarifaire ». 2. La question et la réponse ne partagent pas le même style. Le changement de registre porte la lecture. 3. La réponse répond dès la première phrase. Le contexte vient après, ou pas du tout. 4. Les questions gênantes passent en premier. Reléguer une objection en bas de page l'aggrave. 5. Six questions au maximum sur une page. Au-delà, la page devient un document annexe. ## À ne pas lui demander - Poser une question que personne ne pose, pour placer un argument. - Répondre par un renvoi seul : la page doit rester lisible sans le document cité. ## 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 · 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
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.
Questions fréquentes en trois colonnes
Six questions se répartissent en trois colonnes, la question en capitales espacées et la réponse en romain justifié juste dessous. Le seul changement de casse sépare la question de la réponse, donc la page se passe de puces, de cadres et de filets.
Entretien en colonne de magazine
La question est en italique, les réponses en romain avec un alinéa à chaque paragraphe, sans puce ni encadré, face à une photo qui tient toute la hauteur. Le lecteur reconnaît une parole réelle, et le témoignage tient sur une page au lieu d'être découpé en citations décoratives.
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é.