Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Le pendant photographique de l'intercalaire. Numéro et titre de partie sur une image voilée, même grille que la version sur aplat.
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 @intercalaire-image
# @intercalaire-image
Le pendant photographique de l'intercalaire. Numéro et titre de partie sur une image voilée, même grille que la version sur aplat.
## Quand l'employer
Séparer deux parties dans un document qui emploie déjà la photographie.
## Les entrées attendues
- `image`
- `numéro`
- `titre de partie`
- `annonce`
## Les règles
1. Même grille que @intercalaire-section, seul le fond change. Les deux ne se mélangent pas dans un même document.
2. Le voile est obligatoire, pour la même raison qu'en couverture.
3. Le numéro de partie prend l'accent, le titre prend `--brand-img-ink`. Cette encre-là se lit contre le voile, qui reste sombre même sur une charte sombre, alors que le papier y devient noir.
## À ne pas lui demander
- Mélanger intercalaires sur aplat et intercalaires sur image dans un même document.
- Y placer du contenu.
## Tokens de charte employés
Ce composant n'écrit aucune couleur, aucune police, aucun rayon, aucune
épaisseur de filet ni aucun traitement d'image 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`, plus les quatre tokens
d'image `--brand-img-voile`, `--brand-img-ink`, `--brand-img-filtre` et
`--brand-img-teinte`.
Ces quatre-là rendent cohérentes des photographies qui ne le sont pas au
départ. Ils se règlent une fois par marque, jamais par slide.
## 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="padding:0;justify-content:center">
<img class="img" src="{{image}}" alt="">
<div class="teinte"></div>
<div class="voile"></div>
<div style="position:relative;padding:0 88px;color:var(--brand-img-ink)">
<div style="display:flex;align-items:baseline;gap:26px">
<span style="font-family:var(--brand-display);font-size:100px;line-height:1;font-weight:600;
color:var(--brand-accent)">{{num}}</span>
<h2 style="color:var(--brand-img-ink);font-size:54px;max-width:18ch">{{titre}}</h2>
</div>
<p style="font-size:18px;margin:30px 0 0;max-width:56ch;opacity:.85;line-height:1.45">{{annonce}}</p>
</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.
# @intercalaire-image Le pendant photographique de l'intercalaire. Numéro et titre de partie sur une image voilée, même grille que la version sur aplat. ## Quand l'employer Séparer deux parties dans un document qui emploie déjà la photographie. ## Les entrées attendues - `image` - `numéro` - `titre de partie` - `annonce` ## Les règles 1. Même grille que @intercalaire-section, seul le fond change. Les deux ne se mélangent pas dans un même document. 2. Le voile est obligatoire, pour la même raison qu'en couverture. 3. Le numéro de partie prend l'accent, le titre prend `--brand-img-ink`. Cette encre-là se lit contre le voile, qui reste sombre même sur une charte sombre, alors que le papier y devient noir. ## À ne pas lui demander - Mélanger intercalaires sur aplat et intercalaires sur image dans un même document. - Y placer du contenu. ## Tokens de charte employés Ce composant n'écrit aucune couleur, aucune police, aucun rayon, aucune épaisseur de filet ni aucun traitement d'image 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`, plus les quatre tokens d'image `--brand-img-voile`, `--brand-img-ink`, `--brand-img-filtre` et `--brand-img-teinte`. Ces quatre-là rendent cohérentes des photographies qui ne le sont pas au départ. Ils se règlent une fois par marque, jamais par slide.
Même famille · Image
Relevé dans 2 documents · Nayture, Docusign
Une photographie plein cadre, un voile et une teinte de charte, le titre posé en bas à gauche. Le voile n'est pas décoratif, il garantit la lisibilité du texte.
type: couverture · charte: héritée
Relevé dans 20 documents · Ace & Tate, Arts Midwest
Une photographie sur une moitié, le propos sur l'autre. La coupe se fait toujours au même endroit dans un même document.
type: image et texte · charte: héritée
Relevé dans 7 documents · Apple Inc., DEPT®
Un seul chiffre en très grand corps, sa lecture en dessous, sa source au pied. Employé pour le chiffre qui porte toute la démonstration.
type: chiffre géant · 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.
Numéro de partie en filigrane géant
Le chiffre de la partie est posé en corps énorme et translucide, débordant du bord haut de la photo, et le titre en blanc vient par-dessus. Le numéro devient une texture au lieu d'une étiquette, donc l'intercalaire reste une image tout en restant lisible.
Intercalaire, onglet de titre encoché
Le visuel occupe toute la page, agrandi jusqu'à l'abstraction, et le titre de partie se loge dans un onglet blanc découpé dans le coin bas droit. L'image reste entière et le titre reste lisible, sans bandeau ni voile posé par-dessus.
Couverture et intercalaire, même recette
L'intercalaire reprend mot pour mot la recette de la couverture, titre blanc calé en haut à gauche et collage de formes colorées qui déborde par le bas. Le lecteur reconnaît le changement de partie sans qu'un numéro ou un bandeau ne le lui annonce.
Intercalaire découpé dans l'illustration de couverture
Chaque partie s'ouvre sur un recadrage de l'illustration de couverture, numéro et titre dans la même serif. La famille visuelle tient sur soixante pages sans qu'une seule image nouvelle soit produite.
Intercalaire au rang romain, fond atmosphérique
Le rang de la section en petites capitales espacées surmonte le titre, une vignette ornementale ferme le bloc, et le fond reste une image sombre sans sujet identifiable. La coupure entre deux parties est franche et rien ne concurrence le titre.
Intercalaire image qui porte son sommaire
L'intercalaire annonce la partie et liste dans la foulée ses sous-sections avec leur numéro de page, en petites capitales serrées dans une colonne étroite à droite. Le lecteur sait où il entre et pour combien de pages, sans qu'une slide de sommaire supplémentaire vienne casser le rythme.
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é.
