visual-lab

card-01-ghost-icon

Carte-argument à icône fantôme

Asséner UN seul argument sur toute une largeur, avec une icône énorme mais presque invisible qui donne du volume sans voler l'attention au titre.

cardslidesocialweb1164×420pxaucun 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

Bloc de réassurance ou de promesse produit (confidentialité, garantie, engagement) sur une landing ou une slide. Un argument par carte, jamais deux.

Éviter quand

Il y a plus d'une idée à faire passer, ou l'icône doit être comprise (ici elle est décorative). Pour une rangée de 3 bénéfices, prendre un pattern de grille, pas celui-ci.

Notes

Trois proportions font tout le pattern et se dérèglent vite : (1) l'icône fait au moins 3× la hauteur du titre, (2) son contraste avec le fond de carte reste sous ~5 % de luminosité, (3) le sous-titre ne dépasse pas 46 caractères par ligne. Grossir l'icône sans baisser son contraste casse la hiérarchie et la carte devient une carte à pictogramme banale. Le fragment serif du titre est un simple changement de famille typographique à corps égal — il ne mérite pas son propre pattern.

Mots-clés

carteargumentreassuranceiconeconfidentialitelandingheromonochromeclaim

Le code

fragment — patterns/card-01-ghost-icon.html Télécharger
<!-- card-01-ghost-icon — fragment autonome. Couleurs via --vl-* uniquement. -->
<section class="vl-ghost-claim">
  <div class="vl-ghost-claim__icon" aria-hidden="true">
    <!-- slot:icon — n'importe quel SVG monochrome en currentColor, sans outline. -->
    <svg viewBox="0 0 200 240" fill="none" stroke="currentColor" stroke-width="27"
         stroke-linecap="round" stroke-linejoin="round">
      <g transform="rotate(-4 100 130)">
        <rect x="48" y="122" width="118" height="92" rx="46" fill="currentColor" stroke="none"/>
        <path d="M68 62 V142"/>
        <path d="M98 50 V142"/>
        <path d="M128 57 V142"/>
        <path d="M157 76 V142"/>
        <path d="M64 150 C 40 152, 26 166, 26 186"/>
      </g>
    </svg>
  </div>

  <div class="vl-ghost-claim__body">
    <!-- slot:title — un fragment en <em> bascule en serif italique. -->
    <h2 class="vl-ghost-claim__title">northbeam <em>(lite)</em> doesn't collect<br>any data</h2>
    <!-- slot:subtitle -->
    <p class="vl-ghost-claim__sub">Bookmarks, browsing history, cookies, passwords, every page
      you load — all stored on your computer, we can't access them.</p>
  </div>
</section>

<style>
.vl-ghost-claim {
  display: flex;
  align-items: center;
  gap: var(--vl-gutter, 90px);
  padding: var(--vl-pad-card, 60px 76px);
  border-radius: var(--vl-radius-card, 48px);
  background: var(--vl-surface);
  font-family: var(--vl-font-display, inherit);
}
.vl-ghost-claim__icon {
  flex: 0 0 var(--vl-ghost-size, 250px);
  color: var(--vl-ghost);
  line-height: 0;
}
.vl-ghost-claim__icon svg { width: 100%; height: auto; display: block; }

.vl-ghost-claim__body { min-width: 0; }

.vl-ghost-claim__title {
  margin: 0 0 var(--vl-gap-title, 26px);
  font-size: var(--vl-size-title, 52px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--vl-ink);
}
/* Le geste du pattern : un fragment du titre change de FAMILLE et de GRAISSE,
   pas de couleur ni de taille. Le contraste vient du dessin de la lettre. */
.vl-ghost-claim__title em {
  font-family: var(--vl-font-accent, Georgia, "Times New Roman", serif);
  font-style: italic;
  font-weight: 400;
}

.vl-ghost-claim__sub {
  margin: 0;
  max-width: var(--vl-measure, 46ch);
  font-size: var(--vl-size-sub, 25px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--vl-muted);
}

@media (max-width: 860px) {
  .vl-ghost-claim { flex-direction: column; align-items: flex-start; gap: 36px; padding: 40px 36px; }
  .vl-ghost-claim__icon { flex-basis: 150px; }
  .vl-ghost-claim__title { font-size: 34px; }
  .vl-ghost-claim__sub { font-size: 18px; }
}
</style>
tokens de la charte — systems/ref-02-ghost-icon-claim.json Télécharger
:root {
  --vl-bg: #F7F7F7;
  --vl-surface: #EDEDED;
  --vl-ghost: #E2E2E2;
  --vl-ink: #444444;
  --vl-muted: #A9A9A9;
  --vl-radius-card: 48px;
  --vl-pad-card: 60px 76px;
  --vl-gutter: 90px;
}
les métadonnées — patterns/card-01-ghost-icon.json (télécharger) 
{
  "name": "Carte-argument à icône fantôme",
  "family": "card",
  "ref": "ref-02-ghost-icon-claim",
  "intent": "Asséner UN seul argument sur toute une largeur, avec une icône énorme mais presque invisible qui donne du volume sans voler l'attention au titre.",
  "when_to_use": "Bloc de réassurance ou de promesse produit (confidentialité, garantie, engagement) sur une landing ou une slide. Un argument par carte, jamais deux.",
  "avoid_when": "Il y a plus d'une idée à faire passer, ou l'icône doit être comprise (ici elle est décorative). Pour une rangée de 3 bénéfices, prendre un pattern de grille, pas celui-ci.",
  "tags": [
    "carte",
    "argument",
    "reassurance",
    "icone",
    "confidentialite",
    "landing",
    "hero",
    "monochrome",
    "claim"
  ],
  "vars": [
    {
      "name": "--vl-surface",
      "role": "fond de la carte",
      "default": "#EDEDED"
    },
    {
      "name": "--vl-ghost",
      "role": "couleur de l'icône, à ~4 % de luminosité du fond de carte",
      "default": "#E2E2E2"
    },
    {
      "name": "--vl-ink",
      "role": "couleur du titre",
      "default": "#444444"
    },
    {
      "name": "--vl-muted",
      "role": "couleur du sous-titre",
      "default": "#A9A9A9"
    },
    {
      "name": "--vl-ghost-size",
      "role": "largeur de la colonne icône",
      "default": "250px"
    },
    {
      "name": "--vl-gutter",
      "role": "gouttière icône / texte",
      "default": "90px"
    }
  ],
  "slots": [
    "icon",
    "title",
    "subtitle"
  ],
  "notes": "Trois proportions font tout le pattern et se dérèglent vite : (1) l'icône fait au moins 3× la hauteur du titre, (2) son contraste avec le fond de carte reste sous ~5 % de luminosité, (3) le sous-titre ne dépasse pas 46 caractères par ligne. Grossir l'icône sans baisser son contraste casse la hiérarchie et la carte devient une carte à pictogramme banale. Le fragment serif du titre est un simple changement de famille typographique à corps égal — il ne mérite pas son propre pattern.",
  "media": [
    "slide",
    "social",
    "web"
  ],
  "id": "card-01-ghost-icon"
}

À côté