Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Une photographie sur une moitié, le propos sur l'autre. La coupe se fait toujours au même endroit dans un même document.
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 @image-et-texte
# @image-et-texte
Une photographie sur une moitié, le propos sur l'autre. La coupe se fait toujours au même endroit dans un même document.
## Quand l'employer
Appuyer un propos par un visuel, sans le noyer.
## Les entrées attendues
- `image`
- `côté de l'image`
- `titre`
- `paragraphe`
- `points`
## Les règles
1. La coupe se fait au même endroit dans tout un document, à gauche ou à droite, jamais en alternance décorative.
2. Le texte reste sur le fond de charte, jamais sur l'image. La lisibilité ne dépend alors d'aucune photographie.
3. Trois points au maximum sous le paragraphe.
## À ne pas lui demander
- Alterner le côté de l'image d'une slide à l'autre pour « donner du rythme ».
- Employer une image d'illustration générique : si l'image n'ajoute rien, la retirer et employer une mise en page sans image.
## 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;flex-direction:row">
<div style="flex:1;position:relative;overflow:hidden">
<img class="img" src="{{image}}" alt="">
<div class="teinte"></div>
</div>
<div style="flex:1;padding:72px 76px;display:flex;flex-direction:column;justify-content:center">
<p class="kicker">{{kicker}}</p>
<h2 style="font-size:40px;max-width:20ch">{{titre}}</h2>
<p style="font-size:17px;line-height:1.55;color:var(--brand-ink-2);margin:22px 0 0">{{para}}</p>
<ul style="margin:26px 0 0;padding-left:18px">
{{#points}}<li style="font-size:15.5px;line-height:1.5;margin-bottom:9px">{{.}}</li>{{/points}}
</ul>
</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.
# @image-et-texte Une photographie sur une moitié, le propos sur l'autre. La coupe se fait toujours au même endroit dans un même document. ## Quand l'employer Appuyer un propos par un visuel, sans le noyer. ## Les entrées attendues - `image` - `côté de l'image` - `titre` - `paragraphe` - `points` ## Les règles 1. La coupe se fait au même endroit dans tout un document, à gauche ou à droite, jamais en alternance décorative. 2. Le texte reste sur le fond de charte, jamais sur l'image. La lisibilité ne dépend alors d'aucune photographie. 3. Trois points au maximum sous le paragraphe. ## À ne pas lui demander - Alterner le côté de l'image d'une slide à l'autre pour « donner du rythme ». - Employer une image d'illustration générique : si l'image n'ajoute rien, la retirer et employer une mise en page sans image. ## 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 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
Relevé dans 6 documents · DEPT®, Design Hotels AG
Une citation posée à côté du portrait de la personne citée. Le nom reste en texte courant, jamais en capitales interlettrées.
type: citation · charte: héritée
Vu dans des présentations réelles
20 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.
Illustration pleine hauteur, texte en colonne
L'illustration occupe toute la hauteur à droite et déborde du cadre, le texte tient dans une colonne étroite à gauche. Le déséquilibre assumé laisse respirer un texte long au lieu de le tasser sur une demi-page.
Diagonale entre photo et aplat
La coupe entre la photographie et l'aplat de couleur est une diagonale, jamais une verticale. La page garde du mouvement et la phrase posée sur l'aplat se lit nettement, sans cadre ni fond ajouté sous le texte.
Fiche de tendance au gabarit identique
Chaque tendance reçoit exactement la même page, avec un titre géant, une phrase de conclusion en capitales, deux colonnes de texte à gauche et le visuel à droite. Le lecteur apprend la grille une fois et traverse ensuite les douze tendances sans jamais chercher où poser les yeux.
Titre géant qui recouvre l'image
Le titre descend jusqu'au niveau de l'image et sa dernière ligne passe devant elle. Le chevauchement soude les deux blocs en une composition unique au lieu de les poser côte à côte.
Panneau de démonstration à géométrie fixe
Chaque page d'explication reprend le même dispositif, avec une colonne de texte étroite à gauche et un grand panneau arrondi clair à droite, toujours aux mêmes coordonnées. L'œil apprend un seul trajet et le tient sur cent pages, puisque seul le contenu du panneau change.
Écran partagé, texte clair, produit sombre
La moitié gauche bascule en fond clair pour porter l'argument, la moitié droite reste sombre et sert d'écrin à la capture produit. Le contraste des deux fonds sépare la démonstration de la preuve sans aucun cadre ni bordure.
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é.
