Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Une citation posée à côté du portrait de la personne citée. Le nom reste en texte courant, jamais 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-sur-image
# @citation-sur-image
Une citation posée à côté du portrait de la personne citée. Le nom reste en texte courant, jamais en capitales interlettrées.
## Quand l'employer
Porter une citation quand la personne citée a un portrait exploitable.
## Les entrées attendues
- `image`
- `citation`
- `nom`
- `fonction`
## Les règles
1. Le portrait prend le traitement d'image de la charte, comme toute autre photographie.
2. La citation reste sur le fond de repos, jamais sur le portrait.
3. Le nom reste en texte courant. Une ligne de crédit n'est pas une étiquette de rubrique.
4. Vingt-cinq mots au maximum.
## À ne pas lui demander
- Poser la citation sur le portrait.
- Mettre le nom en capitales interlettrées.
- Employer un portrait de banque d'images pour une personne réelle.
## 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:.85;position:relative;overflow:hidden">
<img class="img" src="{{image}}" alt="">
<div class="teinte"></div>
</div>
<div style="flex:1.15;padding:80px 76px;display:flex;flex-direction:column;justify-content:center;
background:var(--brand-wash)">
<p style="font-family:var(--brand-display);font-size:34px;line-height:1.3;letter-spacing:-.012em;
margin:0;font-weight:600">{{citation}}</p>
<div style="margin-top:34px;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>
</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-sur-image Une citation posée à côté du portrait de la personne citée. Le nom reste en texte courant, jamais en capitales interlettrées. ## Quand l'employer Porter une citation quand la personne citée a un portrait exploitable. ## Les entrées attendues - `image` - `citation` - `nom` - `fonction` ## Les règles 1. Le portrait prend le traitement d'image de la charte, comme toute autre photographie. 2. La citation reste sur le fond de repos, jamais sur le portrait. 3. Le nom reste en texte courant. Une ligne de crédit n'est pas une étiquette de rubrique. 4. Vingt-cinq mots au maximum. ## À ne pas lui demander - Poser la citation sur le portrait. - Mettre le nom en capitales interlettrées. - Employer un portrait de banque d'images pour une personne réelle. ## 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
6 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 capitales sur photo assombrie
La citation occupe la moitié haute en capitales blanches sur une photo assombrie, tandis que l'auteur et sa fonction sont relégués en petit corps en bas à droite. Le déséquilibre est volontaire, parce que la phrase doit se lire de loin alors que l'attribution ne sert qu'au lecteur qui veut vérifier.
Citation en serif face à l'image
La citation passe en caractère à empattements alors que tout le rapport est en linéale, et la photo occupe la moitié gauche jusqu'aux bords de la page. Le changement de caractère suffit à signaler que la parole vient de l'extérieur, sans encadré ni guillemets géants.
Citation surlignée collée sur le portrait
La phrase à retenir de l'entretien sort du texte, passe en machine à écrire sur un rectangle vert fluo et chevauche le portrait de quelques degrés. Le lecteur pressé emporte la citation, le lecteur attentif trouve l'entretien complet en colonne.
Citation de terrain ancrée en bas
La citation d'un répondant se pose en bas à gauche de la photo pleine page, jamais au centre, et sa signature se réduit au sexe, à l'âge et au pays. L'ancrage bas laisse le sujet de l'image respirer, et l'anonymat démographique donne à la phrase le statut de donnée plutôt que de témoignage isolé.
Même trame sur toutes les photos
Chaque photo du rapport passe sous la même trame de points grossière, quelle que soit sa provenance. Le filtre commun transforme des captures d'origines très diverses en une série cohérente, et laisse assez de contraste pour poser une citation en plein milieu.
Citation en gras sur photo pleine page
La citation se pose en haut à gauche de l'image, en gras condensé blanc, sur la zone la plus calme du cadre, et le crédit photo reste minuscule en pied. Le texte est assez large pour se lire comme un titre et laisse malgré tout la photo respirer.
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é.
