Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
La première slide : titre du document, sous-titre, émetteur et date.
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 @couverture
# @couverture
La première slide : titre du document, sous-titre, émetteur et date.
## Quand l'employer
Ouvrir un document.
## Les entrées attendues
- `titre`
- `sous-titre`
- `émetteur`
- `date`
## Les règles
1. Le titre énonce le sujet du document, pas une accroche.
2. Le sous-titre complète le titre, il ne le répète jamais.
3. Le filet d'accent mesure 96 px et ne change pas de longueur selon le titre.
## À ne pas lui demander
- Ajouter un logo : le composant n'en prévoit pas d'emplacement, la charte le pose ailleurs.
- Mettre le titre en capitales : le corps de 68 px suffit à la hiérarchie.
- Dépasser deux lignes de titre.
## 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">
<p class="kicker">{{kicker}}</p>
<h2 style="font-size:68px;max-width:18ch">{{titre}}</h2>
<p class="sub" style="font-size:22px;margin-top:22px">{{sous_titre}}</p>
<div style="height:var(--brand-line);background:var(--brand-accent);width:96px;margin-top:40px"></div>
<div class="foot"><span>{{emetteur}}</span><span>{{date}}</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.
# @couverture La première slide : titre du document, sous-titre, émetteur et date. ## Quand l'employer Ouvrir un document. ## Les entrées attendues - `titre` - `sous-titre` - `émetteur` - `date` ## Les règles 1. Le titre énonce le sujet du document, pas une accroche. 2. Le sous-titre complète le titre, il ne le répète jamais. 3. Le filet d'accent mesure 96 px et ne change pas de longueur selon le titre. ## À ne pas lui demander - Ajouter un logo : le composant n'en prévoit pas d'emplacement, la charte le pose ailleurs. - Mettre le titre en capitales : le corps de 68 px suffit à la hiérarchie. - Dépasser deux lignes de titre. ## 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 · Structure
Relevé dans 27 documents · Air, BrandCrew
Sépare deux parties : numéro de partie, titre, et rappel du plan.
type: intercalaire · charte: héritée
Relevé dans 14 documents · Accenture, Artsy
Le plan du document, avec la partie courante marquée et le nombre de slides par partie.
type: sommaire · charte: héritée
Vu dans des présentations réelles
7 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.
Couverture en pavé typographique justifié
Le titre remplit toute la largeur en pavé justifié, les mots ordinaires en capitales romaines et les mots porteurs en italique script. Le contraste de casse et de style hiérarchise la phrase sans changer de taille, et la couverture gagne la densité d'une affiche.
Le mot pivot en serif italique
Le titre est en grotesque capitale noire, sauf le mot qui porte l'idée, passé en serif italique vert. Un seul mot change de police et de couleur, donc le regard se pose exactement là où l'auteur le veut.
Couverture qui porte son sommaire
Les trois parties apparaissent dès la couverture en pastilles de couleur, séparées par leur renvoi de page, entre le titre et l'image pleine largeur. Le lecteur connaît le plan avant la première slide, et la page de sommaire devient inutile.
Logotype rogné par les bords
Le sigle déborde à gauche et à droite du cadre, ce qui donne une échelle d'affiche plutôt que de diapositive. Le pied de page reprend en petit le type de document, sa version et sa date de révision, donc la couverture reste identifiable quand elle circule seule.
Couverture à bandes, jauge de trimestre
La couverture s'empile en quatre bandes séparées par des filets, période, marque et année, titre, puis quatre pastilles dont seule la quatrième est pleine. La même couverture sert les quatre publications de l'année et situe le lecteur dans la série sans une ligne de texte supplémentaire.
Couverture au mot d'ordre plein cadre
Le mot d'ordre occupe toute la surface en capitales condensées et déborde presque du cadre, tandis que le titre réel du document tient en deux lignes discrètes dans l'angle opposé. La couverture vend une idée avant de nommer un rapport, et la mention d'édition en pied assume par écrit que le document bougera encore.
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é.