Pittogrammi
Piccole e semplici risorse grafiche che migliorano i componenti chiave del web, comunicando idee in modo rapido ed efficace.
Letterali, funzionali e geometrici — i nostri pittogrammi distillano le idee nella loro forma più pura, trasmettendo uno scopo chiaro e una semplicità senza tempo.
Tipo
I pittogrammi Spaceship sono disponibili in due tipi: regolare e comp. Il tipo comp combina un pittogramma regolare con un'icona della Iconography Library di Spaceship, permettendoci di trasmettere concetti più complessi e specifici.
Versioni
Tutti i pittogrammi Spaceship sono disponibili in due versioni: piena (primaria) e outline (secondaria). La versione outline dovrebbe essere utilizzata solo quando un pittogramma necessita di meno peso visivo rispetto a pittogrammi, testo o componenti UI vicini. Questo aiuta a stabilire una gerarchia visiva nei layout complessi.
Costruzione
I pittogrammi si basano su un insieme di regole, dalla griglia di base ai parametri di gradiente e tratto, per garantire risultati coerenti ed equilibrati.
Dimensione
I pittogrammi Spaceship sono progettati per essere scalabili, mantenendo coerenza visiva e garantendo la migliore leggibilità. Nel nostro design system sono disponibili cinque dimensioni di pittogrammi.
Colori
I pittogrammi utilizzano generalmente una sola tonalità. L'unica eccezione è il tipo comp, che può includere colori del brand o di notifica, per i quali troverai maggiori informazioni di seguito. Per garantire coerenza nei contesti UI, i pittogrammi seguono i riferimenti cromatici del Spaceship Design System.
Colore predefinito
Il grigio è il colore predefinito per i pittogrammi e dovrebbe essere utilizzato per rappresentare messaggi, azioni o funzionalità. In casi eccezionali, può essere usato anche per i prodotti. I pittogrammi outline sono disponibili solo nel colore predefinito.
Colori del brand
SPS Blue, SPS Dark Gray o bianco possono essere utilizzati al posto del colore predefinito quando è necessario un maggiore impatto visivo o per rafforzare l'identità Spaceship. Consulta la pagina dei colori per ulteriori dettagli.
Colori del prodotto
Il colore principale del prodotto dovrebbe essere utilizzato per i pittogrammi nei contesti dedicati al prodotto (pagine prodotto, schede prodotto, ecc.) per tutti i prodotti attuali e futuri.
Colori di notifica
Questi colori dovrebbero essere utilizzati per rafforzare un messaggio di notifica. La versione comp deve essere usata solo nei messaggi di sistema generici e non negli stati di avviso.
Guida
Ecco alcuni esempi di cosa evitare nella creazione e nell'uso dei pittogrammi.
Non lasciare che gli elementi chiave del pittogramma regolare cadano nell'angolo in basso a destra.
Non utilizzare gradienti complessi o multicolore nelle versioni piene.
Non mescolare elementi pieni e outline nel tipo comp.
Non utilizzare altri colori nelle versioni piene oltre a quelli identificati sopra.
Non utilizzare alcun colore nelle versioni outline oltre al colore predefinito.
Non combinare il colore predefinito con altri colori diversi dal colore primario del brand Spaceship e dai colori di notifica.