Hiërarchie
Het Spaceship Design System is opgebouwd uit lagen, waarbij elke laag helderheid, structuur en doel toevoegt. Ze vormen een hiërarchie die richting geeft aan hoe we producten ontwerpen, bouwen en opschalen — van de kleinste visuele beslissing tot de breedste gebruikersreis.
Door de principes van Atomic Design te volgen, hebben we onze belangrijkste middelen in de volgende categorieën gestructureerd, zodat ze voor alle teams gemakkelijker te gebruiken zijn.
Fundamenten
Definiëren de kernregels van onze visuele taal — kleuren, typografie, witruimte, rasters, beweging en tokens. Ze geven ons een consistente basis om vanuit te werken.
Componenten
Brengen de basisregels tot leven in herbruikbare interface-elementen die alledaagse ontwerpuitdagingen oplossen.
Sjablonen
Laten zien hoe componenten en patronen in context samenwerken en bieden kant-en-klare structuren voor volledige pagina's en ervaringen.
Patronen
Leggen beproefde oplossingen en best practices vast, zodat ons werk consistent, toegankelijk en gebruikersgericht blijft op elk contactpunt.
Fundamenten
De essentiële atomen van het Spaceship Design System. Ze definiëren de visuele en structurele regels waarop elk component en patroon is gebouwd.
Kleur
Definieert merk- en functionele paletten die harmonie, toegankelijkheid en flexibiliteit over producten heen waarborgen.
Typografie
Brengt hiërarchie en duidelijkheid aan met een typografische schaal die content gemakkelijk leesbaar en scanbaar maakt.
Witruimte
Biedt een systematische schaal voor marges, opvulling en lay-outritme om consistente interfaces te behouden.
Rasters
Creëert responsieve lay-outs die zich aanpassen aan verschillende apparaten, terwijl structuur en uitlijning behouden blijven..
Beweging
Gebruikt overgangen en animatie om de aandacht te sturen, status te communiceren en interacties natuurlijk te laten aanvoelen.
Design Tokens
Vertalen fundamentele waarden naar code en dienen als één enkele bron van waarheid, terwijl snelle en eenvoudige updates mogelijk worden gemaakt.
Duidelijke fundamenten betekenen minder barrières, meer inclusiviteit en meer tijd besteed aan het oplossen van echte problemen in plaats van helemaal opnieuw te beginnen.
Componenten
Dit zijn de herbruikbare elementen van het Spaceship Design System. Elk element lost een specifiek interfaceprobleem op — van knoppen en invoervelden tot navigatie en feedbackberichten. Elk component is toegankelijk, responsief en eenvoudig aan te passen aan verschillende contexten of apparaten.
Herbruikbare componenten zorgen ervoor dat elk product dat we bouwen sneller wordt gelanceerd en verbonden aanvoelt met het grotere geheel.
Sjablonen
Sjablonen vormen de brug tussen bouwstenen en de gebruikerservaring. Ze combineren fundamenten en componenten tot volledige paginacontexten en laten zien hoe het systeem in de praktijk werkt.
Productpaginasjablonen
Paginastructuren op hoog niveau voor landings- en productpagina's, waarbij ontwerpers vooral content bijwerken en modules aanpassen aan elke context.
Deelbare componenten
Complexere, herbruikbare structuren zoals vergelijkingstabellen of prijskaarten zijn ontworpen om specifieke scenario's consistent over producten heen te ondersteunen.
Met kant-en-klare structuren om mee te beginnen, kunnen teams zich minder richten op lay-outbeslissingen en meer op het inspelen op echte gebruikersbehoeften.
Patronen
Patronen leggen vast wat we hebben geleerd uit tests, feedback en gebruik in de praktijk, en zetten dit om in herbruikbare, gestandaardiseerde oplossingen. Elk patroon is gebaseerd op de intentie van de gebruiker, of het nu gaat om het vereenvoudigen van het afrekenproces, het afhandelen van fouten of het begeleiden van gebruikers door formulieren.
Door beproefde oplossingen te definiëren, maken patronen ons werk doelgericht en zorgen ze ervoor dat elke ervaring niet alleen functioneel is, maar ook doordacht ontworpen.