Foundations
Type, radius, shadow, motion and icons, read live from this page in the current preset and mode. Colours have their own page: Colors.
Type
Body: …. Display: ….
Display--text-display · …$48,210
Page title--text-page-title · …Invoices
Section--text-section · …Recent activity
Card title--text-card-title · …This month
Input--text-input · …jane@example.com
Body--text-body · …Invoices are sent as soon as a project closes.
Small--text-small · …Updated 2 minutes ago
Caption--text-caption · …Showing 1 to 10 of 42
Radius and shadow
Motion
Overlays enter with a short fade and a 6px drop, never a scale. Reduced motion sets every duration to 0.
- --dur-fast
- …
- --dur
- …
- --dur-slow
- …
- --ease
- …
- --ease-out
- …
Icons
Lucide, at its own stroke. The Icon* names come from the barrel; any other Lucide icon can be imported from lucide-react directly. Size 16 matches control text.