Spazi, raggi ed elevazione

Spazi

space-2xs ·

space-xs ·

space-sm ·

space-md ·

space-lg ·

space-xl ·

space-2xl ·

space-3xl ·

Raggi

radius-control

radius-card

radius-overlay

radius-pill

Elevazione

elevation-flat

elevation-raised

elevation-overlay

Spazi

Una scala su base 4px, con otto nomi. Tra un elemento e l'altro si usa sempre uno di questi.

Token	Valore	Uso tipico
`--grigna-space-2xs`	4px	Tra icona e testo piccolo
`--grigna-space-xs`	8px	Tra elementi dello stesso gruppo
`--grigna-space-sm`	12px	Margine interno dei campi, tra righe di dati
`--grigna-space-md`	16px	Margine interno delle schede, margine laterale su mobile
`--grigna-space-lg`	24px	Tra gruppi diversi
`--grigna-space-xl`	32px	Tra sezioni
`--grigna-space-2xl`	48px	Sopra i titoli di sezione
`--grigna-space-3xl`	64px	Respiro di pagina

Regola pratica: più due cose sono legate, più stanno vicine. Gli spazi crescono passando da "dentro un elemento" a "tra elementi" a "tra sezioni".

Raggi

Token	Valore	Uso
`--grigna-radius-control`	8px	Bottoni, campi
`--grigna-radius-card`	12px	Schede, pannelli
`--grigna-radius-overlay`	16px	Finestre di dialogo, fogli dal basso
`--grigna-radius-pill`	tondo	Badge, filtri, etichette di stato

Gli angoli sono generosi, per un tono amichevole. Un bordo su un solo lato non si arrotonda.

Elevazione

Tre livelli. Più un elemento è "sopra" la pagina, più ombra ha.

Token	Uso
`--grigna-elevation-flat`	Elementi nel flusso della pagina: nessuna ombra
`--grigna-elevation-raised`	Schede
`--grigna-elevation-overlay`	Menu, finestre di dialogo, fogli dal basso, hover delle schede cliccabili

Nel tema scuro le ombre si vedono poco: l'elevazione si legge soprattutto da surface-raised, che è più chiara della pagina. Per questo un elemento elevato usa sempre entrambi: superficie e ombra.

Misure

Token	Valore	Uso
`--grigna-size-touch-target`	44px	Area minima di tocco di ogni elemento interattivo
`--grigna-size-text-min`	16px	Dimensione minima del testo corrente
`--grigna-size-icon-sm` / `-md` / `-lg`	16 / 20 / 24px	Icone
`--grigna-size-focus-ring`	2px	Spessore dell'anello del focus

Layout

Token	Valore	Uso
`--grigna-size-page-max`	1200px	Larghezza massima del contenuto della pagina, centrato
`--grigna-size-card-min`	280px	Larghezza minima di una scheda in una griglia

Una griglia di schede che si adatta da sola a telefono e computer:

.pagina { max-width: var(--grigna-size-page-max); margin-inline: auto; padding-inline: var(--grigna-space-md); }
.schede { display: grid; gap: var(--grigna-space-lg);
          grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grigna-size-card-min)), 1fr)); }

Punto di rottura: 768px. Sotto è telefono, sopra è tablet e computer. Nelle media query il CSS non accetta variabili, quindi è l'unico valore che si scrive a mano: @media (min-width: 768px). Prima di usarlo, chiediti se una griglia che si adatta da sola non basta già.

(Valori scelti il 30/10/2026.)

Per gli agenti

Sempre

margin, padding e gap con --grigna-space-*.
border-radius con --grigna-radius-*.
box-shadow con --grigna-elevation-*, insieme a --grigna-color-surface-raised.
Elementi interattivi alti almeno --grigna-size-touch-target.
Larghezza della pagina con --grigna-size-page-max, griglie di schede con --grigna-size-card-min.
Nelle media query solo il punto di rottura 768px.

Mai

Mai valori in px scritti a mano per spazi, raggi e ombre (fanno eccezione i bordi da 1px).
Mai valori "a metà" (10px, 14px, 20px di spazio): se servono davvero, si aggiungono al sistema e non si improvvisano.
Mai ombre colorate o sfumate fatte a mano.