Design System · v1
Fonte di verità dei token, dei componenti e degli stati. Ogni pagina deve consumare solo token da qui, nessun valore hardcoded.
Token
Semantici, organizzati per ruolo. Cambiali in globals.css → tutta l'app si adegua.
Sfondi di superfici e container
Colori testo corrispondenti agli sfondi
Bordi, input, anelli di focus
Colori identità, unici e usati con parsimonia
Segnali: errore, successo, avviso
Una coppia per ogni canale di prenotazione (OTA + diretta)
Token
Host Grotesk · scala armonica Tailwind · pesi 400/500/600
Un solo font per tutto: coerenza prima di tutto
Usa sempre le utility Tailwind, niente font-size custom
Ne bastano tre
Token
--radius: 0.875rem · tutti gli altri derivano da qui
Componenti
Tutte le varianti shadcn
Componenti
Default per tutti i form. Stile Airbnb: alto, label che galleggia all'interno, bordo grigio chiaro che diventa primary in focus.
Lo usiamo per mandarti il link di accesso.
Numero non valido.
Es. Via Brera 1
Componenti
Dropdown con la stessa estetica del FloatingInput. Da usare ovunque accanto a un FloatingInput per mantenere allineamento visivo.
Componenti
Versione piccola per tabelle, dropdown, filtri. NON usare nei form principali.
Componenti
Per inserire il codice ricevuto via email/SMS. 6 caselle di default, auto-advance al digitare, supporta paste del codice intero.
Valore corrente: vuoto
Componenti
Componenti
Componenti
Iniziale + colore canale. Usato nelle pillole del calendario e nelle liste prenotazioni.
Componenti