# [Il tuo nome o progetto] · Design system Kit vuoto da fabiostaiano.it/design-system/. Le regole di base sono già scritte e valgono per qualsiasi marchio; i posti segnati **[DA SCEGLIERE]** sono tuoi. I valori stanno in `tokens.css` e `tokens.json`: colori neutri e un accento segnaposto che funzionano subito, in chiaro e in scuro. **Come riempirlo con un assistente AI.** Dai questo file e i due file dei token a Claude o ChatGPT, insieme al tuo sito o a qualche schermata, e scrivi: *"Compila ogni [DA SCEGLIERE] di questo design system guardando il mio sito. Non toccare le regole di base. Aggiorna tokens.css e tokens.json con gli stessi valori."* Poi rileggi: l'assistente propone, tu decidi. ## Le regole che non si rompono Le regole 1, 2, 3, 5 e 6 di questo kit sono la 2, la 4, la 6, la 7 e la 8 del design system di fabiostaiano.it, senza il marchio. La 4, la 7 e la 8 di questo kit sono di metodo: dicono come si lavora, non come appare. 1. **Un solo accento per composizione.** Il colore dell'accento va a una cosa sola per schermata, quella che conta. Tutto il resto sta nei neutri. 2. **Il più grande è il più contrastato.** Ciò che è più importante è più grande e più contrastato. Mai due cose diverse con lo stesso peso. 3. **Accessibile per regola.** Contrasto del testo almeno 4,5:1, 3:1 per i titoli grandi e i bordi che servono a capire. Aree toccabili da 44×44 px. Con "riduci movimento" le animazioni si fermano. Il colore non porta mai da solo un significato. 4. **Il focus si vede.** Ogni elemento raggiungibile da tastiera ha un contorno visibile. Mai `outline:none` senza un sostituto. 5. **Testo centrato sui glifi veri.** Quando un titolo sta in una tessera o su un asse, si centra sul disegno delle lettere, non sulla scatola del font. 6. **Leggero e vettoriale prima.** Logo, icone e illustrazioni in SVG; le immagini raster solo per le foto, in WebP o AVIF alla misura in cui si mostrano. Font in WOFF2, solo i pesi e i caratteri che servono. Il peso di una pagina si misura prima di pubblicarla. 7. **Chiaro e scuro dagli stessi token.** Le pagine usano i nomi (`--paper`, `--ink`), mai i colori scritti a mano. Un tema cambia i valori, non le pagine. 8. **Un valore in due posti diventa un token.** Se un colore, una misura, un'ombra o un livello serve due volte, ha un nome in `tokens.css`. ## Fondamenta ### Colore - **Neutri.** Già pronti in `tokens.css`, in chiaro e in scuro: `--paper` (sfondo), `--wash` (superfici), `--line` (bordi), `--muted` (testo secondario), `--ink` (testo principale). Puoi scaldarli o raffreddarli: tieni i contrasti della regola 3. - **Accento.** `--accent` è un segnaposto. **[DA SCEGLIERE: il tuo colore principale, in esadecimale, e la sua versione per lo scuro]**. Controlla che `--on-accent` (il testo sopra l'accento) arrivi a 4,5:1. - **Colori di supporto.** **[DA SCEGLIERE: al massimo tre, solo per illustrazioni e grafici, mai per il testo piccolo. Se non servono, scrivi "nessuno"]**. - **Errori e conferme.** Una frase che dice cosa fare, oltre al colore. **[DA SCEGLIERE: se usi un rosso per gli errori, il suo valore]**. ### Tipografia - **Titoli:** **[DA SCEGLIERE: font, pesi]**. Nel kit: i font di sistema. - **Testo:** **[DA SCEGLIERE: font, peso normale e forte]**. Corpo 16 px, interlinea 1,5, righe al massimo di 64 caratteri. - **Etichette e numeri:** **[DA SCEGLIERE: font, di solito un monospaziato o un maiuscolo spaziato]**. - **Scala:** **[DA SCEGLIERE: 5-6 misure, dal titolo più grande alla nota]**. Una misura nuova si aggiunge qui prima di usarla. ### Griglia e spazi - **Contenitore:** `--max` (1120 px nel kit) con `--gutter` ai lati. Contenuto e footer partono dallo stesso bordo. - **Spazi:** multipli di 4 px (`--s-1` … `--s-8`). Niente valori a occhio. - **Punti di rottura:** **[DA SCEGLIERE: di solito 560, 760, 1100 px]**. ### Forme e profondità - **Angoli:** **[DA SCEGLIERE: squadrati (0) o arrotondati (es. 8 px)]**. Una scelta sola per l'interfaccia; le pillole (tag, chip) possono essere tonde. - **Ombre:** **[DA SCEGLIERE: nessuna, morbide o dure]**. Al massimo due: una per le superfici sollevate, una per i dialog. ### Movimento - Tempi brevi: 0,2 s per colori e bordi, 0,35 s per le dissolvenze, 0,5 s per gli spostamenti. - Un'animazione accompagna un gesto (passaggio, clic, comparsa), non decora. Regola 3 sempre. ### Icone - **[DA SCEGLIERE: set di icone o disegnate a mano; tratto o pieno; misura (es. 20 px)]**. Un'icona da sola ha sempre un nome accessibile. ## Marchio ### Logo - **[DA SCEGLIERE: versioni (su chiaro, su scuro), misura minima, area di rispetto]**. ### Illustrazioni - **[DA SCEGLIERE: stile in una frase, palette ammessa, cosa non si disegna mai]**. Anche qui vale la regola 1: un solo protagonista colorato. ### Tono di voce - **[DA SCEGLIERE: tre aggettivi e un esempio di frase giusta e una sbagliata]**. - Valgono sempre: frasi corte; il bottone dice cosa succede, con un verbo (*Iscriviti*, mai *Invia* o *Clicca qui*); gli errori dicono cosa fare; niente gergo dove basta una parola normale. ## Interfaccia ### Componenti - **Bottone principale:** fondo `--ink` (o `--accent`), testo `--paper`, almeno 44 px di altezza. - **Bottone vuoto:** bordo in `--line` che passa a `--ink` al passaggio. - **Campo:** bordo visibile, alto almeno 44 px, etichetta sempre presente (il segnaposto non basta). L'errore è una frase sotto il campo. - **Link:** sottolineato, nel colore `--link`. - **Dialog:** si chiude con Esc e con un bottone da 44×44 px; il fuoco entra nel dialog e poi torna dov'era. - **Tag:** pillola piccola, bordo `--line`, testo `--muted`. - **[DA SCEGLIERE: altri componenti del tuo progetto, uno per riga, con dove vivono]**. ### Stati e interazione - **Focus:** contorno 2 px `--link`, distanza 2 px, uguale su ogni elemento. - **Passaggio:** bottone pieno con opacità 0,86; bottone vuoto con il bordo in `--ink`; link con la sottolineatura più marcata. - **Disabilitato:** opacità 0,5 e una frase che dice perché. Mai solo il colore. ### Pagine - I valori arrivano da `tokens.css`, una volta sola. Le pagine non scrivono colori, font o ombre nuove. - **Inventario:** un componente vive in un posto solo. **[DA SCEGLIERE: elenca qui i tuoi componenti e il file in cui stanno]**. ## Canali - **[DA SCEGLIERE: social, email, presentazioni. Per ognuno: formato, sfondo, cosa resta uguale al sito]**. ## File - `DESIGN.md`: queste regole, con il perché. - `tokens.css` e `tokens.json`: gli stessi valori, per il codice e per gli strumenti di design. - **Licenza:** CC BY 4.0. Usalo e modificalo come vuoi, anche al lavoro e per i clienti, citando fabiostaiano.it/design-system/.