Piktogrammer
Små, enkle grafiske elementer som forbedrer viktige webkomponenter og formidler ideer raskt og effektivt.
Bokstavelige, funksjonelle og geometriske — våre piktogrammer destillerer ideer til sin reneste form og formidler et tydelig formål og tidløs enkelhet.
Type
Spaceship-piktogrammer finnes i to typer: regular og comp. Comp-typen kombinerer et regular-piktogram med et ikon fra Spaceships Iconography Library, slik at vi kan formidle mer komplekse og spesifikke konsepter.
Versjoner
Alle Spaceship-piktogrammer er tilgjengelige i to versjoner: filled (primær) og outlined (sekundær). Den konturerte versjonen bør bare brukes når et piktogram trenger mindre visuell tyngde enn nærliggende piktogrammer, tekst eller UI-komponenter. Dette bidrar til å etablere visuelt hierarki i komplekse oppsett.
Konstruksjon
Piktogrammer er basert på et sett med regler, fra grunnrutenett til parametere for gradering og strek, for å sikre konsistente og balanserte resultater.
Størrelse
Spaceship-piktogrammer er utformet for å kunne skaleres, samtidig som de opprettholder visuell konsistens og sikrer best mulig lesbarhet. Det finnes fem piktogramstørrelser i designsystemet vårt.
Farger
Piktogrammer bruker vanligvis én enkelt fargetone. Det eneste unntaket er comp-typen, som kan inkludere merkevare- eller varslingsfarger, og du finner mer informasjon om dette nedenfor. For å sikre konsistens i UI-kontekster følger piktogrammer fargereferansene i Spaceship Design System.
Standardfarge
Grå er standardfargen for piktogrammer og bør brukes til å representere meldinger, handlinger eller funksjoner. I spesielle tilfeller kan den også brukes for produkter. Konturpiktogrammer er bare tilgjengelige i standardfargen.
Merkevarefarger
SPS Blue, SPS Dark Gray eller hvit kan også brukes i stedet for standardfargen når det trengs større visuell effekt eller for å forsterke Spaceship-identiteten. Se fargesiden for flere detaljer.
Produktfarger
Hovedfargen for produktet bør brukes for piktogrammer i produktdedikerte kontekster (produktsider, produktkort osv.) for alle nåværende og kommende produkter.
Varslingsfarger
Disse fargene bør brukes for å forsterke et varslingsbudskap. Comp-versjonen bør bare brukes i generiske systemmeldinger og ikke i advarselstilstander.
Veiledning
Her er noen eksempler på hva du bør unngå når du oppretter og bruker piktogrammer.
Ikke la nøkkelelementer i regular-piktogrammet havne i nedre høyre hjørne.
Ikke bruk komplekse eller flerfargede graderinger i fylte versjoner.
Ikke bland fylte og konturerte elementer i comp-typen.
Ikke bruk andre farger i de fylte versjonene enn dem som er angitt ovenfor.
Ikke bruk andre farger på konturversjoner enn standardfargen.
Ikke kombiner standardfargen med andre farger enn Spaceship-merkevarens primærfarge og varslingsfargene.