Grid pattern

Dot grid subtil, ink @ 15% alpha, 32px spacing. Aplicat pe fundalul bej-0 al tuturor paginilor (Landing, Dublin, Blog, System) prin clasa .has-grid pe <body>.

Markup canonic · components/foundation-grid.json

sursa = JSON · generat de scripts/build-catalog.py

Contabilitatea ta, pe pilot automat.

Tokens

--grid-color   rgba(17, 13, 16, 0.15)   /* ink @ 15% */
--grid-size    32px                      /* spacing punct la punct */
--grid-radius  1px                       /* radius dot (Ø 2px) */
--grid-edge    1.5px                     /* tranziție sharp */

Live preview

Decizii & rationale

  • Ink, nu auriu — la luminanță scăzută, ink dă contrast perceptual stabil cross-device la alpha mic.
  • Dots, nu lines — pattern „graphite paper / Notion canvas", nu „spreadsheet / engineering blueprint".
  • 0.15 alpha — pragul „vizibil clar fără să strige". Sub 0.10 dispare; peste 0.20 devine pattern.
  • 32px spacing — densitate mid-range. 24px = prea „graph paper", 48px = prea aerisit.
  • No mask — textura e deja subtilă; mask-ul ar lăsa goluri.

Z-index — regula critică

Grid-ul trebuie să stea în spatele oricărui conținut — tot timpul.

Garanția vine din 3 declarații în bono-ds.css:

  1. .has-grid { isolation: isolate; } — body creează stacking context propriu. Niciun element din afară nu poate intra între grid și content.
  2. .has-grid::before { z-index: 0; pointer-events: none; } — pseudo-elementul cu dots stă pe stratul 0 și nu interceptează click-uri / selecție text.
  3. .has-grid > * { z-index: 1; position: relative; } — TOATE elementele direct-copil ale body urcă pe stratul 1, automat peste grid.

Concluzie practică: dacă adaugi un element nou pe body, nu trebuie să faci nimic — sistemul îl ridică automat peste grid.

Scara z-index canonică

Stratz-indexComponente
Grid texture0.has-grid::before (automat)
Content default1.has-grid > * (cards, texte, KPI, tables — automat)
Flow sheet scrim40.flow-sheet-scrim (scoped în .flow-chrome's own stacking context)
Sticky surfaces50.sidebar (sticky; eticheta de hover a railului .icon-only iese peste conținutul poziționat), topbar Dublin
FAB90.vox-fab
Topnav debug95.v3-topnav (debug only)
Toast100.alert.floating
Modal200.modal-backdrop + modal content, .doc-sheet-backdrop
Tooltip / dropdown300Rezervat

DON'T — grid & z-index

  • Niciodată z-index: -1 pe direct-copil de body.has-grid — ar trece SUB dots. Dacă ai nevoie de un „background fill" în spate, folosește ::before pe element, nu z-index negativ.
  • Niciodată override pe isolation: isolate de pe body — sparge garanția că dots stau în spate.
  • Niciodată grid hardcoded pe element (ex: background-image: radial-gradient(...) ad-hoc). Folosește .has-grid pe body sau e violare.
  • Niciodată mask-image gradient default pe grid — textura e deja subtilă, mask-ul șterge zone întregi.
  • Niciun competing radial-gradient page-level. Glow-uri locale (ex: TVA-due halo) sunt ok dacă sunt absolute pe element.
  • Niciun z-index ad-hoc în afara scarei — dacă ai nevoie de un strat nou, adaugă-l explicit în tabel.
  • Niciodată auriu / warm tones pe dots — ink la luminanță mică dă contrast perceptual; gold ar avea nevoie de 0.30 alpha și ar deveni pattern.

Folosire per surface

  • Landing: ✓ obligatoriu — Notion canvas vibe.
  • Blog: ✓ obligatoriu — page texture pe body editorial.
  • Dublin: ✓ default. Opt-out posibil per user-setting pentru utilizatori care preferă claritate maximă.
  • DS showcase: ✗ fără grid — componentele se inspectează mai curat pe bej-0 plain. Excepție acceptată de la regula „all pages".
  • Templates (card, header, sidebar): ✓ obligatoriu, pentru a preview-a contextul real.