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

Télécharger le .zip

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

titrefiletbarreaccenttypocapitalesdeckmarqueurleading-rule

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.

assertionmesureattendu
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 lettrenum('.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 filetMath.abs(num('.vl-tlr','borderLeftWidth') - box('.vl-tlr-inline').w)0 ± 0.5
titre en capitalescs('.vl-tlr','textTransform') === 'uppercase' ? 1 : 01
contraste du titre ≥ 7contrast('.vl-tlr')≥ 7

Le code

fragment — 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>
tokens de la charte — 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é