Hierarki
Spaceship Design System är uppbyggt i lager, där varje lager tillför tydlighet, struktur och syfte. De bildar en hierarki som vägleder hur vi designar, bygger och skalar produkter – från det minsta visuella beslutet till den bredaste användarresan.
Genom att följa principerna för Atomic Design har vi strukturerat våra huvudsakliga resurser i följande kategorier, vilket gör dem enklare för alla team att använda.
Grunder
Definierar kärnreglerna i vårt visuella språk — färger, typografi, mellanrum, rutnät, rörelse och tokens. De ger oss en konsekvent grund att arbeta utifrån.
Komponenter
Ger grundreglerna liv i återanvändbara gränssnittselement som löser vardagliga designproblem.
Mallar
Visar hur komponenter och mönster fungerar tillsammans i sitt sammanhang och tillhandahåller färdiga strukturer för kompletta sidor och upplevelser.
Mönster
Fångar beprövade lösningar och bästa praxis och säkerställer att vårt arbete förblir konsekvent, tillgängligt och användarcentrerat i varje kontaktpunkt.
Grunder
De grundläggande atomerna i Spaceship Design System. De definierar de visuella och strukturella regler som varje komponent och varje mönster bygger på.
Färg
Definierar varumärkes- och funktionella paletter som säkerställer harmoni, tillgänglighet och flexibilitet mellan produkter.
Typografi
Etablerar hierarki och tydlighet med en typografisk skala som gör innehåll lätt att läsa och skanna.
Mellanrum
Tillhandahåller en systematisk skala för marginaler, utfyllnad och layoutrytm för att upprätthålla konsekventa gränssnitt.
Rutnät
Skapar responsiva layouter som anpassar sig mellan enheter samtidigt som struktur och justering bibehålls..
Rörelse
Använder övergångar och animation för att styra uppmärksamheten, kommunicera status och få interaktioner att kännas naturliga.
Design Tokens
Översätter grundläggande värden till kod och fungerar som en enda sanningskälla samtidigt som snabba och enkla uppdateringar möjliggörs.
Tydliga grunder innebär färre hinder, större inkludering och mer tid som läggs på att lösa verkliga problem i stället för att börja från början.
Komponenter
Det här är de återanvändbara elementen i Spaceship Design System. Var och en löser ett specifikt gränssnittsproblem — från knappar och inmatningsfält till navigering och återkopplingsmeddelanden. Varje komponent är tillgänglig, responsiv och lätt att anpassa till olika sammanhang eller enheter.
Återanvändbara komponenter säkerställer att varje produkt vi bygger lanseras snabbare och känns kopplad till helheten.
Mallar
Mallar är bron mellan byggblocken och användarupplevelsen. De kombinerar grunder och komponenter till helsidessammanhang och visar hur systemet fungerar i praktiken.
Mallar för produktsidor
Övergripande sidstrukturer för landnings- och produktsidor, där designers främst uppdaterar innehåll och justerar moduler för att passa varje sammanhang.
Delbara komponenter
Mer komplexa, återanvändbara strukturer som jämförelsetabeller eller priskort är utformade för att hantera specifika scenarier konsekvent mellan produkter.
Med färdiga strukturer att utgå från kan team fokusera mindre på layoutbeslut och mer på att möta verkliga användarbehov.
Mönster
Mönster fångar upp det vi har lärt oss från tester, feedback och verklig användning och omvandlar det till återanvändbara, standardiserade lösningar. Varje mönster bygger på användaravsikt, oavsett om det handlar om att förenkla kassaprocessen, hantera fel eller vägleda användare genom formulär.
Genom att definiera beprövade lösningar gör mönster vårt arbete mer målinriktat och säkerställer att varje upplevelse inte bara är funktionell utan också genomtänkt utformad.