Trois forfaits gradués par la teinte
Les trois forfaits se distinguent par l'intensité de la teinte et par un trait dessiné qui s'enroule de plus en plus. La durée se lit avant le texte, et l'ordre de lecture des cartes devient évident.
Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
@grille-tarifairepro
Grille tarifaire
Deux à quatre offres en colonnes, à paliers gradués, avec une offre centrale mise en avant en option.
- type
- Offre
- famille
- Preuve
- formats
- html · md
Entrées attendues
- titre
- 3 offres (nom, prix, unité, promesse, 4 inclusions)
- offre mise en avant
- mention
Téléchargements réservés aux abonnésVoir l'offre sur mesure
Prêt à coller
Le prompt, dans l'outil que vous avez déjà
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 @grille-tarifaire
# @grille-tarifaire
Deux à quatre offres en colonnes, à paliers gradués, avec une offre centrale mise en avant en option.
## Quand l'employer
Poser une grille de prix dans une proposition ou une page produit. Les colonnes alignent les paliers sur les mêmes lignes, donc ils se comparent d'un regard.
## Les entrées attendues
- `titre`
- `3 offres (nom, prix, unité, promesse, 4 inclusions)`
- `offre mise en avant`
- `mention`
## Les règles
1. Les inclusions se lisent dans le même ordre d'une colonne à l'autre. C'est l'alignement qui permet la comparaison.
2. Chaque prix porte son unité et sa période. « 900 € » sans « par mois » ne veut rien dire.
3. Une seule colonne mise en avant, et elle porte l'accent, jamais une ombre ou une taille supérieure.
4. La promesse d'une offre tient en une phrase et dit à qui elle s'adresse.
5. Trois colonnes par défaut. À deux, le choix devient binaire ; à cinq, il devient une corvée.
## À ne pas lui demander
- Cacher une condition dans une astérisque : ce qui change le prix se lit dans la colonne.
- Faire varier le nombre d'inclusions d'une colonne à l'autre.
## 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 .offre{border:var(--brand-line) solid var(--brand-rule);border-radius:var(--brand-radius);
padding:26px 24px;display:flex;flex-direction:column}
.c .offre.mise{border-color:var(--brand-accent);background:var(--brand-accent-soft)}
.c .offre .nom{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-ink-2);font-weight:600}
.c .offre.mise .nom{color:var(--brand-accent)}
.c .offre .prix{margin:16px 0 0;font-family:var(--brand-display);font-size:40px;line-height:1;font-weight:600}
.c .offre .unite{font-size:14px;color:var(--brand-ink-2);font-family:var(--brand-body);font-weight:400}
.c .offre .promesse{margin:12px 0 0;font-size:13.5px;line-height:1.45;color:var(--brand-ink-2);min-height:58px}
.c .offre ul{list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:var(--brand-line) solid var(--brand-rule)}
.c .offre li{font-size:13.5px;line-height:1.4;padding:7px 0 7px 18px;position:relative}
.c .offre li::before{content:"—";position:absolute;left:0;color:var(--brand-accent)}
</style>
<div class="c">
<h2 class="t-menu">{{titre}}</h2>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px;flex:1">
{{#offres}}
<div class="offre {{mise}}">
<p class="nom">{{nom}}</p>
<p class="prix">{{prix}} <span class="unite">{{unite}}</span></p>
<p class="promesse">{{promesse}}</p>
<ul>{{#inclus}}<li>{{.}}</li>{{/inclus}}</ul>
</div>
{{/offres}}
</div>
<div class="foot"><span>{{mention}}</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
Le skill de @grille-tarifaire, en clair
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.
# @grille-tarifaire Deux à quatre offres en colonnes, à paliers gradués, avec une offre centrale mise en avant en option. ## Quand l'employer Poser une grille de prix dans une proposition ou une page produit. Les colonnes alignent les paliers sur les mêmes lignes, donc ils se comparent d'un regard. ## Les entrées attendues - `titre` - `3 offres (nom, prix, unité, promesse, 4 inclusions)` - `offre mise en avant` - `mention` ## Les règles 1. Les inclusions se lisent dans le même ordre d'une colonne à l'autre. C'est l'alignement qui permet la comparaison. 2. Chaque prix porte son unité et sa période. « 900 € » sans « par mois » ne veut rien dire. 3. Une seule colonne mise en avant, et elle porte l'accent, jamais une ombre ou une taille supérieure. 4. La promesse d'une offre tient en une phrase et dit à qui elle s'adresse. 5. Trois colonnes par défaut. À deux, le choix devient binaire ; à cinq, il devient une corvée. ## À ne pas lui demander - Cacher une condition dans une astérisque : ce qui change le prix se lit dans la colonne. - Faire varier le nombre d'inclusions d'une colonne à l'autre. ## 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
@chiffres-clesgratuit
Chiffres clés, quatre colonnes
Quatre indicateurs avec libellé, valeur et phrase de lecture.
type: chiffres clés · charte: héritée
Relevé dans 9 documents · Arkive Inc., Combo
@comparatif-deux-colonnesgratuit
Comparatif en deux colonnes
Oppose deux options ligne à ligne sur les mêmes critères. La colonne retenue prend l'accent, jamais une couleur de validation.
type: comparatif · charte: héritée
Relevé dans 16 documents · GHARAGE GmbH & Co. KG, Artsy
@graphique-commentegratuit
Graphique commenté
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
Vu dans des présentations réelles
Ce motif, chez ceux qui le font bien.
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.
Trois offres tarifées, la centrale surélevée
Trois cartes blanches se posent sur une demi-bande de couleur, et celle du milieu monte plus haut et descend plus bas que ses voisines pour désigner l'offre recommandée. Le prix ferme chaque carte dans une pastille ovale, donc l'oeil compare d'abord les trois périmètres puis les trois montants.
Grille de trois paliers d'offre
Trois colonnes de paliers, une ligne par prestation, un échantillon du livrable logé dans la même grille à gauche, et le prix noté en signes plutôt qu'en montant. La bande verticale de droite reprend l'appel à l'action, donc la slide se suffit à elle-même si elle est lue hors contexte.
Votre charte à la place de la nôtre ?
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é.