Colors
Item (interactive fills)
Text
Background
Border
Link
Typography
Heading 1 · 36px
Heading 2 · 30px
Heading 3 · 24px
Heading 4 · 20px
Heading 5 · 18px
Heading 6 · 16px
Body XL · 20px — The quick brown fox jumps over the lazy dog
Body LG · 18px — The quick brown fox jumps over the lazy dog
Body MD · 16px — The quick brown fox jumps over the lazy dog
Body SM · 14px — The quick brown fox jumps over the lazy dog
Body XS · 12px — The quick brown fox jumps over the lazy dog
Light 300
Regular 400
Medium 500
Semibold 600
Bold 700
Spacing
Motion
Duration
| Token | Valore | Uso |
|---|---|---|
motion.duration.fast | 120ms | Stati interattivi ordinari |
motion.duration.base | 160ms | Entrata/uscita di micro-elementi |
motion.duration.slow | 220ms | Transizioni più percepibili ma brevi |
motion.duration.spin | 600ms | Spinner e indicatori continui |
Easing
| Token | Valore | Uso |
|---|---|---|
motion.easing.standard | cubic-bezier(0.2, 0, 0, 1) | Colore, bordo, ombra, opacity |
motion.easing.emphasized | cubic-bezier(0.2, 0, 0, 1.2) | Micro-movimenti e toggle |
motion.easing.linear | linear | Rotazioni continue |
Radius · Shadow · Border
Radius
none
xs · 2
sm · 4
md · 6
lg · 8
xl · 12
full
Shadow
xs
sm
md
lg
xl
Border width
thin · 1
thick · 2