card-01-ghost-icon
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
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
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.
| assertion | mesure | attendu |
|---|---|---|
| chanfrein ≈ 7,5 % de la largeur | notch('.vl-brief') / W | 0.075 ± 0.015 |
| chanfrein sur le coin HAUT-droit (l'orientation distingue le second rang) | notchCorner('.vl-brief') === 'tr' ? 1 : 0 | 1 |
| marges intérieures identiques à la vignette d'accent (≈ 8 %) | num('.vl-brief','paddingLeft') / W | 0.08 ± 0.02 |
| libellé en micro-capitales : ≤ 14 px | num('.vl-brief__label','fontSize') | ≤ 14 |
| le corps ne rivalise pas avec la carte d'accent : ≤ 20 px | num('.vl-brief__body','fontSize') | ≤ 20 |
| corps collé en bas (haut du bloc entre 45 % et 85 % de la hauteur) | box('.vl-brief__body').top / H | 0.45 → 0.85 |
| aucun débordement sous la marge basse | H - num('.vl-brief','paddingBottom') - box('.vl-brief__body').bottom | ≥ -1 |
| les deux cartes de la rangée alignent leur corps sur la MÊME ligne | Math.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
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>
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é
card-03-stat-accent
Vignette statistique sur accent
card-04-stat-barchart
Carte statistique à barres empilées
card-05-balance-gauge
Carte solde à jauge compteur
card-06-forecast-timeline
Carte prévision — timeline + sous-cartes
card-07-transactions