visual-lab

layout-01-nested-bento

Bento à cartes imbriquées

Structurer une slide dense en trois niveaux (carte → sous-carte → tuile) sans une seule bordure ni ombre, en ne faisant décroître que le rayon et le padding.

layoutslideweb652×300pxaucun benchmark

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

Slide de chiffres ou de preuves où il faut caser 4 à 8 informations sans que ça ressemble à un tableau. C'est le squelette par défaut d'un deck investisseur moderne.

Éviter quand

Il n'y a qu'une seule idée sur la slide — l'imbrication crée alors une hiérarchie qui ne correspond à rien. Et sur un support imprimé en petit format, les tuiles descendent sous le seuil de lisibilité.

Notes

L'échelle de rayons (24 → 20 → 16) est la seule chose qui fait lire la profondeur : garder un rayon constant aplatit la composition, l'augmenter vers l'intérieur la fait paraître bombée. Le padding décroît en parallèle (36 → 24 → 18). Corollaire : ne jamais ajouter de bordure ou d'ombre pour « mieux séparer » — ce serait avouer que l'échelle de rayons est mal réglée. Les libellés de tuile sont collés en bas (margin-top:auto), sinon la rangée se désaligne dès qu'un contenu change de longueur.

Mots-clés

bentolayoutslidecartesimbricationrayonhierarchiedeckinvestisseurgrille

Le code

fragment — patterns/layout-01-nested-bento.html Télécharger
<!-- layout-01-nested-bento — fragment autonome. Couleurs via --vl-* uniquement. -->
<section class="vl-bento">
  <div class="vl-bento__card vl-bento__card--light">
    <h2 class="vl-bento__title">Our<br>Highlights</h2>
    <p class="vl-bento__body">Niveau 1 : la carte. Rayon 24, padding 36. Elle porte le titre
      et rien d'autre de structurant.</p>
  </div>

  <div class="vl-bento__card vl-bento__card--dark vl-bento__grid">
    <div class="vl-bento__tile" style="background:var(--vl-accent);color:var(--vl-ink)">
      <span class="vl-bento__figure">$2M</span>
      <span class="vl-bento__micro">ARR achieved<br>in 12 months</span>
    </div>
    <div class="vl-bento__tile" style="background:var(--vl-surface-tile);color:var(--vl-ink-invert)">
      <span class="vl-bento__figure">30,000+</span>
      <span class="vl-bento__micro">active users<br>worldwide</span>
    </div>
    <div class="vl-bento__tile" style="background:var(--vl-surface-tile);color:var(--vl-ink-invert)">
      <span class="vl-bento__micro">Niveau 3 : la tuile.<br>Rayon 16, padding 18.</span>
    </div>
    <div class="vl-bento__tile" style="background:var(--vl-accent);color:var(--vl-ink)">
      <span class="vl-bento__figure">87%</span>
      <span class="vl-bento__micro">Customer<br>retention rate</span>
    </div>
  </div>
</section>

<style>
/* Trois niveaux d'imbrication, et UNE seule règle qui les fait lire :
   le rayon DÉCROÎT à chaque niveau (24 → 20 → 16) et le padding aussi (36 → 24 → 18).
   C'est cette décroissance qui donne la profondeur — d'où l'absence totale de bordures,
   d'ombres et de séparateurs. Garder un rayon constant à tous les niveaux fait s'aplatir
   la composition ; l'augmenter vers l'intérieur la fait paraître bombée. */
.vl-bento { display: flex; gap: var(--vl-gap); align-items: stretch; min-height: 300px; }
.vl-bento__card { flex: 1; border-radius: var(--vl-radius-card); padding: 36px; }
.vl-bento__card--light { background: var(--vl-surface-light); color: var(--vl-ink); }
.vl-bento__card--dark { background: var(--vl-surface-dark); color: var(--vl-ink-invert); padding: 16px; }
.vl-bento__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.vl-bento__tile {
  border-radius: var(--vl-radius-tile); padding: 18px;
  display: flex; flex-direction: column; min-height: 120px;
}
.vl-bento__title { margin: 0; font-size: 44px; font-weight: 500; line-height: 1.06; letter-spacing: -0.02em; }
.vl-bento__body { margin: auto 0 0; font-size: 14px; line-height: 1.5; color: var(--vl-ink-muted); max-width: 36ch; }
.vl-bento__figure { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
/* Les libellés sont collés en BAS de chaque tuile : c'est ce qui les aligne entre elles
   quel que soit le nombre de lignes du chiffre au-dessus. */
.vl-bento__micro { margin-top: auto; font-size: 11px; line-height: 1.35; opacity: .78; }
</style>
tokens de la charte — systems/ref-03-bento-dark-pitch.json Télécharger
:root {
  --vl-bg: #2E2E2E;
  --vl-board: #2E2E2E;
  --vl-surface-light: #FFFFFF;
  --vl-surface-dark: #111111;
  --vl-surface-tile: #3A3A3A;
  --vl-accent: #CFE3F5;
  --vl-accent-2: #8FBBE4;
  --vl-accent-3: #5E9BD6;
  --vl-ink: #111111;
  --vl-ink-muted: #6B6B6B;
  --vl-ink-invert: #FFFFFF;
  --vl-ink-invert-muted: #A0A0A0;
  --vl-hairline: #D5D5D5;
  --vl-hairline-invert: #4A4A4A;
  --vl-radius-card: 24px;
  --vl-radius-sub: 20px;
  --vl-radius-tile: 16px;
  --vl-gap: 12px;
}
les métadonnées — patterns/layout-01-nested-bento.json (télécharger) 
{
  "name": "Bento à cartes imbriquées",
  "family": "layout",
  "ref": "ref-03-bento-dark-pitch",
  "intent": "Structurer une slide dense en trois niveaux (carte → sous-carte → tuile) sans une seule bordure ni ombre, en ne faisant décroître que le rayon et le padding.",
  "when_to_use": "Slide de chiffres ou de preuves où il faut caser 4 à 8 informations sans que ça ressemble à un tableau. C'est le squelette par défaut d'un deck investisseur moderne.",
  "avoid_when": "Il n'y a qu'une seule idée sur la slide — l'imbrication crée alors une hiérarchie qui ne correspond à rien. Et sur un support imprimé en petit format, les tuiles descendent sous le seuil de lisibilité.",
  "tags": [
    "bento",
    "layout",
    "slide",
    "cartes",
    "imbrication",
    "rayon",
    "hierarchie",
    "deck",
    "investisseur",
    "grille"
  ],
  "vars": [
    {
      "name": "--vl-radius-card",
      "role": "rayon du niveau 1",
      "default": "24px"
    },
    {
      "name": "--vl-radius-sub",
      "role": "rayon du niveau 2",
      "default": "20px"
    },
    {
      "name": "--vl-radius-tile",
      "role": "rayon du niveau 3",
      "default": "16px"
    },
    {
      "name": "--vl-gap",
      "role": "gouttière entre cartes de même niveau",
      "default": "12px"
    }
  ],
  "slots": [
    "title",
    "body",
    "tiles"
  ],
  "notes": "L'échelle de rayons (24 → 20 → 16) est la seule chose qui fait lire la profondeur : garder un rayon constant aplatit la composition, l'augmenter vers l'intérieur la fait paraître bombée. Le padding décroît en parallèle (36 → 24 → 18). Corollaire : ne jamais ajouter de bordure ou d'ombre pour « mieux séparer » — ce serait avouer que l'échelle de rayons est mal réglée. Les libellés de tuile sont collés en bas (margin-top:auto), sinon la rangée se désaligne dès qu'un contenu change de longueur.",
  "id": "layout-01-nested-bento"
}

À côté