Riferimento interno · design system
Carta, ottone, verde bottiglia
Questa pagina è la fonte di verità visiva di buked. Ogni componente è mostrato negli stati in cui lo si incontra davvero — anche quelli che di solito si dimenticano: vuoto, in corso, disabilitato, sbagliato. Cambia il tema qui sopra: tutto deve reggere in entrambi.
Colore
Superfici
Tre profondità e basta: carta, foglio, incasso. Nessun neutro è grigio puro — hanno tutti dentro una punta di verde.
--paper fondo della pagina--surface card, finestre--surface-2 codice, celle, incassiInchiostri
Tre pesi di testo. Il terzo (muted) resta sopra 4.5:1 sulla carta: i metadati si devono leggere.
--ink testo principale--ink-2 testo secondario--muted metadati, suggerimentiLinee
Una linea per separare, una per delimitare: i bordi dei campi devono pesare più delle divisioni.
--line divisioni, bordi delle card--line-strong bordi dei controlliMarchio
Verde bottiglia per i comandi, verde leggibile per il testo, ottone per ciò che va notato senza gridare.
--bottle fondo dei comandi primari--bottle-2 link e accenti di testo--brass etichette, filetti, anello di fuocoStati
Il verde "ok" è diverso dal verde del marchio: se coincidessero, ogni schermata sembrerebbe dire «tutto a posto».
--ok confermato, seduto--warn in scadenza, in attesa--danger errore, rinuncia--info nota di sistemaTipografia
Una sola scala a rapporto costante 1.2. I titoli sono in serif con interlinea stretta, il corpo in sans con interlinea larga: due voci diverse, come il nome di un piatto e la sua descrizione.
La sala è pronta
Prenotazioni di stasera
Servizio serale
Tavolo 12 — terrazza
Quattro coperti alle 20:30
Le esigenze alimentari vanno alla cucina.
Ultimo aggiornamento un minuto fa
IN ATTESA DI CONFERMA
Misura di lettura
La colonna di testo si ferma a circa 65 caratteri. Oltre quella misura l'occhio, arrivato in fondo alla riga, fatica a ritrovare l'inizio di quella dopo: si rilegge la stessa riga due volte e ci si stanca. È il motivo per cui i giornali hanno le colonne strette e i menù pure.
Titoli bilanciati
Un titolo che va a capo per caso e lascia una parola orfana
text-wrap: balance distribuisce le righe di un titolo in modo che abbiano
lunghezza simile. È l'ultimo 5% che distingue una pagina composta da una pagina scritta.
Bottoni
Quattro varianti, due misure. Un solo primario per schermata: se tutto è primario, niente lo è. Il distruttivo è bordato e non pieno, perché in sala il dito va veloce.
Lo stato «in corso» non è lo stato «disabilitato»: il primo dichiara aria-busy e resta acceso, il secondo si spegne. Il bottone in attesa è
comunque bloccato, perché un doppio invio crea due prenotazioni.
Moduli
Ogni campo porta con sé etichetta, suggerimento ed errore già collegati con for, aria-describedby e aria-invalid: è la parte che
scritta a mano si sbaglia una volta su tre.
Campi
Serve solo a ritrovare la prenotazione da un altro telefono.
Passeggini, sedie alte, tavolo lontano dalle casse.
Stati del campo
Conta anche chi prenota.
Il numero è incompleto: servono almeno dieci cifre.
Assegnato dal sistema.
Controllo su misura, agganciato alla stessa etichetta.
Superfici ed etichette
Servizio serale
Tavolo 12
Terrazza · quattro coperti · 20:30
Una card normale: intestazione, corpo, piede facoltativo.
Con comandi
I comandi stanno nell'intestazione.
L'azione appartiene al blocco che governa, non a una barra lontana in fondo alla pagina.
Password provvisoria
Il filetto d'ottone segna ciò che va letto adesso e non si ripeterà.
tavolo-9-brace
Card cliccabile
Tutta la superficie è il comando.
Si alza di un pixel e il bordo si scalda d'ottone. Niente di più.
Etichette di stato
Pastiglie selezionabili
Selezionate: TERRACE.
Schede
Frecce per spostarsi, Home e Fine per andare agli estremi, tabulatore per uscire dalla lista. La scheda disattivata resta annunciata: sapere che una sezione esiste ma è chiusa è un'informazione.
Coperti stasera
94
+12% in aumento rispetto a ieri
Tavoli liberi
6su 28
−2 in calo ultima mezz'ora
Attesa media
18min
−4 min in calo rispetto a ieri
Rinunce
3
+1 in aumento oggi
Riscontri
Attesa, vuoto, avvisi, finestre modali: tutto ciò che dice all'utente cosa sta succedendo.
Attesa
Il cerchietto non sostituisce mai il testo: «Un attimo…» è ciò che si legge e ciò che l'assistenza vocale annuncia.
Avvisi
Gli errori restano finché non li si chiude e vengono annunciati subito (regione assertive); il resto sparisce da solo.
Finestre modali
Costruite sul <dialog> nativo: trappola del fuoco, Esc e inerzia della
pagina sotto arrivano dal browser, non da un nostro sostituto.
Stato vuoto
Nessun evento in programma
Gli eventi che crei compaiono qui con il loro stato di raccolta. Il primo si crea in meno di un minuto: servono solo nome, data e luogo.
Numeri
Il numero è in serif e grande, l'etichetta sta sopra in maiuscoletto: da due metri si legge prima la cifra. La variazione non dice mai «bene» da sola — le rinunce che salgono sono una cattiva notizia, quindi il verso positivo è un parametro.
Coperti stasera
94
+12% in aumento rispetto a ieri
Aggiornato un minuto fa
Rinunce
7
+3 in aumento oggi
Stesso segno, lettura opposta
Scontrino medio
38€
0 stabile stabile
Nuovo locale
—
Nessuna serie ancora
Impaginazione
Tre utility, tutte basate su gap: lo spazio appartiene al contenitore, non ai
figli. Così non esistono margini che collassano né «il primo elemento ha un margine di
troppo».
stack
Colonna. --stack-gap per cambiare passo.
cluster
Riga che va a capo. --cluster-gap, --cluster-align.
grid-auto
Colonne che si adattano. --grid-min per la larghezza minima.