Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Positionne des éléments sur deux axes, avec quadrants nommés et légende de lecture.
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 @matrice-2x2
# @matrice-2x2
Positionne des éléments sur deux axes, avec quadrants nommés et légende de lecture.
## Quand l'employer
Positionner cinq à douze éléments sur deux axes de qualification.
## Les entrées attendues
- `titre`
- `axe X`
- `axe Y`
- `points`
- `quadrants`
## Les règles
1. Les deux axes portent leur libellé en capitales interlettrées, registre réservé aux étiquettes d'axe.
2. Les points se colorent par catégorie de lecture, trois catégories au maximum.
3. La légende explique la couleur, elle ne liste pas les points.
## À ne pas lui demander
- Nommer les quadrants et colorer les points : l'un des deux suffit.
- Dépasser douze points : au-delà, la matrice devient illisible et appelle un tableau.
## 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:46px;display:flex;gap:40px;flex:1">
<div style="position:relative;flex:1;border-left:var(--brand-line) solid var(--brand-ink);
border-bottom:var(--brand-line) solid var(--brand-ink)">
<div style="position:absolute;inset:0">
<div style="position:absolute;left:50%;top:0;bottom:0;width:var(--brand-line);background:var(--brand-rule)"></div>
<div style="position:absolute;top:50%;left:0;right:0;height:var(--brand-line);background:var(--brand-rule)"></div>
{{#points}}
<div style="position:absolute;left:{{x}}%;top:{{y}}%;transform:translate(-50%,-50%);
display:flex;align-items:center;gap:8px">
<span style="width:11px;height:11px;border-radius:50%;background:{{c}}"></span>
<span style="font-size:13px;white-space:nowrap">{{lib}}</span>
</div>
{{/points}}
</div>
<p style="position:absolute;bottom:-30px;right:0;font-size:11px;letter-spacing:.12em;
text-transform:uppercase;color:var(--brand-ink-2);margin:0">{{axeX}}</p>
<p style="position:absolute;top:0;left:-30px;transform:rotate(-90deg) translateX(-100%);
transform-origin:top left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--brand-ink-2);margin:0">{{axeY}}</p>
</div>
<div style="width:230px;padding-top:6px">
<p style="font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2);margin:0 0 16px">Lecture</p>
{{#legende}}
<div style="display:flex;gap:10px;margin-bottom:13px;align-items:flex-start">
<span style="width:9px;height:9px;border-radius:50%;background:{{c}};margin-top:6px;flex:none"></span>
<span style="font-size:13px;color:var(--brand-ink-2);line-height:1.4">{{lib}}</span>
</div>
{{/legende}}
</div>
</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.
# @matrice-2x2 Positionne des éléments sur deux axes, avec quadrants nommés et légende de lecture. ## Quand l'employer Positionner cinq à douze éléments sur deux axes de qualification. ## Les entrées attendues - `titre` - `axe X` - `axe Y` - `points` - `quadrants` ## Les règles 1. Les deux axes portent leur libellé en capitales interlettrées, registre réservé aux étiquettes d'axe. 2. Les points se colorent par catégorie de lecture, trois catégories au maximum. 3. La légende explique la couleur, elle ne liste pas les points. ## À ne pas lui demander - Nommer les quadrants et colorer les points : l'un des deux suffit. - Dépasser douze points : au-delà, la matrice devient illisible et appelle un tableau. ## 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 · Analyse
Quatre quadrants, forces et faiblesses en haut, opportunités et menaces en bas. Les quadrants internes prennent l'accent, les externes le neutre.
type: swot · charte: héritée
Quatre à six étages décroissants, avec volume, taux de passage et lecture. La largeur de chaque étage est proportionnelle à son volume.
type: entonnoir · charte: héritée
Relevé dans 1 document · Combo
Une hiérarchie du général au particulier, chaque niveau accompagné de sa légende à droite.
type: pyramide · charte: héritée
Vu dans des présentations réelles
2 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.
Axe de tension entre deux mots
Deux mots opposés, Longevity et Hype, posés en diagonale et reliés par une flèche à double pointe. La tension du chapitre se lit en deux secondes, avant le paragraphe qui l'explique. Un titre affirmatif aurait fermé la question que la page veut garder ouverte.
Cartographie de marques en bulles
Des logos réels posés librement dans des bulles au trait qui se chevauchent, chaque bulle étiquetée par un usage. Le chevauchement dit ce qu'un tableau ne sait pas dire, à savoir qu'une même marque appartient à deux catégories à la fois.
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é.