Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Une mosaïque de tuiles inégales autour d'une tuile héros. Un fait et un seul par tuile.
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 @bento
# @bento
Une mosaïque de tuiles inégales autour d'une tuile héros. Un fait et un seul par tuile.
## Quand l'employer
Poser un ensemble hétérogène qu'une grille régulière aplatirait. Un chiffre domine et quatre le soutiennent, ou un fait principal entraîne les conséquences qui le suivent.
## Les entrées attendues
- `titre`
- `tuile héros (libellé, valeur, lecture)`
- `4 tuiles secondaires (libellé, valeur)`
- `source`
## Les règles
1. Une seule tuile héros. Deux tuiles hautes se disputent le regard et la hiérarchie disparaît.
2. Un fait par tuile. La tuile ne porte pas de paragraphe, elle porte une valeur et son libellé.
3. Les gouttières restent égales partout. C'est l'inégalité des tuiles qui compose, pas celle des espaces.
4. La tuile héros porte l'aplat d'accent, les autres restent en aplat neutre.
5. Cinq tuiles au total, six au maximum. Au-delà, la mosaïque redevient une grille et perd son intérêt.
## À ne pas lui demander
- Mettre une image dans une tuile secondaire : le contraste de nature casse la lecture.
- Employer ce composant pour des données comparables, qui appellent @chiffres-cles ou @petits-multiples.
## 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 .tuile{border-radius:var(--brand-radius);padding:24px 26px;display:flex;flex-direction:column;
justify-content:space-between;background:var(--brand-wash)}
.c .tuile p{margin:0}
.c .tuile .lib{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2)}
.c .tuile .val{font-family:var(--brand-display);font-size:34px;line-height:1;font-weight:600;margin-top:18px}
.c .tuile.hero{background:var(--brand-accent-soft);grid-row:span 2}
.c .tuile.hero .val{font-size:74px;letter-spacing:-.03em}
.c .tuile.hero .lib{color:var(--brand-accent)}
.c .tuile.hero .lec{font-size:14.5px;line-height:1.45;color:var(--brand-ink-2);margin-top:16px;max-width:26ch}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<div style="display:grid;grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr));
grid-auto-rows:1fr;gap:16px;margin-top:34px;flex:1">
<div class="tuile hero">
<p class="lib">{{hero_lib}}</p>
<div>
<p class="val">{{hero_val}}</p>
<p class="lec">{{hero_lec}}</p>
</div>
</div>
{{#tuiles}}
<div class="tuile">
<p class="lib">{{lib}}</p>
<p class="val">{{val}}</p>
</div>
{{/tuiles}}
</div>
<div class="foot"><span>{{source}}</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.
# @bento Une mosaïque de tuiles inégales autour d'une tuile héros. Un fait et un seul par tuile. ## Quand l'employer Poser un ensemble hétérogène qu'une grille régulière aplatirait. Un chiffre domine et quatre le soutiennent, ou un fait principal entraîne les conséquences qui le suivent. ## Les entrées attendues - `titre` - `tuile héros (libellé, valeur, lecture)` - `4 tuiles secondaires (libellé, valeur)` - `source` ## Les règles 1. Une seule tuile héros. Deux tuiles hautes se disputent le regard et la hiérarchie disparaît. 2. Un fait par tuile. La tuile ne porte pas de paragraphe, elle porte une valeur et son libellé. 3. Les gouttières restent égales partout. C'est l'inégalité des tuiles qui compose, pas celle des espaces. 4. La tuile héros porte l'aplat d'accent, les autres restent en aplat neutre. 5. Cinq tuiles au total, six au maximum. Au-delà, la mosaïque redevient une grille et perd son intérêt. ## À ne pas lui demander - Mettre une image dans une tuile secondaire : le contraste de nature casse la lecture. - Employer ce composant pour des données comparables, qui appellent @chiffres-cles ou @petits-multiples. ## 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 · 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
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.
Mosaïque de tuiles inégales autour d'un héros
Toutes les fonctions d'un produit tiennent sur une seule page parce que chaque tuile porte un fait et un seul, pendant que la tuile centrale, deux fois plus grande, donne le nom et l'image du produit. Le lecteur entre où il veut au lieu de suivre une liste, et rien ne se perd entre deux slides.
Mot-héros gravé dans la matière
La tuile centrale ne décrit pas le matériau, elle l'écrit, et le mot Titanium est rendu dans la matière elle-même pendant que le produit traverse les lettres. Le lecteur retient la promesse du produit sans avoir lu une seule légende.
Synthèse finale en cartes numérotées
Les dix points de synthèse tiennent sur une seule page, en cartes numérotées de tailles inégales et légèrement inclinées qui pavent tout le format. La fin du document se lit d'un seul regard au lieu de dérouler dix pages de rappel.
Pavage de quatre blocs inégaux
La page se découpe en quatre pavés de tailles différentes, deux aplats de couleur et deux photos, sans aucune gouttière entre eux. La couleur porte le texte, la photo porte l'ambiance, et le déséquilibre des tailles empêche la page de ressembler à un tableau.
Mosaïque bento ancrée par une tuile-titre
Une tuile quatre fois plus grande que les autres porte le nom de la partie, et les vingt fonctionnalités qui l'entourent se lisent ensuite dans n'importe quel ordre. Le lecteur trouve son point d'entrée en une seconde, alors qu'une grille régulière de vingt cases l'obligerait à balayer ligne par ligne.
Pastille colorée qui hiérarchise la grille
Sur un fond de tuiles grises identiques, deux ou trois cases seulement reçoivent un aplat de couleur, et ce sont celles que le lecteur retiendra. La couleur sert de classement, elle ne sert pas de décoration.
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é.
