card-02-notched-brief

Carte chanfreinée de second rang

Porter une catégorie nommée et son explication sur un aplat neutre, en rangée, sans jamais rivaliser avec la vignette d'accent posée à côté.

cardslideweb430×340px10 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

Deux à trois segments, audiences, motions commerciales ou options présentés côte à côte — typiquement à droite d'une vignette statistique qui, elle, porte le chiffre.

Éviter quand

Il n'y a qu'une seule carte (le second rang n'a plus de premier rang à côté, l'aplat neutre n'y sert à rien), ou l'explication dépasse quatre lignes — ce n'est plus un libellé commenté, c'est un paragraphe qui mérite sa colonne.

Notes

L'orientation du chanfrein est ce qui SÉPARE les deux rangs : accent = coin bas-droit, second rang = coin haut-droit. Se reposer sur la seule couleur ne suffit pas — sur un tirage N&B ou une slide projetée pâle, les deux cartes redeviennent identiques. Contrairement à la carte d'accent, ici le contraste plein (4,5:1) est atteignable et donc EXIGÉ : l'aplat neutre n'a aucune excuse. Le `margin-top:auto` du corps est ce qui aligne la rangée ; le benchmark le vérifie sur les deux cartes, pas sur une seule.

Mots-clés

cartesegmentaudiencecategoriechanfreinnotchsecond-rangrangeedecklibelle

Benchmarks — la géométrie, en assertions vérifiables

Rejouables par node bin/check.mjs card-02-notched-brief : le pattern se prouve, il ne se croit pas.

assertionmesureattendu
chanfrein ≈ 7,5 % de la largeurnotch('.vl-brief') / W0.075 ± 0.015
chanfrein sur le coin HAUT-droit (l'orientation distingue le second rang)notchCorner('.vl-brief') === 'tr' ? 1 : 01
marges intérieures identiques à la vignette d'accent (≈ 8 %)num('.vl-brief','paddingLeft') / W0.08 ± 0.02
libellé en micro-capitales : ≤ 14 pxnum('.vl-brief__label','fontSize')≤ 14
le corps ne rivalise pas avec la carte d'accent : ≤ 20 pxnum('.vl-brief__body','fontSize')≤ 20
corps collé en bas (haut du bloc entre 45 % et 85 % de la hauteur)box('.vl-brief__body').top / H0.45 → 0.85
aucun débordement sous la marge basseH - num('.vl-brief','paddingBottom') - box('.vl-brief__body').bottom≥ -1
les deux cartes de la rangée alignent leur corps sur la MÊME ligneMath.abs(box('.vl-brief-row > :first-child .vl-brief__body').top - box('.vl-brief-row > :last-child .vl-brief__body').top)0 ± 1
contraste du corps ≥ 4,5 (petit corps sur aplat clair : seuil plein)contrast('.vl-brief__body')≥ 4.5
contraste du libellé ≥ 7 (il porte la catégorie, il doit claquer)contrast('.vl-brief__label')≥ 7

Le code

fragment — patterns/card-02-notched-brief.html Télécharger
<!-- card-02-notched-brief — carte de second rang : libellé en haut, explication collée en bas.
     Couleurs via --vl-* uniquement. Chanfrein sur le coin HAUT-droit, à l'inverse de la carte
     d'accent : c'est l'orientation qui distingue les deux rangs, pas la seule couleur. -->
<div class="vl-brief-row">
  <div class="vl-brief">
    <p class="vl-brief__label">Business<br>professionals</p>
    <p class="vl-brief__body">Operations and finance leads in companies of 50 to 500 people,
      buying to replace a stack of spreadsheets and one ageing licence.</p>
  </div>
  <div class="vl-brief">
    <p class="vl-brief__label">General<br>consumers</p>
    <p class="vl-brief__body">The end customers of those operators, who never see the platform
      but feel it in delivery times and in what a promised date is worth.</p>
  </div>
</div>

<style>
.vl-brief-row { display: flex; gap: 32px; width: 892px; }
.vl-brief {
  --vl-nc-size: var(--vl-notch, 32px);
  flex: 1; height: 340px;
  padding: 32px 34px 36px;
  background: var(--vl-steel); color: var(--vl-black);
  display: flex; flex-direction: column;
  clip-path: polygon(0 0, calc(100% - var(--vl-nc-size)) 0, 100% var(--vl-nc-size), 100% 100%, 0 100%);
}
/* Le libellé reste en micro-capitales : il nomme la catégorie, il ne raconte rien. Le passer
   en gros corps ferait de cette carte de second rang une concurrente de la carte d'accent. */
.vl-brief__label {
  margin: 0; font-size: 12px; line-height: 1.4; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
}
/* Collé en bas : dans une rangée, c'est ce qui aligne les explications entre elles quelle que
   soit la longueur des libellés — sans lui la rangée se désaligne au premier changement. */
.vl-brief__body {
  margin: auto 0 0;
  font-size: 17px; line-height: 1.55; color: var(--vl-ink-on-steel);
}
</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/card-02-notched-brief.json (télécharger)
{
  "name": "Carte chanfreinée de second rang",
  "family": "card",
  "ref": "ref-06-orange-notched",
  "intent": "Porter une catégorie nommée et son explication sur un aplat neutre, en rangée, sans jamais rivaliser avec la vignette d'accent posée à côté.",
  "when_to_use": "Deux à trois segments, audiences, motions commerciales ou options présentés côte à côte — typiquement à droite d'une vignette statistique qui, elle, porte le chiffre.",
  "avoid_when": "Il n'y a qu'une seule carte (le second rang n'a plus de premier rang à côté, l'aplat neutre n'y sert à rien), ou l'explication dépasse quatre lignes — ce n'est plus un libellé commenté, c'est un paragraphe qui mérite sa colonne.",
  "tags": [
    "carte",
    "segment",
    "audience",
    "categorie",
    "chanfrein",
    "notch",
    "second-rang",
    "rangee",
    "deck",
    "libelle"
  ],
  "vars": [
    {
      "name": "--vl-steel",
      "role": "aplat neutre de second rang",
      "default": "#C6D0CF"
    },
    {
      "name": "--vl-black",
      "role": "libellé",
      "default": "#141414"
    },
    {
      "name": "--vl-ink-on-steel",
      "role": "corps sur l'aplat neutre",
      "default": "#3E4746"
    },
    {
      "name": "--vl-notch",
      "role": "longueur du chanfrein",
      "default": "32px"
    }
  ],
  "slots": [
    "label",
    "body"
  ],
  "geometry": {
    "root": ".vl-brief",
    "frame": [
      430,
      340
    ],
    "ratios": {
      "pad_x_over_width": 0.079,
      "notch_over_width": 0.074,
      "body_top_over_height": 0.63
    },
    "type_px": {
      "label": 12,
      "body": 17
    },
    "pad_ratio": {
      "top": 0.074,
      "x": 0.079,
      "bottom": 0.084
    }
  },
  "benchmarks": [
    {
      "name": "chanfrein ≈ 7,5 % de la largeur",
      "measure": "notch('.vl-brief') / W",
      "expect": 0.075,
      "tol": 0.015
    },
    {
      "name": "chanfrein sur le coin HAUT-droit (l'orientation distingue le second rang)",
      "measure": "notchCorner('.vl-brief') === 'tr' ? 1 : 0",
      "expect": 1
    },
    {
      "name": "marges intérieures identiques à la vignette d'accent (≈ 8 %)",
      "measure": "num('.vl-brief','paddingLeft') / W",
      "expect": 0.08,
      "tol": 0.02
    },
    {
      "name": "libellé en micro-capitales : ≤ 14 px",
      "measure": "num('.vl-brief__label','fontSize')",
      "max": 14
    },
    {
      "name": "le corps ne rivalise pas avec la carte d'accent : ≤ 20 px",
      "measure": "num('.vl-brief__body','fontSize')",
      "max": 20
    },
    {
      "name": "corps collé en bas (haut du bloc entre 45 % et 85 % de la hauteur)",
      "measure": "box('.vl-brief__body').top / H",
      "min": 0.45,
      "max": 0.85
    },
    {
      "name": "aucun débordement sous la marge basse",
      "measure": "H - num('.vl-brief','paddingBottom') - box('.vl-brief__body').bottom",
      "min": -1
    },
    {
      "name": "les deux cartes de la rangée alignent leur corps sur la MÊME ligne",
      "measure": "Math.abs(box('.vl-brief-row > :first-child .vl-brief__body').top - box('.vl-brief-row > :last-child .vl-brief__body').top)",
      "expect": 0,
      "tol": 1
    },
    {
      "name": "contraste du corps ≥ 4,5 (petit corps sur aplat clair : seuil plein)",
      "measure": "contrast('.vl-brief__body')",
      "min": 4.5
    },
    {
      "name": "contraste du libellé ≥ 7 (il porte la catégorie, il doit claquer)",
      "measure": "contrast('.vl-brief__label')",
      "min": 7
    }
  ],
  "pptx": {
    "primitive": "notched_rect",
    "emitter": "kit/vl_pptx.py:brief_card",
    "pattern": "card-02-notched-brief"
  },
  "notes": "L'orientation du chanfrein est ce qui SÉPARE les deux rangs : accent = coin bas-droit, second rang = coin haut-droit. Se reposer sur la seule couleur ne suffit pas — sur un tirage N&B ou une slide projetée pâle, les deux cartes redeviennent identiques. Contrairement à la carte d'accent, ici le contraste plein (4,5:1) est atteignable et donc EXIGÉ : l'aplat neutre n'a aucune excuse. Le `margin-top:auto` du corps est ce qui aligne la rangée ; le benchmark le vérifie sur les deux cartes, pas sur une seule.",
  "id": "card-02-notched-brief"
}

À côté