Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
La palette en surfaces proportionnelles à leur usage réel, chaque référence écrite dans la couleur elle-même.
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 @nuancier
# @nuancier
La palette en surfaces proportionnelles à leur usage réel, chaque référence écrite dans la couleur elle-même.
## Quand l'employer
Fixer la palette d'une marque et l'emploi de chaque couleur. La surface de chaque bande dit la fréquence attendue, ce qu'une grille de pastilles égales ne dit jamais.
## Les entrées attendues
- `titre`
- `5 ou 6 couleurs (nom, hex, part d'usage, emploi)`
- `note de contraste`
## Les règles
1. La largeur de chaque bande vaut la part d'usage réelle de la couleur. Un accent qui occupe le quart de la page sera employé au quart de la page.
2. La référence hexadécimale est écrite dans la bande, à l'encre qui tient dessus.
3. L'emploi est nommé sous la bande : à quoi sert cette couleur, et à quoi elle ne sert pas.
4. Six couleurs au maximum. Une palette de douze n'est pas une palette, c'est un stock.
5. La note de contraste donne les rapports vérifiés, pas une promesse d'accessibilité.
## À ne pas lui demander
- Montrer des nuances dérivées (10 %, 20 %, 30 %) qui n'ont pas d'emploi défini.
- Ranger les couleurs par teinte plutôt que par usage : le nuancier sert à décider, pas à contempler.
## 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 .bande{border-radius:var(--brand-radius) var(--brand-radius) 0 0;height:214px;
display:flex;align-items:flex-end;padding:18px 18px 16px}
.c .bande p{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.04em}
.c .sous{padding:14px 2px 0}
.c .sous b{display:block;font-family:var(--brand-display);font-size:15px;font-weight:600}
.c .sous span{display:block;font-size:12.5px;line-height:1.4;color:var(--brand-ink-2);margin-top:6px}
.c .sous em{display:block;font-style:normal;font-size:11px;color:var(--brand-ink-2);margin-top:8px;
letter-spacing:.08em;text-transform:uppercase}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<div style="display:flex;gap:12px;margin-top:34px;flex:1;align-items:flex-start">
{{#couleurs}}
<div style="flex:{{part}}">
<div class="bande" style="background:{{fond}};border:var(--brand-line) solid var(--brand-rule)">
<p style="color:{{encre}}">{{hex}}</p>
</div>
<div class="sous">
<b>{{nom}}</b>
<span>{{emploi}}</span>
<em>{{pourcent}} de la surface</em>
</div>
</div>
{{/couleurs}}
</div>
<div class="foot"><span>{{contraste}}</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.
# @nuancier La palette en surfaces proportionnelles à leur usage réel, chaque référence écrite dans la couleur elle-même. ## Quand l'employer Fixer la palette d'une marque et l'emploi de chaque couleur. La surface de chaque bande dit la fréquence attendue, ce qu'une grille de pastilles égales ne dit jamais. ## Les entrées attendues - `titre` - `5 ou 6 couleurs (nom, hex, part d'usage, emploi)` - `note de contraste` ## Les règles 1. La largeur de chaque bande vaut la part d'usage réelle de la couleur. Un accent qui occupe le quart de la page sera employé au quart de la page. 2. La référence hexadécimale est écrite dans la bande, à l'encre qui tient dessus. 3. L'emploi est nommé sous la bande : à quoi sert cette couleur, et à quoi elle ne sert pas. 4. Six couleurs au maximum. Une palette de douze n'est pas une palette, c'est un stock. 5. La note de contraste donne les rapports vérifiés, pas une promesse d'accessibilité. ## À ne pas lui demander - Montrer des nuances dérivées (10 %, 20 %, 30 %) qui n'ont pas d'emploi défini. - Ranger les couleurs par teinte plutôt que par usage : le nuancier sert à décider, pas à contempler. ## 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 · Charte
Relevé dans 16 documents · Air, Boardmasters
La règle énoncée dans une colonne étroite, ses applications réelles en regard. L'appariement se voit sans légende.
type: règle · charte: héritée
Relevé dans 4 documents · Formula 1, FWB
Une rangée de cas marqués corrects ou fautifs, avec la raison écrite sous chaque vignette.
type: règle · charte: héritée
Relevé dans 4 documents · BrandCrew, Boardmasters
Chaque style composé dans sa propre police et sa propre graisse, en regard de sa spécification technique.
type: charte · charte: héritée
Vu dans des présentations réelles
3 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.
Colonnes pleine hauteur autolégendées
Chaque couleur occupe une colonne du haut au bas du cadre et porte ses références écrites à l'intérieur, si bien que la bande démontre sa propre lisibilité en même temps qu'elle la documente. Le principe sert à comparer cinq options quelconques dès que chacune doit prouver quelque chose sur elle-même.
Un camembert de palette par exemple
À côté de chaque capture, un petit disque donne les proportions exactes des couleurs employées. La légende devient une mesure, et deux exemples se comparent sur une donnée au lieu d'une impression.
Nuancier où la surface hiérarchise
Les deux couleurs principales occupent chacune un quart de la page, les cinq secondaires se partagent la bande du bas, et les références sont calées en pied de chaque aplat. La surface dit le rôle de chaque couleur avant même que la légende ne le précise.
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é.