visual-lab

card-08-orb-chain-total

Solde total en chaîne d'orbes

Poser un total en chiffre héros et le décomposer juste en dessous en une chaîne de disques tangents dont un seul — le plus gros et le seul coloré — porte le support principal, les actions empilées à l'opposé.

cardslideweb1512×276px10 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

Un montant unique domine l'écran ET se répartit sur 3 à 4 supports qu'il faut montrer d'un coup d'œil, avec une action primaire à offrir dans le même bloc.

Éviter quand

Les parts ne somment pas au total affiché (la chaîne devient un ornement mensonger), ou il y a plus de quatre supports : au-delà, les disques rétrécissent sous le corps lisible et un tableau fait mieux.

Notes

Le chevauchement est le réglage le plus fragile du pattern : à 0 les disques flottent et la chaîne se lit comme trois vignettes indépendantes, au-delà de 10 % du diamètre l'orbe centrale mange le chiffre de sa voisine. Le benchmark borne des DEUX côtés pour cette raison. L'orbe principale déclare `background-color` sous son `background-image` — sans quoi le harnais mesure le contraste contre le fond de page et le blanc sur violet sort à tort en échec ; 3:1 est le seuil honnête pour du blanc sur un bleu-violet saturé, pas 4,5. Le halo passe par une variable (`--vl-violet-halo`) et non par un rgba en dur : le contrat du dépôt l'exige, et c'est ce qui permet de rejouer la carte sur une autre charte sans garder une lueur violette orpheline.

Mots-clés

cartesoldetotalorbedisquechainerepartitiondashboardverreaction-primairechiffre-hero

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

Rejouables par node bin/check.mjs card-08-orb-chain-total : le pattern se prouve, il ne se croit pas.

assertionmesureattendu
l'orbe principale est plus grosse que ses voisines d'un rapport ≈ 1,24box('.vl-orbc__orb--lead').w / box('.vl-orbc__orb').w1.24 ± 0.08
les orbes se TOUCHENT sans se recouvrir (chevauchement ≤ 10 % du diamètre)(box('.vl-orbc__orb').right - box('.vl-orbc__orb--lead').left) / box('.vl-orbc__orb').w0 → 0.1
le chiffre héros appartient à l'échelle display : ≥ 40 pxnum('.vl-orbc__fig','fontSize')≥ 40
le chiffre héros pèse au moins le double du chiffre d'une orbenum('.vl-orbc__fig','fontSize') / num('.vl-orbc__orbfig','fontSize')≥ 2
la chaîne laisse la place aux actions : elle occupe moins de la moitié de la largeurbox('.vl-orbc__orbs').w / W≤ 0.5
les actions sont ancrées à droite, sans recouvrir la chaînebox('.vl-orbc__actions').left - box('.vl-orbc__orbs').right≥ 24
une seule action pleine : la seconde pilule est opaque, la première non(Number((cs('.vl-orbc__pill--solid','backgroundColor').match(/[\d.]+/g)||[0,0,0,1])[3]) || 1) - (Number((cs('.vl-orbc__pill','backgroundColor').match(/[\d.]+/g)||[0,0,0,1])[3]) || 1)≥ 0.25
contraste du chiffre héros sur le verre ≥ 7contrast('.vl-orbc__fig')≥ 7
contraste du chiffre de l'orbe principale sur son aplat ≥ 3contrast('.vl-orbc__orb--lead .vl-orbc__orbfig')≥ 3
aucun débordement du contenu hors de la carteoverflow('.vl-orbc')≤ 0

Le code

fragment — patterns/card-08-orb-chain-total.html Télécharger
<!-- card-08-orb-chain-total — fragment autonome. Couleurs via --vl-* uniquement, aucune valeur en dur. -->
<div class="vl-orbc">
  <div class="vl-orbc__top">
    <div>
      <span class="vl-orbc__label">Total balance</span>
      <div class="vl-orbc__fig"><span class="vl-orbc__cur">$</span>73,558.00</div>
    </div>
    <div class="vl-orbc__fx">
      <span class="vl-orbc__off">EUR</span>
      <span class="vl-orbc__pill">USD</span>
    </div>
  </div>
  <div class="vl-orbc__bottom">
    <div class="vl-orbc__orbs">
      <span class="vl-orbc__orb">
        <span class="vl-orbc__orbfig">$10,208</span>
        <span class="vl-orbc__orbcap">Debit</span>
      </span>
      <span class="vl-orbc__orb vl-orbc__orb--lead">
        <span class="vl-orbc__orbfig">$23,558</span>
        <span class="vl-orbc__orbcap">Northbeam</span>
      </span>
      <span class="vl-orbc__orb">
        <span class="vl-orbc__orbfig">$39,792</span>
        <span class="vl-orbc__orbcap">Savings</span>
      </span>
    </div>
    <div class="vl-orbc__actions">
      <span class="vl-orbc__pill vl-orbc__pill--lg">Receive Money</span>
      <span class="vl-orbc__pill vl-orbc__pill--lg vl-orbc__pill--solid">Send Money</span>
    </div>
  </div>
</div>

<style>
/* Le solde et sa décomposition en CHAÎNE D'ORBES. Trois disques tangents — ils se touchent,
   ils ne se recouvrent pas — dont la somme FAIT le chiffre héros posé au-dessus : c'est la
   seule raison d'être de la chaîne, et sans cette égalité elle devient un ornement. L'orbe
   centrale est la seule colorée et la seule plus grosse (1,24 ×) : la taille et la couleur
   disent la même chose, le support principal. À droite, deux actions empilées dont UNE seule
   est pleine — la primaire ; deux aplats en concurrence et le module n'a plus de sortie. */
.vl-orbc {
  position: relative; width: 1512px; height: 276px; padding: 24px 28px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-radius: var(--vl-radius-card);
  background-color: var(--vl-surface-glass);
  backdrop-filter: blur(var(--vl-blur));
  box-shadow: inset 0 1px 0 var(--vl-sheen);
  font-family: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  color: var(--vl-ink);
}
.vl-orbc__top { display: flex; align-items: flex-start; justify-content: space-between; }
.vl-orbc__label { display: block; font-size: 12px; font-weight: 500; color: var(--vl-ink-muted); }
.vl-orbc__fig { margin-top: 4px; font-size: 44px; font-weight: 600; letter-spacing: -0.025em; line-height: 1; }
.vl-orbc__cur { font-size: .5em; font-weight: 600; color: var(--vl-violet-deep); vertical-align: 0.72em; margin-right: 3px; }
.vl-orbc__fx { display: flex; align-items: center; gap: 6px; }
.vl-orbc__off { font-size: 12px; font-weight: 500; color: var(--vl-ink-muted); padding: 0 6px; }
.vl-orbc__pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 18px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--vl-ink);
  background-color: var(--vl-surface-glass-strong);
  box-shadow: inset 0 1px 0 var(--vl-sheen);
}
.vl-orbc__pill--lg { padding: 15px 18px; font-size: 13px; }
.vl-orbc__pill--solid { background-color: var(--vl-surface-dark); color: var(--vl-ink-invert); box-shadow: none; }

.vl-orbc__bottom { display: flex; align-items: center; justify-content: space-between; }
.vl-orbc__orbs { display: flex; align-items: center; }
.vl-orbc__orb {
  width: 124px; height: 124px; border-radius: 50%;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  background-color: var(--vl-surface-glass-strong);
  box-shadow: inset 0 1px 0 var(--vl-sheen);
}
.vl-orbc__orb + .vl-orbc__orb { margin-left: -8px; }
.vl-orbc__orb--lead {
  width: 154px; height: 154px; z-index: 2; color: var(--vl-ink-invert);
  background-color: var(--vl-violet-deep);
  background-image: radial-gradient(72% 72% at 32% 26%, var(--vl-violet) 0%, var(--vl-violet-deep) 62%, var(--vl-blue) 100%);
  box-shadow: 0 0 46px 10px var(--vl-violet-halo), inset 0 1px 0 var(--vl-sheen);
}
.vl-orbc__orbfig { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.vl-orbc__orb--lead .vl-orbc__orbfig { font-size: 22px; }
.vl-orbc__orbcap { margin-top: 2px; font-size: 11px; color: var(--vl-ink-muted); }
.vl-orbc__orb--lead .vl-orbc__orbcap { color: var(--vl-ink-invert-muted); }
.vl-orbc__actions { display: flex; flex-direction: column; gap: 12px; width: 186px; }
</style>
tokens de la charte — systems/ref-13-glass-fintech-dashboard.json Télécharger
:root {
  --vl-bg: #B4BEDD;
  --vl-grad-1: #A3B0DA;
  --vl-grad-2: #98A9D6;
  --vl-grad-3: #C8CEDA;
  --vl-surface-glass: rgba(255, 255, 255, 0.45);
  --vl-surface-glass-strong: rgba(255, 255, 255, 0.68);
  --vl-surface-glass-soft: rgba(255, 255, 255, 0.24);
  --vl-surface-dark: #101625;
  --vl-sheen: rgba(255, 255, 255, 0.45);
  --vl-blue: #4F7CF7;
  --vl-blue-light: #8FB6FA;
  --vl-violet: #8B5CF6;
  --vl-violet-deep: #5B7CF0;
  --vl-violet-halo: rgba(123, 106, 240, 0.42);
  --vl-ink: #1A1F2E;
  --vl-ink-muted: #565C72;
  --vl-ink-invert: #FFFFFF;
  --vl-ink-invert-muted: rgba(255, 255, 255, 0.72);
  --vl-radius-card: 28px;
  --vl-radius-sub: 18px;
  --vl-gap: 22px;
  --vl-margin: 44px;
  --vl-blur: 18px;
}
les métadonnées — patterns/card-08-orb-chain-total.json (télécharger) 
{
  "name": "Solde total en chaîne d'orbes",
  "family": "card",
  "ref": "ref-13-glass-fintech-dashboard",
  "intent": "Poser un total en chiffre héros et le décomposer juste en dessous en une chaîne de disques tangents dont un seul — le plus gros et le seul coloré — porte le support principal, les actions empilées à l'opposé.",
  "when_to_use": "Un montant unique domine l'écran ET se répartit sur 3 à 4 supports qu'il faut montrer d'un coup d'œil, avec une action primaire à offrir dans le même bloc.",
  "avoid_when": "Les parts ne somment pas au total affiché (la chaîne devient un ornement mensonger), ou il y a plus de quatre supports : au-delà, les disques rétrécissent sous le corps lisible et un tableau fait mieux.",
  "media": [
    "slide",
    "web"
  ],
  "tags": [
    "carte",
    "solde",
    "total",
    "orbe",
    "disque",
    "chaine",
    "repartition",
    "dashboard",
    "verre",
    "action-primaire",
    "chiffre-hero"
  ],
  "vars": [
    {
      "name": "--vl-surface-glass",
      "role": "verre de la carte",
      "default": "rgba(255, 255, 255, 0.45)"
    },
    {
      "name": "--vl-surface-glass-strong",
      "role": "verre des orbes secondaires et des pilules",
      "default": "rgba(255, 255, 255, 0.68)"
    },
    {
      "name": "--vl-violet",
      "role": "cœur du dégradé de l'orbe principale",
      "default": "#8B5CF6"
    },
    {
      "name": "--vl-violet-deep",
      "role": "aplat de repli de l'orbe + glyphe de devise",
      "default": "#5B7CF0"
    },
    {
      "name": "--vl-violet-halo",
      "role": "halo diffus de l'orbe principale",
      "default": "rgba(123, 106, 240, 0.42)"
    },
    {
      "name": "--vl-surface-dark",
      "role": "aplat de l'action primaire",
      "default": "#101625"
    }
  ],
  "slots": [
    "label",
    "figure",
    "fx",
    "orbs",
    "actions"
  ],
  "geometry": {
    "root": ".vl-orbc",
    "frame": [
      1512,
      276
    ],
    "ratios": {
      "orb_over_width": 0.082,
      "lead_over_orb": 1.242,
      "overlap_over_orb": 0.0645,
      "actions_over_width": 0.123
    },
    "type_px": {
      "label": 12,
      "figure": 44,
      "orb": 20,
      "orb_lead": 22,
      "micro": 11
    },
    "pad_ratio": {
      "top": 0.0159,
      "x": 0.0185,
      "bottom": 0.0159
    }
  },
  "benchmarks": [
    {
      "name": "l'orbe principale est plus grosse que ses voisines d'un rapport ≈ 1,24",
      "measure": "box('.vl-orbc__orb--lead').w / box('.vl-orbc__orb').w",
      "expect": 1.24,
      "tol": 0.08
    },
    {
      "name": "les orbes se TOUCHENT sans se recouvrir (chevauchement ≤ 10 % du diamètre)",
      "measure": "(box('.vl-orbc__orb').right - box('.vl-orbc__orb--lead').left) / box('.vl-orbc__orb').w",
      "min": 0,
      "max": 0.1
    },
    {
      "name": "le chiffre héros appartient à l'échelle display : ≥ 40 px",
      "measure": "num('.vl-orbc__fig','fontSize')",
      "min": 40
    },
    {
      "name": "le chiffre héros pèse au moins le double du chiffre d'une orbe",
      "measure": "num('.vl-orbc__fig','fontSize') / num('.vl-orbc__orbfig','fontSize')",
      "min": 2
    },
    {
      "name": "la chaîne laisse la place aux actions : elle occupe moins de la moitié de la largeur",
      "measure": "box('.vl-orbc__orbs').w / W",
      "max": 0.5
    },
    {
      "name": "les actions sont ancrées à droite, sans recouvrir la chaîne",
      "measure": "box('.vl-orbc__actions').left - box('.vl-orbc__orbs').right",
      "min": 24
    },
    {
      "name": "une seule action pleine : la seconde pilule est opaque, la première non",
      "measure": "(Number((cs('.vl-orbc__pill--solid','backgroundColor').match(/[\\d.]+/g)||[0,0,0,1])[3]) || 1) - (Number((cs('.vl-orbc__pill','backgroundColor').match(/[\\d.]+/g)||[0,0,0,1])[3]) || 1)",
      "min": 0.25
    },
    {
      "name": "contraste du chiffre héros sur le verre ≥ 7",
      "measure": "contrast('.vl-orbc__fig')",
      "min": 7
    },
    {
      "name": "contraste du chiffre de l'orbe principale sur son aplat ≥ 3",
      "measure": "contrast('.vl-orbc__orb--lead .vl-orbc__orbfig')",
      "min": 3
    },
    {
      "name": "aucun débordement du contenu hors de la carte",
      "measure": "overflow('.vl-orbc')",
      "max": 0
    }
  ],
  "notes": "Le chevauchement est le réglage le plus fragile du pattern : à 0 les disques flottent et la chaîne se lit comme trois vignettes indépendantes, au-delà de 10 % du diamètre l'orbe centrale mange le chiffre de sa voisine. Le benchmark borne des DEUX côtés pour cette raison. L'orbe principale déclare `background-color` sous son `background-image` — sans quoi le harnais mesure le contraste contre le fond de page et le blanc sur violet sort à tort en échec ; 3:1 est le seuil honnête pour du blanc sur un bleu-violet saturé, pas 4,5. Le halo passe par une variable (`--vl-violet-halo`) et non par un rgba en dur : le contrat du dépôt l'exige, et c'est ce qui permet de rejouer la carte sur une autre charte sans garder une lueur violette orpheline.",
  "id": "card-08-orb-chain-total"
}

À côté