Rendu en direct depuis la bibliothèque, charte de démonstration Norval.
Un seul chiffre en très grand corps, sa lecture en dessous, sa source au pied. Employé pour le chiffre qui porte toute la démonstration.
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 @chiffre-geant
# @chiffre-geant
Un seul chiffre en très grand corps, sa lecture en dessous, sa source au pied. Employé pour le chiffre qui porte toute la démonstration.
## Quand l'employer
Poser le chiffre qui porte toute la démonstration.
## Les entrées attendues
- `chiffre`
- `unité`
- `lecture`
- `source`
## Les règles
1. Un seul chiffre. Deux chiffres appellent @chiffres-cles.
2. L'unité se sépare du nombre et prend la teinte d'accent.
3. La lecture sous le chiffre dit ce qu'il signifie, elle ne le répète pas.
4. La source est obligatoire, au pied.
## À ne pas lui demander
- Employer cette mise en page pour un chiffre que la source ne soutient pas.
- Dépasser quatre caractères dans le nombre : au-delà, le corps géant ne tient plus.
## Tokens de charte employés
Ce composant n'écrit aucune couleur, aucune police, aucun rayon, aucune
épaisseur de filet ni aucun traitement d'image 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" style="justify-content:center;background:var(--brand-ink)">
<p style="font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 30px;
color:var(--brand-accent);font-weight:600">{{kicker}}</p>
<div style="display:flex;align-items:baseline;gap:18px">
<span style="font-family:var(--brand-display);font-size:200px;line-height:.85;font-weight:600;
letter-spacing:-.04em;color:var(--brand-paper)">{{chiffre}}</span>
<span style="font-family:var(--brand-display);font-size:56px;font-weight:600;color:var(--brand-accent)">{{unite}}</span>
</div>
<p style="font-size:24px;line-height:1.4;margin:38px 0 0;max-width:34ch;color:var(--brand-paper);opacity:.86">{{lecture}}</p>
<div class="foot" style="color:var(--brand-paper);opacity:.6"><span>{{source}}</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.
# @chiffre-geant Un seul chiffre en très grand corps, sa lecture en dessous, sa source au pied. Employé pour le chiffre qui porte toute la démonstration. ## Quand l'employer Poser le chiffre qui porte toute la démonstration. ## Les entrées attendues - `chiffre` - `unité` - `lecture` - `source` ## Les règles 1. Un seul chiffre. Deux chiffres appellent @chiffres-cles. 2. L'unité se sépare du nombre et prend la teinte d'accent. 3. La lecture sous le chiffre dit ce qu'il signifie, elle ne le répète pas. 4. La source est obligatoire, au pied. ## À ne pas lui demander - Employer cette mise en page pour un chiffre que la source ne soutient pas. - Dépasser quatre caractères dans le nombre : au-delà, le corps géant ne tient plus. ## Tokens de charte employés Ce composant n'écrit aucune couleur, aucune police, aucun rayon, aucune épaisseur de filet ni aucun traitement d'image 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 · Image
Relevé dans 2 documents · Nayture, Docusign
Une photographie plein cadre, un voile et une teinte de charte, le titre posé en bas à gauche. Le voile n'est pas décoratif, il garantit la lisibilité du texte.
type: couverture · charte: héritée
Relevé dans 20 documents · Ace & Tate, Arts Midwest
Une photographie sur une moitié, le propos sur l'autre. La coupe se fait toujours au même endroit dans un même document.
type: image et texte · charte: héritée
Relevé dans 6 documents · DEPT®, Design Hotels AG
Une citation posée à côté du portrait de la personne citée. Le nom reste en texte courant, jamais en capitales interlettrées.
type: citation · 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.
Chiffre posé sur une photo de contexte
L'autonomie s'écrit en grand sur une photo de montagne, la précision GPS sur un paysage de randonnée. Poser le chiffre sur la scène où il compte transforme une spécification en usage, et la tuile se passe alors de légende.
Le chiffre dessiné en disque plein
Le 96 % est écrit à l'intérieur d'un disque orange qui occupe la moitié de la page, et son complément de 4 % tient dans une pastille jaune minuscule posée à l'intérieur du disque. La proportion se comprend par la surface avant même d'être lue, ce qu'un histogramme à deux barres n'aurait pas produit.
Chiffre unique en cartes empilées
Le chiffre occupe une moitié de slide dans trois cartes décalées qui suggèrent la profondeur, pendant que l'autre moitié déroule la thèse et sa note de source. La séparation évite le chiffre décoratif noyé au milieu d'un paragraphe.
Chiffre géant adossé à sa question
Le pourcentage occupe la moitié de la page, et le pied de slide reproduit le libellé exact de la question posée aux répondants. Le lecteur voit ce que le chiffre mesure vraiment, donc la statistique cesse d'être un argument pour devenir une preuve.
Carte de chiffre extraite du texte
Un pavé coloré prend la place d'un bloc de la grille et affiche un pourcentage géant, dont la phrase complète figure déjà en gras dans la colonne voisine. Le chiffre n'apporte aucun fait neuf, il sert de point d'entrée au lecteur qui ne lira pas les cinq colonnes.
Chiffre cerclé encadré par sa qualification
Le montant est posé au centre d'un grand cercle tracé en couleur d'accent, avec sa réserve juste au-dessus et son périmètre juste en dessous. Le chiffre ne peut plus être cité hors contexte, parce que son cadrage voyage avec lui.
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é.
