card-02-notched-brief
title-01-leading-rule
Titre à filet d'accent collé
Marquer le titre d'une slide d'un filet vertical d'accent sans ajouter ni couleur au texte ni élément décoratif : le filet est le seul accent du titre, et il est collé au mot.
titleslideweb760×160px7 benchmarks
Le fragment RÉEL, dans son propre document, sur le sol de sa charte — pas une image. Ce que vous voyez est exactement ce que vous collerez.
Employer quand
Titre de slide en capitales grasses sur 1 à 3 lignes, dans un deck qui répète ce marqueur d'une slide à l'autre — c'est sa répétition qui en fait une charte.
Éviter quand
Le titre est déjà coloré ou posé sur un aplat d'accent (deux accents se neutralisent), ou il est centré : un filet collé à un bloc centré désaxe la composition sans rien signifier.
Notes
La faute à ne pas commettre : mettre un `border-right` sur un titre aligné à droite. Le filet court alors le long des deux lignes et devient un bord de cadre — c'est arrivé sur `SALES|STRATEGY` au premier jet de ref-06. Il faut la variante EN LIGNE, un `<span>` vide de 6 px à hauteur de capitale, posé après le dernier caractère du premier mot. En .pptx, le filet est un rectangle plein aligné sur la boîte de texte, avec un décalage NUL — la boîte de texte de python-pptx a une marge interne par défaut (0,05") qu'il faut annuler, sinon le filet se décolle.
Mots-clés
Benchmarks — la géométrie, en assertions vérifiables
Rejouables par node bin/check.mjs title-01-leading-rule : le pattern se prouve, il ne se croit pas.
| assertion | mesure | attendu |
|---|---|---|
| filet ≈ 8 % du corps du titre (6 px pour 74 px) | num('.vl-tlr','borderLeftWidth') / num('.vl-tlr','fontSize') | 0.081 ± 0.03 |
| filet COLLÉ : aucun padding entre le filet et la première lettre | num('.vl-tlr','paddingLeft') | 0 ± 0 |
| le filet court sur toute la hauteur du bloc (variante bloc) | box('.vl-tlr').h / (num('.vl-tlr','fontSize') * 1.05 * 2) | 0.95 → 1.05 |
| variante en ligne : filet à hauteur de capitale (70 à 85 % du corps) | box('.vl-tlr-inline').h / num('.vl-tlr-right','fontSize') | 0.7 → 0.85 |
| les deux variantes ont la MÊME épaisseur de filet | Math.abs(num('.vl-tlr','borderLeftWidth') - box('.vl-tlr-inline').w) | 0 ± 0.5 |
| titre en capitales | cs('.vl-tlr','textTransform') === 'uppercase' ? 1 : 0 | 1 |
| contraste du titre ≥ 7 | contrast('.vl-tlr') | ≥ 7 |
Le code
patterns/title-01-leading-rule.html
Télécharger<!-- title-01-leading-rule — le filet vertical d'accent COLLÉ au titre. Deux variantes, et il
faut les deux : en bloc (titre aligné à gauche) et en ligne (titre aligné à droite).
Couleurs via --vl-* uniquement. -->
<div class="vl-tlr-demo">
<h2 class="vl-tlr">Presentation<br>content index</h2>
<h2 class="vl-tlr-right">Sales<span class="vl-tlr-inline"></span><br>strategy</h2>
</div>
<style>
.vl-tlr-demo { display: flex; flex-direction: column; gap: 64px; width: 760px; }
.vl-tlr, .vl-tlr-right {
margin: 0; font-size: 74px; line-height: 1.05; font-weight: 800;
letter-spacing: -0.005em; text-transform: uppercase; color: var(--vl-black);
}
/* AUCUN padding-left : le filet touche le premier caractère. Un espace, même de 4 px, le
transforme en ornement posé à côté du titre ; collé, il se lit comme une lettre du mot. */
.vl-tlr { border-left: 6px solid var(--vl-orange); padding-left: 0; }
/* Variante EN LIGNE, pour un titre aligné à droite. Un `border-right` sur le bloc dessinerait
une barre le long des DEUX lignes et se lirait comme un bord de cadre : ici le filet suit
le dernier caractère du premier mot, à hauteur de capitale. */
.vl-tlr-right { text-align: right; }
.vl-tlr-inline {
display: inline-block; width: 6px; height: 0.76em;
background: var(--vl-orange); vertical-align: -0.02em;
}
</style>
systems/ref-06-orange-notched.json
Télécharger:root {
--vl-bg: #F0EFEC;
--vl-board: #DEDDD9;
--vl-white: #FFFFFF;
--vl-black: #141414;
--vl-orange: #F2551E;
--vl-steel: #C6D0CF;
--vl-ink-muted: #6A6A67;
--vl-ink-muted-invert: #FFF1E9;
--vl-ink-on-steel: #3E4746;
--vl-hairline: #00000015;
--vl-ph-a: #C9C9C9;
--vl-ph-b: #4C4C4C;
--vl-ph-dark-a: #6A6A6A;
--vl-ph-dark-b: #141414;
--vl-notch: 34px;
--vl-margin: 60px;
}
les métadonnées — patterns/title-01-leading-rule.json (télécharger)
{
"name": "Titre à filet d'accent collé",
"family": "title",
"ref": "ref-06-orange-notched",
"intent": "Marquer le titre d'une slide d'un filet vertical d'accent sans ajouter ni couleur au texte ni élément décoratif : le filet est le seul accent du titre, et il est collé au mot.",
"when_to_use": "Titre de slide en capitales grasses sur 1 à 3 lignes, dans un deck qui répète ce marqueur d'une slide à l'autre — c'est sa répétition qui en fait une charte.",
"avoid_when": "Le titre est déjà coloré ou posé sur un aplat d'accent (deux accents se neutralisent), ou il est centré : un filet collé à un bloc centré désaxe la composition sans rien signifier.",
"tags": [
"titre",
"filet",
"barre",
"accent",
"typo",
"capitales",
"deck",
"marqueur",
"leading-rule"
],
"vars": [
{
"name": "--vl-orange",
"role": "couleur du filet",
"default": "#F2551E"
},
{
"name": "--vl-black",
"role": "couleur du titre",
"default": "#141414"
}
],
"slots": [
"title"
],
"geometry": {
"root": ".vl-tlr",
"frame": [
760,
160
],
"ratios": {
"rule_width_over_font_size": 0.081
},
"type_px": {
"title": 74
},
"pad_ratio": {
"top": 0,
"x": 0,
"bottom": 0
}
},
"benchmarks": [
{
"name": "filet ≈ 8 % du corps du titre (6 px pour 74 px)",
"measure": "num('.vl-tlr','borderLeftWidth') / num('.vl-tlr','fontSize')",
"expect": 0.081,
"tol": 0.03
},
{
"name": "filet COLLÉ : aucun padding entre le filet et la première lettre",
"measure": "num('.vl-tlr','paddingLeft')",
"expect": 0,
"tol": 0
},
{
"name": "le filet court sur toute la hauteur du bloc (variante bloc)",
"measure": "box('.vl-tlr').h / (num('.vl-tlr','fontSize') * 1.05 * 2)",
"min": 0.95,
"max": 1.05
},
{
"name": "variante en ligne : filet à hauteur de capitale (70 à 85 % du corps)",
"measure": "box('.vl-tlr-inline').h / num('.vl-tlr-right','fontSize')",
"min": 0.7,
"max": 0.85
},
{
"name": "les deux variantes ont la MÊME épaisseur de filet",
"measure": "Math.abs(num('.vl-tlr','borderLeftWidth') - box('.vl-tlr-inline').w)",
"expect": 0,
"tol": 0.5
},
{
"name": "titre en capitales",
"measure": "cs('.vl-tlr','textTransform') === 'uppercase' ? 1 : 0",
"expect": 1
},
{
"name": "contraste du titre ≥ 7",
"measure": "contrast('.vl-tlr')",
"min": 7
}
],
"pptx": {
"primitive": "rect_rule",
"emitter": "kit/vl_pptx.py:title_leading_rule",
"pattern": "title-leading-rule"
},
"notes": "La faute à ne pas commettre : mettre un `border-right` sur un titre aligné à droite. Le filet court alors le long des deux lignes et devient un bord de cadre — c'est arrivé sur `SALES|STRATEGY` au premier jet de ref-06. Il faut la variante EN LIGNE, un `<span>` vide de 6 px à hauteur de capitale, posé après le dernier caractère du premier mot. En .pptx, le filet est un rectangle plein aligné sur la boîte de texte, avec un décalage NUL — la boîte de texte de python-pptx a une marge interne par défaut (0,05\") qu'il faut annuler, sinon le filet se décolle.",
"id": "title-01-leading-rule"
}
À côté
card-03-stat-accent
Vignette statistique sur accent
list-02-ruled-index
Sommaire à filets numérotés
shape-notched-corner
Carte à coin chanfreiné
title-02-condensed-overlay-stack
Cadre typographique condensé en overlay
title-03-wordmark-bottom-left