Card strumento
Da usare per elementi di catalogo, metriche, riepiloghi di funzionalità e anteprime leggere.
Token
Colore, spaziatura, raggio e movimento
I token sono l'unica fonte di verità consentita per le primitive visive. Le nuove pagine devono consumarli, non ridefinirli.
Sfondo
Superficie
Accento
Raggio
6 / 10 / 16
Usa solo `sm`, `md`, `lg`.
Spaziatura
8-32
La maggior parte della UI rientra nella banda di spaziatura principale.
Movimento
150-220ms
Le transizioni devono rimanere leggere e rapide.
Tipografia
Gerarchia leggibile con densità compatta
H1 della pagina: identità principale della pagina
Sezione H2: blocco di contenuto principale
Gruppo di card H3: raggruppamento secondario
Card H4: titolo standard della card
Il testo introduttivo è riservato ai brevi intro di pagina e alle descrizioni esplicative.
Il testo del corpo è il livello predefinito per testi di aiuto, descrizioni degli strumenti e spiegazioni dei risultati.
La didascalia è usata per metadati, contatori, note di campo e testi secondari.
Card
Contenitori di contenuto standardizzati
Card elenco
Da usare per righe di risultati, strumenti correlati, elenchi di salto o blocchi della cronologia recente.
Controlli
Pulsanti, campi, pillole e linguaggio di stato
Pattern
Composizione di pagina riutilizzabile
!
Avviso principale
Usa blocchi di avviso per testi di aiuto, messaggi sulla privacy o limitazioni dello strumento.
| Livello | Caso d'uso |
|---|---|
| Token | Colore, tipografia, spaziatura, movimento |
| Base | Primitive di tipografia e layout |
| Componente | Pulsanti, card, controlli dei moduli |