Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Oppose deux options ligne à ligne sur les mêmes critères. La colonne retenue prend l'accent, jamais une couleur de validation.
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 @comparatif-deux-colonnes
# @comparatif-deux-colonnes
Oppose deux options ligne à ligne sur les mêmes critères. La colonne retenue prend l'accent, jamais une couleur de validation.
## Quand l'employer
Opposer deux options sur des critères identiques.
## Les entrées attendues
- `titre`
- `2 × (libellé de colonne)`
- `critères`
- `recommandation`
## Les règles
1. Les deux colonnes portent exactement les mêmes critères, dans le même ordre.
2. La colonne recommandée prend la teinte d'accent adoucie en fond, sur toute sa hauteur.
3. Chaque cellule dit un fait, jamais un jugement.
## À ne pas lui demander
- Employer une couleur de validation ou de rejet, coche verte ou croix rouge.
- Comparer trois options : au-delà de deux colonnes, le tableau de comparables convient mieux.
- Laisser une cellule vide : un critère sans réponse se dit, il ne se tait pas.
## 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">
<h2 class="t-menu">{{titre}}</h2>
<div style="margin-top:44px;flex:1">
<div style="display:grid;grid-template-columns:230px 1fr 1fr;gap:0">
<div></div>
{{#colonnes}}
<div style="padding:14px 22px;background:{{bg}};color:{{fg}};border-radius:var(--brand-radius) var(--brand-radius) 0 0;
text-align:center">
<p style="margin:0;font-size:17px;font-weight:600">{{lib}}</p>
<p style="margin:3px 0 0;font-size:12.5px;opacity:.78">{{sous}}</p>
</div>
{{/colonnes}}
</div>
{{#lignes}}
<div style="display:grid;grid-template-columns:230px 1fr 1fr;border-bottom:var(--brand-line) solid var(--brand-rule)">
<div style="padding:15px 0;font-size:13.5px;color:var(--brand-ink-2)">{{critere}}</div>
<div style="padding:15px 22px;font-size:14.5px;text-align:center">{{a}}</div>
<div style="padding:15px 22px;font-size:14.5px;text-align:center;background:var(--brand-accent-soft)">{{b}}</div>
</div>
{{/lignes}}
</div>
<div class="foot"><span>{{note}}</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.
# @comparatif-deux-colonnes Oppose deux options ligne à ligne sur les mêmes critères. La colonne retenue prend l'accent, jamais une couleur de validation. ## Quand l'employer Opposer deux options sur des critères identiques. ## Les entrées attendues - `titre` - `2 × (libellé de colonne)` - `critères` - `recommandation` ## Les règles 1. Les deux colonnes portent exactement les mêmes critères, dans le même ordre. 2. La colonne recommandée prend la teinte d'accent adoucie en fond, sur toute sa hauteur. 3. Chaque cellule dit un fait, jamais un jugement. ## À ne pas lui demander - Employer une couleur de validation ou de rejet, coche verte ou croix rouge. - Comparer trois options : au-delà de deux colonnes, le tableau de comparables convient mieux. - Laisser une cellule vide : un critère sans réponse se dit, il ne se tait pas. ## 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 · Preuve
Relevé dans 13 documents · Lefty, Ace & Tate
Quatre indicateurs avec libellé, valeur et phrase de lecture.
type: chiffres clés · charte: héritée
Relevé dans 16 documents · GHARAGE GmbH & Co. KG, Artsy
Un graphique en barres et la lecture qui l'accompagne, côte à côte. Le titre porte la conclusion, la figure la démontre.
type: graphique · charte: héritée
Relevé dans 6 documents · BB Agency, Riot Games
Tableau à lignes alternées avec une ligne de médiane et une ligne mise en avant.
type: tableau · charte: héritée
Vu dans des présentations réelles
9 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.
Deux colonnes comparées sur les mêmes étapes
Les deux colonnes portent les mêmes intitulés d'étapes, Source puis Acquire puis Preserve, l'une en gris et l'autre en couleur de marque. Aligner la comparaison sur des étiquettes identiques force la différence à se voir dans le contenu et interdit de gagner par la mise en forme.
Diptyque aligné sans cadre ni filet
Deux pages en vis-à-vis posent chacune un titre en haut et une phrase courte à mi-hauteur, exactement à la même hauteur de part et d'autre du fond de cahier. L'alignement fait à lui seul le travail de comparaison, sans encadré, sans filet et sans colonne dessinée.
Colonne interdite face à colonne autorisée
Le verdict est répété trois fois dans chaque colonne, par une pastille de couleur en tête, un badge sur chaque vignette et le mot Don't ou Do posé avant la liste. Cette redondance rend la page juste même lue de travers ou imprimée en noir et blanc.
Le même logo, clair et sombre
La moitié gauche pose le logo sur blanc avec sa grille de marges visible, la moitié droite le reprend sur noir au même endroit du même quadrillage. La règle d'espacement et le comportement sur fond sombre se démontrent en une image au lieu de deux pages.
Deux images créditées qui s'opposent
Le comparatif ne passe pas par du texte mais par deux photos de même format, chacune sous son sigle, avec une légende qui décrit le comportement et le crédit de la source entre crochets. Créditer chaque image rend la planche citable et évite qu'elle passe pour une illustration décorative.
Atouts, limites et prix alignés
Trois colonnes présentent les fonctions, puis les inconvénients nommés un par un, puis le prix en une seule ligne. Nommer soi-même les limites désarme l'objection, et le grand blanc laissé sous la ligne tarifaire la rend plus crédible que si elle avait été habillée pour remplir la colonne.
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é.