Non ti do uno screenshot. Cambialo tu.
L'aspetto di un progetto non è un foglio di stile da scrivere: è un catalogo di scelte indipendenti, che oltre novanta componenti leggono e un compilatore ridipinge a caldo. Qui c'è come funziona — e il laboratorio, dove lo provi su un'applicazione vera, è la pagina accanto.
Sei assi indipendenti, e uno solo da scegliere
Non ci sono «temi» da prendere o lasciare: ci sono assi che si combinano. Cambiare la palette non ti fa perdere il carattere grafico, e cambiare il carattere non ti fa perdere la palette. Ogni scheda apre il laboratorio proprio sul suo asse.
Il temperamento di tutto: bordi, ombre, superfici, spessori, quanto respira una schermata. È l'unica scelta che serve fare — le altre hanno già una risposta buona.
Due colori che decidono i venti che ne derivano: il primario, l'accento, e la scala di grigi che ci sta bene accanto.
Un'accoppiata titolo/testo pensata insieme, non due caratteri messi vicino. Si carica solo quella scelta.
Come entrano le cose e con che ritmo: dal fermo all'elastico. È un asse, quindi si spegne.
Cinque piani di una pagina, ognuno col suo riempimento — e per alcuni caratteri è un campo che si muove e segue il cursore.
Chiaro e scuro non sono due temi da mantenere: sono lo stesso tema letto due volte. Ogni componente sa già starci in entrambi.
«Dallo stile» non è un valore vuoto
Un asse che non dichiari non prende un valore neutro: non c'è, e allora vale quello che il carattere grafico ha scelto per sé — che è la scelta di chi quel carattere l'ha disegnato. Ecco perché una schermata nasce già coerente con una riga sola, e perché una palette scelta a caso non la rovina: fin quando non tocchi un asse, non c'è nessuna combinazione da azzeccare.
{
"design": "on",
"theme": {
"style": "editorial"
}
}{
"design": "on",
"theme": {
"style": "editorial",
"color": "bordeaux",
"animation": "calm"
}
}Oltre novanta componenti, e sanno già stare insieme
Non è una libreria di bottoni: è l'inventario di quello che serve a un'applicazione, dal telaio della pagina al pianificatore settimanale. Tutti leggono il tema, quindi cambiarlo ridipinge anche quello che hai scritto tu.
Il guscio di un sito e quello di un'applicazione: barra, menu, colonna laterale, piede, e la navigazione filtrata su chi sta guardando.
Tabelle ordinabili, elenchi, schede, riepiloghi, grafici, calendari, pianificatori. Tutti col tema addosso e tutti che si stringono su un telefono.
Campi, date, scelte, caricamento di file, codici a cifre, validazione. Un campo sa già dire cosa non va e dove.
Elenco delle chat, filo dei messaggi, campo di scrittura, spunte di lettura, «sta scrivendo». Serve a una chat come al pannello di un agente.
Aperture, mosaici, gallerie, citazioni, loghi, prezzi, domande e risposte, fasce che chiedono. Un elenco di cose in undici disposizioni, cambiando una parola.
Alcuni componenti non aspettano il dato: lo chiedono. Il pannello d'accesso, il selettore dello spazio di lavoro, il visore di un file, la chat di un agente.
Se ti serve un componente che non c'è, si aggiunge al progetto e da quel momento è del progetto — l'agente lo usa come usa gli altri.
Tre vie d'uscita, in ordine di quanto costano
Un design system che non si può disobbedire è una gabbia. Questo si scavalca a tre livelli diversi, e nessuno dei tre ti fa uscire dalla piattaforma.
- Il tuo marchio, su tutti i progetti
Un'identità visiva sta a livello di organizzazione: la definisci una volta e la indossano tutte le applicazioni che costruisci. Chi lavora per i clienti la cambia per cliente, non per schermata.
- Oppure disegni tu, da zero
Una schermata può spegnere il design system con una parola: da lì la grafica è tua, in Tailwind, con lo stesso kit di componenti sotto. Serve quando devi rifare fedelmente un prodotto che esiste già.
- E un componente si sostituisce
Se il bottone dev'essere diverso, metti il tuo file nel progetto e vince lui — solo lui, e solo dove serve. Non c'è un'esportazione da fare e il resto continua a essere aggiornato dalla piattaforma.
Spegnerlo è una parola
Una schermata con il design spento parte da un fondo neutro e da lì la grafica è tua, in Tailwind, con lo stesso kit di componenti sotto — che si ritinge da un punto solo se vuoi rifare fedelmente l'aspetto di un prodotto che esiste già. E la scelta è per schermata: il sito pubblico può indossare il design system mentre l'app per i clienti è disegnata a mano, nello stesso progetto.
{
"mount": "/",
"name": "Whisper",
"design": "off",
"auth": { "realm": "project" }
}E che si notano solo quando mancano
Sono la metà del lavoro di un design system, e sono anche la metà che in un progetto fatto di corsa non c'è mai.
Entrambi, sempre, senza una seconda serie di colori da tenere allineata.
Le tabelle, i grafici e i caroselli si stringono dentro la loro colonna invece di far scorrere la pagina di lato.
Se il sistema dice «meno movimento», il movimento non c'è. Non è un'opzione da ricordarsi: è nel tema.
Margini e spaziature sono dichiarati per inizio e fine, non per sinistra e destra: cambiare lingua ribalta il layout da sé.
Un asse a sé: chi ha bisogno di leggere meglio lo alza, e vale su tutto il kit.
Le pagine pubbliche sono HTML congelato: il tema è già dentro, e non arriva un foglio di stile da calcolare.
Anche i tuoi utenti, se vuoi
Il tema è un oggetto che si ricompila a caldo, quindi non è detto che debba deciderlo tu una volta per tutte: una schermata può offrire chiaro/scuro, o l'intero pannello del laboratorio, e la scelta segue la persona su ogni suo dispositivo.
Sai come si veste. Adesso provalo.
Il laboratorio è lo stesso pannello che nello Studio lavora sul tuo progetto — dove l'agente lo usa mentre costruisce, e si cambia parlando come tutto il resto.