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 di Spaceship sono disponibili in due tipi: regular e comp. Il tipo comp combina un pittogramma regular con un’icona della Iconography Library di Spaceship, consentendoci di comunicare concetti più complessi e specifici.
Versioni
Tutti i pittogrammi di Spaceship sono disponibili in due versioni: piena (primaria) e delineata (secondaria). La versione delineata dovrebbe essere usata solo quando un pittogramma necessita di un peso visivo inferiore rispetto ai pittogrammi, al testo o ai 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 di Spaceship sono progettati per essere scalabili, mantenendo coerenza visiva e garantendo la migliore leggibilità. Nel nostro design system sono previste cinque dimensioni dei pittogrammi.
Colori
I pittogrammi usano generalmente una sola tonalità. L’unica eccezione è il tipo comp, che può includere colori del brand o di notifica, sui 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 usato per rappresentare messaggi, azioni o funzionalità. In casi eccezionali, può essere usato anche per i prodotti. I pittogrammi delineati sono disponibili solo nel colore predefinito.
Colori del brand
SPS Blue, SPS Dark Gray o il bianco possono essere usati anche al posto del colore predefinito quando è necessario un maggiore impatto visivo o per rafforzare l’identità di Spaceship. Consulta la pagina dei colori per ulteriori dettagli.
Colori del prodotto
Il colore principale del prodotto dovrebbe essere usato 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 usati per rafforzare un messaggio di notifica. La versione comp dovrebbe essere usata solo nei messaggi di sistema generici e non negli stati di avviso.
Linee guida
Ecco alcuni esempi di ciò che va evitato durante la creazione e l’uso dei pittogrammi.
Non permettere che gli elementi chiave del pittogramma regular finiscano nell’angolo inferiore destro.
Non usare gradienti complessi o multicolore nelle versioni piene.
Non mescolare elementi pieni e delineati nel tipo comp.
Non usare altri colori nelle versioni piene oltre a quelli identificati sopra.
Non usare alcun colore nelle versioni delineate oltre al colore predefinito.
Non combinare il colore predefinito con colori diversi dal colore primario del brand Spaceship e dai colori di notifica.