Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Trois à six étapes numérotées, avec objectif et sortie attendue.
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 @process-etapes
# @process-etapes
Trois à six étapes numérotées, avec objectif et sortie attendue.
## Quand l'employer
Décrire un enchaînement de trois à six étapes.
## Les entrées attendues
- `titre`
- `étapes (numéro, titre, sortie)`
## Les règles
1. Chaque étape porte un verbe à l'infinitif en titre, jamais un nom.
2. La ligne de sortie dit ce que l'étape produit, pas ce qu'elle fait.
3. Le filet supérieur de 2 px prend la teinte d'accent sur toutes les étapes, sans dégradé.
## À ne pas lui demander
- Numéroter à partir de zéro.
- Employer des flèches entre les étapes : la lecture de gauche à droite suffit.
## 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-fort">{{titre}}</h2>
<div style="display:grid;grid-template-columns:repeat({{n}},1fr);gap:26px;margin-top:56px">
{{#etapes}}
<div style="border-top:2px solid var(--brand-accent);padding-top:20px">
<p style="font-family:var(--brand-display);font-size:34px;margin:0;color:var(--brand-accent);font-weight:600">{{num}}</p>
<p style="font-size:18px;font-weight:600;margin:14px 0 0">{{titre}}</p>
<p style="font-size:14px;color:var(--brand-ink-2);margin:10px 0 0;line-height:1.45">{{sortie}}</p>
</div>
{{/etapes}}
</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.
# @process-etapes Trois à six étapes numérotées, avec objectif et sortie attendue. ## Quand l'employer Décrire un enchaînement de trois à six étapes. ## Les entrées attendues - `titre` - `étapes (numéro, titre, sortie)` ## Les règles 1. Chaque étape porte un verbe à l'infinitif en titre, jamais un nom. 2. La ligne de sortie dit ce que l'étape produit, pas ce qu'elle fait. 3. Le filet supérieur de 2 px prend la teinte d'accent sur toutes les étapes, sans dégradé. ## À ne pas lui demander - Numéroter à partir de zéro. - Employer des flèches entre les étapes : la lecture de gauche à droite suffit. ## 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 · Conduite
Relevé dans 1 document · lululemon athletica inc.
Une boucle fermée de trois à six temps. Employé pour un enchaînement qui recommence, jamais pour un process qui se termine.
type: cycle · charte: héritée
Relevé dans 3 documents · Arkive Inc., Future Snoops
Frise horizontale à phases, avec jalons marqués et chemin critique signalé.
type: calendrier · charte: héritée
Tâches datées sur une échelle de semaines, avec dépendances signalées et jalons marqués. Plus fin que la feuille de route, pour un chantier unique.
type: gantt · 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.
Un fil continu entre les étapes
Les cinq étapes de la méthode se décalent en haut et en bas au lieu de s'aligner, reliées par un seul trait lumineux qui entre par la gauche et se faufile de l'une à l'autre. Le décalage libère la hauteur nécessaire pour que chaque étape porte huit ou dix items, et le trait conserve l'ordre de lecture que l'alignement aurait donné.
Étapes en cartes, description hors carte
Six étapes s'alignent, chacune dans une carte qui ne porte que son rang et son intitulé, et la description descend sous la carte en texte libre. La rangée se lit d'un coup d'œil, et le détail reste disponible sans faire gonfler les cartes.
Étapes dont la teinte s'éclaircit
Les quatre étapes sont empilées en blocs de même taille, mais l'orange perd de la saturation à chaque cran. La couleur porte la progression, ce qui fait des flèches un renfort et non le seul indice du sens de lecture.
Trois aplats de couleur dégressifs
Les trois panneaux numérotés descendent jusqu'au bord bas de la page et portent la même couleur à des opacités décroissantes. La priorité se lit à la densité de l'aplat avant même que le texte soit lu.
Titre en deux-points, réponse colorée
Le titre géant se termine par deux-points dans la bande blanche du haut, la réponse arrive dans une bande de couleur pleine qui occupe le bas, sous forme de cartes blanches numérotées par une pastille noire mordant l'angle. La coupure horizontale sépare la question de sa réponse sans qu'aucun mot de liaison soit nécessaire.
Constats numérotés en escalier
Trois blocs numérotés descendent en diagonale, chacun refermé par sa source entre parenthèses. La source logée dans le bloc rend chaque affirmation citable isolément, et l'escalier casse la monotonie de la colonne à puces.
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é.