Spaziatura & Geometria

Le scale di spaziatura a 4px, raggi di curvatura, altezze dei controlli e aree di tocco minime per garantire consistenza e armonia spaziale.

import '@qoovex/ui/styles/tokens.css'

Principi di layout e ritmo

Griglia Base a 4px

Ogni token di spaziatura deriva dal multiplo base --spacing: 0.25rem (4px). Garantisce ritmo verticale prevedibile ed evita disallineamenti di sub-pixel.

Raggio Proporzionale

La scala canonica deriva dal raggio base di 10px. Tra superfici nidificate la curvatura non si sceglie a occhio: R esterno = R interno + padding.

Target di Tocco Minimo (44px)

Tutti i controlli interattivi su dispositivi touch rispettano l'area di tocco minima --touch-target-min: 2.75rem (44px) per la conformità WCAG AA.

Scala di spaziatura semantica

Tutti i token di padding, margin e gap derivano dalla scala a 4px. Clicca su uno specimen per copiare la variabile CSS.

Space 10.25rem (4px)

--space-1Gap minimo tra icone e micro-testi, padding interno badge

Copia

Space 20.5rem (8px)

--space-2Spaziatura tra pulsanti compatti e all'interno di elementi lista

Copia

Space 30.75rem (12px)

--space-3Padding per bottoni, input e intestazioni compatte

Copia

Space 41rem (16px)

--space-4Padding standard per card, modali e distacco tra form field

Copia

Space 51.25rem (20px)

--space-5Padding per sezioni interne di schede complesse

Copia

Space 61.5rem (24px)

--space-6Gap tra sezioni principali di layout e margini di pagina

Copia

Raggi di curvatura (Border Radius)

La scala canonica deriva dal solo --radius: 0.625rem. Le superfici nidificate rispettano sempre la geometria concentrica: raggio esterno = raggio interno + padding reale; le pill restano pill.

Copia

Small0.375rem (6px)

--radius-sm

Geometrie compatte non-pill

Copia

Medium0.5rem (8px)

--radius-md

Controlli e superfici compatte

Copia

Large (Base)0.625rem (10px)

--radius-lg

Default Qoovex per componenti e superfici

Copia

Extra Large0.875rem (14px)

--radius-xl

Superfici ampie quando la proporzione lo richiede

Formula obbligatoria per il nesting

Questa proof usa un padding reale di 8px: il contenitore esterno misura 18px e il child 10px. I bordi corrispondenti rimangono concentrici perché 18 = 10 + 8.

R interno = max(0px, R esterno - padding)

La formula usa l'inset effettivo per ciascun angolo, non il nome approssimativo di un token.

Eccezione semantica: pill

Badge, switch, indicatori e controlli dichiaratamente pill conservano rounded-full; non vengono convertiti nella scala sottrattiva.

Pill invariata

Altezze controlli & Target di tocco

Dimensioni unificate per controlli di input e pulsanti per garantire allineamento orizzontale e accessibilità tattile su schermi touch.

Icona Standard

--icon

1rem (16px)

Dimensioni delle icone inline, leading/trailing nei pulsanti e nei campi.

Controllo Compatto

--control

2rem (32px)

Altezza standard di bottoni compatti, switch e badge operativi.

Controllo Prominente

--control-lg

2.5rem (40px)

Campi di input principali, pulsanti primari e trigger di selezione.

Target di Tocco Minimo

--touch-target-min

2.75rem (44px)

Area minima calcolata per interazioni touch senza collisioni.

Elevazione & Ombre semantiche

Le ombre forniscono profondità e separazione visiva per elementi in sovrapposizione e livelli di interazione.

2XS

--shadow-2xsBordi minimi e accenti leggeri

--shadow-xsElementi piatti e controlli inline

--shadow-smCard standard e bottoni in hover

--shadow-mdDropdown e menu contestuali

--shadow-lgModali, dialog e fogli laterali

XL / 2XL

--shadow-xlOverlay e layer di massimo rilievo

Guida pratica Tailwind CSS

Come combinare le utility di spaziatura, raggio e dimensione nei componenti.

Padding, Margin & Gap

Usa i token --space per mantenere il ritmo a 4px.

/* Card con padding 16px e gap 8px */
<div className="p-[var(--space-4)] gap-[var(--space-2)] flex flex-col">
  <h2>Titolo</h2>
  <p>Contenuto</p>
</div>

Altezza Controlli & Raggi

Usa le utility semantiche per bottoni e superfici.

/* Controllo con altezza e raggio canonici */
<button className="h-[var(--control)] rounded-md px-3 text-sm">
  Azione
</button>

/* Nesting: R esterno = R interno + padding */
<div className="rounded-[calc(var(--radius)+var(--space-2))] p-[var(--space-2)]">
  <div className="rounded-[var(--radius)]">Contenuto</div>
</div>

/* Area touch minima 44px garantita */
<button className="min-h-[var(--touch-target-min)] px-4">
  Touch Action
</button>