Hierarchy
The Spaceship Design System is built in layers, each one adding clarity, structure, and purpose. They form a hierarchy that guides how we design, build, and scale products — from the smallest visual decision to the broadest user journey.
By following the principles of Atomic Design, we have structured our main resources into the following categories, making them easier for all teams to use.
Foundations
Define the core rules of our visual language — colors, type, spacing, grids, motion, and tokens. They give us a consistent base to work from.
Components
Bring the foundation rules to life in reusable interface elements that solve everyday design problems.
Templates
Demonstrate how components and patterns work together in context, providing ready-made structures for complete pages and experiences.
Patterns
Capture proven solutions and best practices, ensuring that our work remains consistent, accessible, and user-centred across every touchpoint.
Foundations
The essential atoms of the Spaceship Design System. They define the visual and structural rules that every component and pattern is built on.
Color
Defines brand and functional palettes that ensure harmony, accessibility, and flexibility across products.
Typography
Establishes hierarchy and clarity with a type ramp that makes content easy to read and scan.
Spacing
Provides a systematic scale for margins, padding, and layout rhythm to maintain consistent interfaces.
Grids
Creates responsive layouts that adapt across devices while maintaining structure and alignment..
Motion
Uses transitions and animation to guide attention, communicate status, and make interactions feel natural.
Design Tokens
Translate foundational values into code, serving as a single source of truth while facilitating rapid and easy updates.
Clear foundations mean fewer barriers, more inclusivity, and more time spent solving real problems rather than starting from scratch.
Components
These are the reusable elements of the Spaceship Design System. Each one solves a specific interface problem — from buttons and inputs to navigation and feedback messages. Every component is accessible, responsive, and easily adapted to different contexts or devices.
Reusable components ensure every product we build ships faster and feels connected to the bigger picture.
Templates
Templates are the bridge between building blocks and the user experience. They combine foundations and components into full-page contexts, demonstrating how the system works in practice.
Product Page Templates
High-level page structures for landing and product pages, where designers mainly update content and adjust modules to fit each context.
Shareable components
More complex, reusable structures such as comparison tables or pricing cards are designed to handle specific scenarios consistently across products.
With ready-made structures to start from, teams can focus less on layout decisions and more on addressing real user needs.
Patterns
Patterns capture what we’ve learned from testing, feedback, and real-world use, turning them into reusable, standardized solutions. Each pattern is based on user intent, whether it’s simplifying the checkout process, handling errors, or guiding users through forms.
By defining proven solutions, patterns make our work purposeful, ensuring every experience is not just functional but thoughtfully designed.