Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Frise horizontale à phases, avec jalons marqués et chemin critique signalé.
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 @timeline-projet
# @timeline-projet
Frise horizontale à phases, avec jalons marqués et chemin critique signalé.
## Quand l'employer
Poser un calendrier en phases avec ses jalons.
## Les entrées attendues
- `titre`
- `phases`
- `jalons`
- `note de chemin critique`
## Les règles
1. La largeur de chaque phase est proportionnelle à sa durée réelle.
2. Les jalons s'alignent sur la fin de la phase qu'ils closent.
3. L'intensité de la teinte progresse de la première à la dernière phase.
4. Le chemin critique se signale en note de pied, en une phrase.
## À ne pas lui demander
- Rendre toutes les phases de largeur égale quand les durées diffèrent.
- Dépasser cinq phases : au-delà, le calendrier passe en 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>{{titre}}</h2>
<div style="margin-top:60px">
<div style="display:flex;gap:var(--brand-line)">
{{#phases}}
<div style="flex:{{w}};padding:16px 18px;background:{{bg}};color:{{fg}};border-radius:var(--brand-radius)">
<p style="font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0;opacity:.75">{{ph}}</p>
<p style="font-size:17px;font-weight:600;margin:6px 0 0">{{lib}}</p>
</div>
{{/phases}}
</div>
<div style="display:flex;margin-top:20px;border-top:var(--brand-line) solid var(--brand-rule);padding-top:16px">
{{#jalons}}
<div style="flex:{{w}};position:relative">
<span style="position:absolute;top:-21px;left:0;width:9px;height:9px;border-radius:50%;background:var(--brand-accent)"></span>
<p style="font-size:13px;margin:0;color:var(--brand-ink-2)">{{lib}}</p>
</div>
{{/jalons}}
</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.
# @timeline-projet Frise horizontale à phases, avec jalons marqués et chemin critique signalé. ## Quand l'employer Poser un calendrier en phases avec ses jalons. ## Les entrées attendues - `titre` - `phases` - `jalons` - `note de chemin critique` ## Les règles 1. La largeur de chaque phase est proportionnelle à sa durée réelle. 2. Les jalons s'alignent sur la fin de la phase qu'ils closent. 3. L'intensité de la teinte progresse de la première à la dernière phase. 4. Le chemin critique se signale en note de pied, en une phrase. ## À ne pas lui demander - Rendre toutes les phases de largeur égale quand les durées diffèrent. - Dépasser cinq phases : au-delà, le calendrier passe en 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 · 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 7 documents · CNVRT Labs, ilovecreatives
Trois à six étapes numérotées, avec objectif et sortie attendue.
type: process · 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
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.
Feuille de route avec repère aujourd'hui
Les trois phases sont des cartes empilées et colorées, et une pastille « Today » reliée par un trait désigne celle qui est en cours. Ce repère transforme une promesse en position, et le lecteur mesure seul le chemin qui reste.
Courbe de jalons sur photo plein cadre
Une ligne blanche fine traverse la photo et porte cinq points étiquetés, sans axe, sans échelle et sans chiffre. Le tracé donne un ordre et un relief à ce qui serait sinon une liste de tendances, tout en laissant l'image lisible dessous.
Parcours en colonnes avec courbe d'émotion
Quatre colonnes découpent le parcours en phases, les étapes y sont numérotées, et une courbe relie ces mêmes numéros plus bas pour montrer la satisfaction qui monte et qui chute. Les verbatims sont accrochés aux creux et aux sommets, donc chaque décrochage porte déjà sa preuve.
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é.