visual-lab

layout-02-swiss-frame

Cadre suisse header / footer

Poser le cadre d'une slide de deck : une marge unique, deux barres de micro-typo à trois zones et un filet d'un pixel — de quoi rendre une suite de slides reconnaissable sans y ajouter le moindre ornement.

layoutslideweb621×703pxaucun 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

Deck de plus de trois slides qui doit tenir comme un document : le header rappelle la section, le footer numérote. C'est aussi ce qui autorise les fonds pleins à alterner sans que le deck se disloque.

Éviter quand

Slide unique, visuel de réseau social, ou support projeté de loin : à 8 px les barres ne se lisent pas, elles ne sont là que pour tenir la page.

Notes

Trois réglages font tout le travail. 1) MARGE UNIQUE : la même valeur sur les quatre côtés (48 px pour une slide 1600×900), sinon les barres cessent d'être alignées sur le contenu et le cadre se voit. 2) ZONES ÉGALES : les trois cellules d'une barre sont en `flex: 1`, jamais dimensionnées au contenu — c'est ce qui garde la mention centrale au centre optique quand les textes latéraux changent de longueur. 3) FILET INVERSÉ : sur fond plein, le filet passe de noir 9 % à blanc 20 % ; un filet noir sur fond bleu disparaît et le header se met à flotter. La marque (le logo) est la seule exception à la micro-typo : elle garde son poids et sa casse, c'est ce qui l'empêche de se confondre avec la mention de section.

Mots-clés

layoutcadreheaderfooterdeckslidesuissefiletmicro-typogrillemarge

Le code

fragment — patterns/layout-02-swiss-frame.html Télécharger
<!-- layout-02-swiss-frame — fragment autonome. Couleurs via --vl-* uniquement.
     Deux variantes empilées : fond clair (filet noir à 9 %) et fond plein (filet blanc à 20 %). -->
<div class="vl-swiss vl-swiss--light">
  <div class="vl-swiss__bar vl-swiss__bar--head">
    <span class="vl-swiss__mark">northbeam</span>
    <span>Business model</span>
    <span>Series A — 2026</span>
  </div>

  <div class="vl-swiss__body">
    <h2 class="vl-swiss__demo">Zone de contenu</h2>
    <p class="vl-swiss__note">La marge est unique (48 px) et vaut pour les quatre côtés :
      header, footer et contenu sont alignés sur la même verticale.</p>
  </div>

  <div class="vl-swiss__bar vl-swiss__bar--foot">
    <span>northbeam.example</span>
    <span>Investor relations</span>
    <span>06 / 10</span>
  </div>
</div>

<div class="vl-swiss vl-swiss--fill">
  <div class="vl-swiss__bar vl-swiss__bar--head">
    <span class="vl-swiss__mark">northbeam</span>
    <span>Traction</span>
    <span>Series A — 2026</span>
  </div>

  <div class="vl-swiss__body">
    <h2 class="vl-swiss__demo">Même cadre, fond plein</h2>
    <p class="vl-swiss__note">Seule la couleur du filet change. Rien d'autre ne bouge : c'est
      ce qui fait tenir l'alternance des fonds d'une slide à l'autre.</p>
  </div>

  <div class="vl-swiss__bar vl-swiss__bar--foot">
    <span>northbeam.example</span>
    <span>Investor relations</span>
    <span>08 / 10</span>
  </div>
</div>

<style>
/* Le cadre entier tient en trois règles : une marge unique, deux barres en micro-typo, un
   filet d'un pixel. Les trois zones de chaque barre sont des colonnes de largeur ÉGALE
   (`flex: 1`) — c'est ce qui garde la mention centrale optiquement au centre même quand les
   textes de gauche et de droite n'ont pas la même longueur. */
.vl-swiss {
  --vl-margin: 48px;
  padding: var(--vl-margin);
  display: flex; flex-direction: column;
  min-height: 300px; margin-bottom: 24px;
  font-family: "Helvetica Neue", Inter, Arial, sans-serif;
}
.vl-swiss--light { background: var(--vl-white); color: var(--vl-black); }
.vl-swiss--fill  { background: var(--vl-blue);  color: var(--vl-white); }

.vl-swiss__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 8px; line-height: 1.4; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-color: var(--vl-hairline); border-style: solid; border-width: 0;
}
.vl-swiss--fill .vl-swiss__bar { border-color: var(--vl-hairline-invert); }
.vl-swiss__bar--head { padding-bottom: 14px; border-bottom-width: 1px; }
.vl-swiss__bar--foot { margin-top: auto; padding-top: 14px; border-top-width: 1px; }
.vl-swiss__bar > * { flex: 1; }
.vl-swiss__bar > :nth-child(2) { text-align: center; }
.vl-swiss__bar > :last-child { text-align: right; }
/* La marque échappe à la micro-typo : c'est le seul élément des barres qui a un poids. */
.vl-swiss__mark { font-size: 13px; font-weight: 900; letter-spacing: -0.02em; text-transform: none; }

.vl-swiss__body { padding: 40px 0; }
.vl-swiss__demo { margin: 0; font-size: 40px; font-weight: 900; letter-spacing: -0.02em; text-transform: uppercase; }
.vl-swiss__note { margin: 16px 0 0; max-width: 52ch; font-size: 13px; line-height: 1.5; color: var(--vl-ink-muted); }
.vl-swiss--fill .vl-swiss__note { color: var(--vl-ink-muted-invert); }
</style>
tokens de la charte — systems/ref-04-swiss-investor-blue.json Télécharger
:root {
  --vl-bg: #D9D2C7;
  --vl-board: #D9D2C7;
  --vl-blue: #1B44D8;
  --vl-black: #0D0D0D;
  --vl-white: #FFFFFF;
  --vl-ink-muted: #6E6E6E;
  --vl-ink-muted-invert: #D3D3D3;
  --vl-hairline: #00000018;
  --vl-hairline-invert: #FFFFFF33;
  --vl-ph-a: #C9C9C9;
  --vl-ph-b: #5A5A5A;
  --vl-margin: 48px;
}
les métadonnées — patterns/layout-02-swiss-frame.json (télécharger) 
{
  "name": "Cadre suisse header / footer",
  "family": "layout",
  "ref": "ref-04-swiss-investor-blue",
  "intent": "Poser le cadre d'une slide de deck : une marge unique, deux barres de micro-typo à trois zones et un filet d'un pixel — de quoi rendre une suite de slides reconnaissable sans y ajouter le moindre ornement.",
  "when_to_use": "Deck de plus de trois slides qui doit tenir comme un document : le header rappelle la section, le footer numérote. C'est aussi ce qui autorise les fonds pleins à alterner sans que le deck se disloque.",
  "avoid_when": "Slide unique, visuel de réseau social, ou support projeté de loin : à 8 px les barres ne se lisent pas, elles ne sont là que pour tenir la page.",
  "tags": [
    "layout",
    "cadre",
    "header",
    "footer",
    "deck",
    "slide",
    "suisse",
    "filet",
    "micro-typo",
    "grille",
    "marge"
  ],
  "vars": [
    {
      "name": "--vl-hairline",
      "role": "filet sous le header sur fond clair",
      "default": "#00000018"
    },
    {
      "name": "--vl-hairline-invert",
      "role": "filet sur fond plein (bleu ou noir)",
      "default": "#FFFFFF33"
    },
    {
      "name": "--vl-white",
      "role": "fond des slides claires",
      "default": "#FFFFFF"
    },
    {
      "name": "--vl-blue",
      "role": "fond des slides pleines",
      "default": "#1B44D8"
    },
    {
      "name": "--vl-ink-muted",
      "role": "corps de texte sur fond clair",
      "default": "#6E6E6E"
    }
  ],
  "slots": [
    "mark",
    "section",
    "meta",
    "body",
    "footer-left",
    "footer-center",
    "footer-right"
  ],
  "notes": "Trois réglages font tout le travail. 1) MARGE UNIQUE : la même valeur sur les quatre côtés (48 px pour une slide 1600×900), sinon les barres cessent d'être alignées sur le contenu et le cadre se voit. 2) ZONES ÉGALES : les trois cellules d'une barre sont en `flex: 1`, jamais dimensionnées au contenu — c'est ce qui garde la mention centrale au centre optique quand les textes latéraux changent de longueur. 3) FILET INVERSÉ : sur fond plein, le filet passe de noir 9 % à blanc 20 % ; un filet noir sur fond bleu disparaît et le header se met à flotter. La marque (le logo) est la seule exception à la micro-typo : elle garde son poids et sa casse, c'est ce qui l'empêche de se confondre avec la mention de section.",
  "id": "layout-02-swiss-frame"
}

À côté