Spaceship-piktogram finns i två typer: vanlig och comp. Comp-typen kombinerar ett vanligt piktogram med en ikon från Spaceships ikonbibliotek, vilket gör att vi kan förmedla mer komplexa och specifika koncept.

Alla Spaceship-piktogram finns i två versioner: fylld (primär) och kontur (sekundär). Konturversionen ska endast användas när ett piktogram behöver mindre visuell tyngd än närliggande piktogram, text eller UI-komponenter. Detta hjälper till att skapa visuell hierarki i komplexa layouter.

Piktogram baseras på en uppsättning regler, från grundrutnät till övertonings- och linjeparametrar, för att säkerställa konsekventa och balanserade resultat.

Spaceship-piktogram är designade för att vara skalbara, bibehålla visuell konsekvens och säkerställa bästa läsbarhet. Det finns fem piktogramstorlekar i vårt designsystem.

Piktogram använder vanligtvis en enda nyans. Det enda undantaget är comp-typen, som kan inkludera varumärkes- eller notifikationsfärger, för vilka du hittar mer information nedan. För att säkerställa konsekvens i UI-sammanhang följer piktogram färgreferenserna i Spaceship Design System.

Standardfärg

Grå är standardfärgen för piktogram och bör användas för att representera meddelanden, åtgärder eller funktioner. I undantagsfall kan den även användas för produkter. Piktogram med kontur finns endast i standardfärgen.

Varumärkesfärger

SPS Blue, SPS Dark Gray eller vitt kan också användas istället för standardfärgen när mer visuell effekt behövs eller för att förstärka Spaceships identitet. Se färgsidan för mer information.

Produktfärger

Huvudfärgen för produkten ska användas för piktogram i produktdedikerade sammanhang (produktsidor, produktkort, etc) för alla nuvarande och kommande produkter.

Notifikationsfärger

Dessa färger ska användas för att förstärka ett notifikationsmeddelande. Comp-versionen ska endast användas i generella systemmeddelanden och inte i varningslägen.

Här är några exempel på vad du bör undvika när du skapar och använder piktogram.