Gerarchia
Il Spaceship Design System è costruito a strati, ognuno dei quali aggiunge chiarezza, struttura e scopo. Formano una gerarchia che guida il modo in cui progettiamo, costruiamo e sviluppiamo i prodotti — dalla più piccola decisione visiva al percorso utente più ampio.
Seguendo i principi dell'Atomic Design, abbiamo strutturato le nostre risorse principali nelle seguenti categorie, rendendole più facili da usare per tutti i team.
Foundations
Definiscono le regole fondamentali del nostro linguaggio visivo — colori, tipografia, spaziatura, griglie, movimento e token. Ci offrono una base coerente da cui partire.
Componenti
Danno vita alle regole fondamentali in elementi di interfaccia riutilizzabili che risolvono i problemi di design quotidiani.
Template
Dimostrano come componenti e pattern lavorino insieme nel contesto, fornendo strutture pronte per pagine ed esperienze complete.
Pattern
Raccolgono soluzioni comprovate e best practice, garantendo che il nostro lavoro rimanga coerente, accessibile e incentrato sull'utente in ogni punto di contatto.
Foundations
Gli atomi essenziali dello Spaceship Design System. Definiscono le regole visive e strutturali su cui si basano ogni componente e pattern.
Colore
Definisce palette di brand e funzionali che garantiscono armonia, accessibilità e flessibilità tra i prodotti.
Tipografia
Stabilisce gerarchia e chiarezza con una scala tipografica che rende i contenuti facili da leggere e scorrere.
Spaziatura
Fornisce una scala sistematica per margini, padding e ritmo del layout, così da mantenere interfacce coerenti.
Griglie
Crea layout reattivi che si adattano ai vari dispositivi mantenendo struttura e allineamento.
Motion
Utilizza transizioni e animazioni per guidare l'attenzione, comunicare lo stato e rendere le interazioni naturali.
Design Tokens
Traducono i valori fondamentali in codice, fungendo da unica fonte di verità e facilitando aggiornamenti rapidi e semplici.
Fondamenta chiare significano meno barriere, maggiore inclusività e più tempo dedicato a risolvere problemi reali invece di ricominciare da zero.
Componenti
Questi sono gli elementi riutilizzabili dello Spaceship Design System. Ognuno risolve uno specifico problema dell'interfaccia — dai pulsanti e campi di input alla navigazione e ai messaggi di feedback. Ogni componente è accessibile, reattivo e facilmente adattabile a contesti o dispositivi diversi.
I componenti riutilizzabili garantiscono che ogni prodotto che realizziamo venga lanciato più rapidamente e risulti connesso a una visione più ampia.
Template
I template sono il ponte tra i blocchi costitutivi e l'esperienza utente. Combinano foundations e componenti in contesti di pagina completi, dimostrando come il sistema funzioni nella pratica.
Product Page Templates
Strutture di pagina di alto livello per landing page e pagine di prodotto, in cui i designer aggiornano principalmente i contenuti e adattano i moduli a ogni contesto.
Componenti condivisibili
Strutture più complesse e riutilizzabili, come tabelle comparative o schede prezzi, sono progettate per gestire scenari specifici in modo coerente tra i vari prodotti.
Con strutture pronte da cui partire, i team possono concentrarsi meno sulle decisioni di layout e più nel rispondere ai reali bisogni degli utenti.
Pattern
I pattern raccolgono ciò che abbiamo imparato da test, feedback e utilizzo nel mondo reale, trasformandolo in soluzioni riutilizzabili e standardizzate. Ogni pattern si basa sull'intento dell'utente, che si tratti di semplificare il processo di checkout, gestire gli errori o guidare gli utenti attraverso i moduli.
Definendo soluzioni comprovate, i pattern rendono il nostro lavoro mirato, assicurando che ogni esperienza non sia solo funzionale ma anche progettata con attenzione.