# Disegno del sito Hotminds — inventario Prototipo di **fase di disegno**: HTML e CSS semplici, nessun framework, nessuna build. Si apre `index.html` nella radice del progetto e si naviga. Non è il prodotto: è il vincolo con cui il prodotto verrà scritto. ## Come è organizzato | File | A cosa serve | |---|---| | `design/tokens.css` | I fondamenti: caratteri, scala tipografica, colori per ruolo, spaziature, raggi, ombre, tempi. **Unico file con valori grezzi.** | | `design/components.css` | Tutti i componenti, una definizione ciascuno. Usa solo variabili di `tokens.css`. | | `design/design.js` | I comportamenti: menu, tendine, finestra di dialogo, notifiche, elenco filtrabile, validazione del modulo. Genera anche intestazione e piè di pagina. | | `design/dati.js` | Dati finti del catalogo (12 prodotti, 4 categorie). Nel prodotto vero li sostituisce il backend: la forma delle voci è il contratto minimo. | | `design/components/index.html` | Galleria: ogni componente con **tutti** i suoi stati. | | `design/screens/*.html` | Le quattro schermate. | **Intestazione e piè di pagina non sono copiati in ogni pagina**: sono generati da `design.js` a partire da un'unica definizione (`NAVIGAZIONE`, `AZIENDA`). Aggiungere una voce di menu è una riga sola, e menu e piè di pagina non possono divergere. Ogni pagina dichiara sul `` due attributi: `data-pagina` (evidenzia la voce attiva) e `data-base` (prefisso per raggiungere `design/screens/` da dove si trova il file). ## Caratteri | Ruolo | Famiglia | Provenienza | Licenza | |---|---|---|---| | Titoli e testo | Figtree (400/500/600/800) | Google Fonts | SIL OFL 1.1 | | Parola accentata nei titoli | Caveat Brush | Google Fonts | SIL OFL 1.1 | Sono **sostituti** scelti in fase di disegno: il carattere del marchio è commerciale e non è incluso. Chi costruirà il prodotto deve sostituirli con quelli licenziati dal cliente e auto-ospitarli — l'import remoto in `tokens.css` va bene per la revisione, non per la produzione. Le pile di fallback tengono la pagina leggibile anche senza rete. ## Componenti e stati | Componente | Classe | Stati previsti | |---|---|---| | Bottone | `.bottone` | primario, secondario, fantasma, pericolo · normale, hover, fuoco, premuto, **in corso**, **disabilitato** · misure normale/piccolo/largo | | Collegamento con freccia | `.link-avanti` | normale, hover, fuoco · variante `