Hierarki

Spaceship Design System er bygget opp i lag, hvor hvert lag tilfører klarhet, struktur og hensikt. De danner et hierarki som veileder hvordan vi designer, bygger og skalerer produkter – fra de minste visuelle avgjørelsene til den bredeste brukerreisen.

Hero Image

Ved å følge prinsippene for Atomic Design har vi strukturert hovedressursene våre i følgende kategorier, noe som gjør dem enklere for alle team å bruke.

Grunnlag
Definerer kjernereglene i det visuelle språket vårt — farger, typografi, avstand, rutenett, bevegelse og tokens. De gir oss et konsistent grunnlag å jobbe ut fra.

Komponenter
Gir grunnreglene liv i gjenbrukbare grensesnittelementer som løser daglige designutfordringer.

Maler
Viser hvordan komponenter og mønstre fungerer sammen i kontekst, og gir ferdige strukturer for komplette sider og opplevelser.

Mønstre
Fanger opp utprøvde løsninger og beste praksis, og sikrer at arbeidet vårt forblir konsistent, tilgjengelig og brukersentrert på tvers av alle kontaktpunkter.






Grunnlag

De essensielle atomene i Spaceship Design System. De definerer de visuelle og strukturelle reglene som hver komponent og hvert mønster bygger på.




Farge
Definerer merkevare- og funksjonelle paletter som sikrer harmoni, tilgjengelighet og fleksibilitet på tvers av produkter.


Typografi
Etablerer hierarki og tydelighet med en typografisk skala som gjør innhold lett å lese og skanne.


Avstand
Gir en systematisk skala for marger, utfylling og layoutrytme for å opprettholde konsistente grensesnitt.



Rutenett
Skaper responsive oppsett som tilpasser seg på tvers av enheter samtidig som struktur og justering opprettholdes..


Bevegelse
Bruker overganger og animasjon for å styre oppmerksomhet, kommunisere status og få interaksjoner til å føles naturlige.


Design Tokens
Oversetter grunnleggende verdier til kode, fungerer som én felles sannhetskilde og legger til rette for raske og enkle oppdateringer.





Tydelige grunnprinsipper betyr færre barrierer, mer inkludering og mer tid brukt på å løse reelle problemer i stedet for å starte fra bunnen av.








Komponenter

Dette er de gjenbrukbare elementene i Spaceship Design System. Hver av dem løser et spesifikt grensesnittproblem — fra knapper og inndatafelt til navigasjon og tilbakemeldingsmeldinger. Hver komponent er tilgjengelig, responsiv og lett å tilpasse til ulike kontekster eller enheter.







Gjenbrukbare komponenter sikrer at hvert produkt vi bygger, lanseres raskere og føles knyttet til det større bildet.








Maler

Maler er broen mellom byggesteiner og brukeropplevelsen. De kombinerer grunnlag og komponenter i fullstendige sidekontekster og viser hvordan systemet fungerer i praksis.






Produktsidemaler
Overordnede sidestrukturer for landingssider og produktsider, der designere hovedsakelig oppdaterer innhold og justerer moduler for å passe til hver kontekst.


Delbare komponenter
Mer komplekse, gjenbrukbare strukturer som sammenligningstabeller eller priskort er utformet for å håndtere spesifikke scenarier konsekvent på tvers av produkter.





Med ferdige strukturer å starte fra kan team fokusere mindre på layoutbeslutninger og mer på å møte reelle brukerbehov.






Mønstre

Mønstre fanger opp det vi har lært fra testing, tilbakemeldinger og bruk i den virkelige verden, og gjør det om til gjenbrukbare, standardiserte løsninger. Hvert mønster er basert på brukerintensjon, enten det handler om å forenkle betalingsprosessen, håndtere feil eller veilede brukere gjennom skjemaer.







Ved å definere utprøvde løsninger gjør mønstre arbeidet vårt målrettet og sikrer at hver opplevelse ikke bare er funksjonell, men også gjennomtenkt utformet.