Colori, spazi e temi

Ogni sito ha il suo design system: i colori, la tipografia, gli spazi e le forme da cui attingono tutte le pagine. Un valore lo cambi una volta sola, come token, e lo seguono tutte le pagine e i componenti che lo usano. Qui trovi colori, spazi e forme, e temi; la tipografia ha una pagina a parte.

Prima di iniziare #

• Ti serve il ruolo Amministratore, oppure quello di Editor di contenuti con l'area aperta da un Amministratore. Di base un Editor di contenuti modifica la tavolozza e vede soltanto il resto. L'Autore dei contenuti il Design System non lo vede affatto.
• Il sito nasce da un blueprint: il suo design system parte dai valori del blueprint, e quello che cambi viene salvato come personalizzazione del sito. Puoi sempre tornare indietro.
• Se il sito segue ancora il blueprint, la Panoramica ti propone prima Imposta il brand: da poche scelte ricava tavolozza, ruoli, tipografia e spaziature. Su un sito nuovo parti da lì, poi rifinisci qui.

Orientarsi #

1. Nella barra laterale del sito apri Design System. Le pagine sono Panoramica, Impostazione del brand, Colori, Tipografia, Spazi e forme, Superfici, Componenti, Temi e Campionario.
2. La barra in alto in ogni pagina decide cosa vedi: Tema (il tema degli esempi), la larghezza (Desktop, Tablet, Mobile) e Modificato rispetto al blueprint, che nasconde i token che non hai toccato.
3. La Panoramica mostra Stato del sistema (errori e avvisi, come Contrasto sotto AA o Token non usati), Modificato rispetto al blueprint (ogni personalizzazione, col valore del blueprint accanto a quello del sito), Istanze scollegate e Permessi dei ruoli.

Cambiare un ruolo di colore #

Testo, superfici, bordi e accento sono ruoli: ognuno punta a un passo di una scala della tavolozza, oppure ha un colore proprio. Conviene cambiare i ruoli e non i colori grezzi: così ogni componente che usa il ruolo si aggiorna da solo.

1. Apri Colori. In cima, Ruoli mostra come appaiono testo, superfici, bordi e accento in ogni tema.
2. Scorri fino a Ruoli semantici. Ogni riga dice a cosa punta il ruolo e da quanti elementi è Usato da.
3. Scegli Modifica sul ruolo.
4. Scegli un Passo della palette, oppure Colore proprio e inserisci il valore. La riga ti dice in quale tema e set stai scrivendo (Modifica {theme}, nel set {set}.).
5. Aspetta il controllo. Ogni coppia supera AA. Pronto da salvare. vuol dire che puoi salvare; Alcune coppie scenderebbero sotto AA. Scegli un altro colore per salvare. vuol dire di no.
6. Scegli Salva.

Cambiare un passo della tavolozza #

1. In Colori trova Scale cromatiche. I gradini col bordo pieno sono del sito; quelli tratteggiati derivano da questi e cambiano quando cambi la loro origine.
2. Scegli un gradino e scrivi l'esadecimale in Esadecimale di {step}.
3. Scegli Salva.

Cambiare un token qualsiasi dal pannello #

Tutte le tabelle di token (in Colori, Spazi e forme e Tipografia) aprono lo stesso pannello.

1. Scegli il nome di un token in una tabella. Si apre il pannello Token di design con Nome, Set, Valore risultante e il valore del Blueprint.
2. Scegli Valore per scrivere un valore, o Token per farlo puntare a un altro token (restringi l'elenco con Filtra i token). Un riferimento è meglio di una copia: segue il token a cui punta.
3. Leggi Anteprima prima del salvataggio. Nessun avviso. vuol dire che la modifica è pulita.
4. Scegli Salva. Annulla modifica, nella barra in alto, annulla l'ultimo salvataggio.
5. Per togliere la tua personalizzazione scegli Ripristina dal blueprint nel pannello.

Per aggiungere un token scegli Aggiungi token sopra una tabella, dagli un nome di parole minuscole unite da - e segmenti separati da . (per esempio space.section.hero) e salva.

Cambiare spazi e forme #

1. Apri Spazi e forme. Spaziatura, Larghezze, Raggi, Bordi, Ombre, Durate, Curve di movimento, Opacità, Griglia, Breakpoint, Livelli, Dimensioni delle icone e Spessori delle icone hanno ciascuno la sua tabella.
2. Apri un token nel pannello e cambialo come sopra. Le lunghezze hanno i pulsanti Valore precedente della scala e Valore successivo della scala: ti muovi lungo la scala invece di scrivere a mano.
3. Salva.

Per stringere o allargare in un colpo solo un intero gruppo di spaziature, dai al gruppo un fattore di scala invece di cambiare ogni valore. Scegli Aggiungi token sopra Spaziatura, chiamalo scale dentro il gruppo (per esempio space.section-y.scale) e dagli un numero: 0.75 stringe del 25 % tutte le spaziature delle sezioni, 1.2 le allarga del 20 %. space.scale scala tutte le spaziature. Ogni lunghezza del gruppo viene moltiplicata, anche quando è un alias della scala di base, e la tabella mostra il fattore come × 0.75 accanto alle lunghezze già scalate. Per tornare indietro rimettilo a 1, o eliminalo.

Aggiungere e applicare un tema #

Un tema cambia un insieme di valori dei token: un tema scuro, un marchio secondario, lo stile di una sezione.

1. Apri Temi. Ogni scheda mostra un tema e Dove si applica: tutto il sito dove nessun altro tema si applica (il predefinito), Tutto il sito, per chi preferisce lo schema chiaro o scuro, Una pagina (per indirizzo, per esempio /negozio), oppure Le sezioni che lo scelgono.
2. Per crearne uno apri Avanzate e scegli Nuovo tema nella matrice dei temi. Dagli una Chiave e un'Etichetta, scegli Parti da e i Set attivati, poi Crea tema.
3. Un tema nuovo nasce in Bozza: lo vedi nelle anteprime, e una pubblicazione lo porta online solo sulle sezioni che lo usano (la pubblicazione dice quali temi in bozza sono andati online). Guardalo con Anteprima nell'editor, poi togli lo stato di bozza nella matrice perché valga anche la sua regola (schema di colori, dominio, percorso).
4. Per usarlo su una sola sezione, selezionala nell'editor, apri Stili e sceglilo in Tema della sezione.

Decidere chi può modificare #

Lo può fare solo l'Amministratore.

1. Apri Panoramica e scorri fino a Permessi dei ruoli.
2. Per ogni Area (Tavolozza, Colori semantici, Famiglie di caratteri, Componenti, Varianti, Temi e così via) scegli il livello per Editor e Cliente: Nessun accesso, Visualizza, Modifica e, in alcune aree, un livello intermedio (Scegli varianti, Cambia predefinito, Esporta, Solo aree modificabili).

Cosa vedi #

• Un token cambiato riporta Modificato nella sua tabella e compare in Modificato rispetto al blueprint nella Panoramica.
• Un ruolo che puoi solo guardare riporta Sola lettura.
• Ogni salvataggio finisce nell'Attività, per esempio come "ha modificato un token del design system".

Errori comuni #

• Non salvato: un'altra modifica è stata salvata prima. Qualcuno ha salvato il design system dopo che l'hai aperto. È stato ricaricato: rifai la modifica.
• Non salvato: il tuo ruolo non può modificare quest'area. Chiedi all'Amministratore di aprirla al tuo ruolo in Permessi dei ruoli.
• Ripristina il blueprint (in Altre azioni, nella barra in alto) riporta indietro tutte le personalizzazioni della pagina in cui sei: in Colori, tutti i token di colore. Si può annullare, ma guarda prima il numero nella conferma.
• Il tema predefinito non può essere una bozza, e un tema in bozza non può essere il predefinito.
• Le modifiche al design system arrivano sul sito pubblico solo quando pubblichi.

Vedi anche #

• Componenti e varianti
• Tipografia e font
• Il tuo primo sito (impostazione del brand)
• Pubblicazione e versioni