Hierarquia
O Spaceship Design System é construído em camadas, cada uma acrescentando clareza, estrutura e propósito. Formam uma hierarquia que orienta como desenhamos, construímos e escalamos produtos — desde a menor decisão visual até à mais ampla jornada do utilizador.
Ao seguir os princípios do Atomic Design, estruturámos os nossos principais recursos nas seguintes categorias, tornando-os mais fáceis de usar para todas as equipas.
Foundations
Definem as regras centrais da nossa linguagem visual — cores, tipografia, espaçamento, grelhas, movimento e tokens. Dão-nos uma base consistente a partir da qual trabalhar.
Componentes
Dão vida às regras fundamentais em elementos de interface reutilizáveis que resolvem problemas de design do dia a dia.
Modelos
Demonstram como os componentes e os padrões funcionam em conjunto no contexto, fornecendo estruturas prontas a usar para páginas e experiências completas.
Padrões
Captam soluções comprovadas e boas práticas, garantindo que o nosso trabalho se mantém consistente, acessível e centrado no utilizador em todos os pontos de contacto.
Foundations
Os átomos essenciais do Spaceship Design System. Definem as regras visuais e estruturais sobre as quais cada componente e padrão é construído.
Cor
Define paletas de marca e funcionais que garantem harmonia, acessibilidade e flexibilidade entre produtos.
Tipografia
Estabelece hierarquia e clareza com uma escala tipográfica que torna o conteúdo fácil de ler e analisar rapidamente.
Espaçamento
Fornece uma escala sistemática para margens, preenchimento e ritmo de layout, de modo a manter interfaces consistentes.
Grelhas
Cria layouts responsivos que se adaptam aos vários dispositivos, mantendo a estrutura e o alinhamento..
Motion
Usa transições e animação para orientar a atenção, comunicar estados e fazer com que as interações pareçam naturais.
Design Tokens
Traduzem valores fundamentais em código, servindo como uma única fonte de verdade e facilitando atualizações rápidas e simples.
Fundações claras significam menos barreiras, mais inclusão e mais tempo dedicado a resolver problemas reais em vez de começar do zero.
Componentes
Estes são os elementos reutilizáveis do Spaceship Design System. Cada um resolve um problema específico da interface — desde botões e campos de introdução até navegação e mensagens de feedback. Todos os componentes são acessíveis, responsivos e facilmente adaptáveis a diferentes contextos ou dispositivos.
Os componentes reutilizáveis garantem que todos os produtos que criamos são lançados mais depressa e parecem ligados a uma visão mais ampla.
Modelos
Os modelos são a ponte entre os blocos de construção e a experiência do utilizador. Combinam foundations e componentes em contextos de página completos, demonstrando como o sistema funciona na prática.
Product Page Templates
Estruturas de página de alto nível para landing pages e páginas de produto, onde os designers atualizam sobretudo o conteúdo e ajustam os módulos para se adequarem a cada contexto.
Componentes partilháveis
Estruturas reutilizáveis mais complexas, como tabelas comparativas ou cartões de preços, são concebidas para lidar com cenários específicos de forma consistente entre produtos.
Com estruturas prontas a usar como ponto de partida, as equipas podem concentrar-se menos em decisões de layout e mais em responder às necessidades reais dos utilizadores.
Padrões
Os padrões captam o que aprendemos com testes, feedback e utilização no mundo real, transformando isso em soluções reutilizáveis e normalizadas. Cada padrão baseia-se na intenção do utilizador, quer se trate de simplificar o processo de checkout, lidar com erros ou orientar os utilizadores através de formulários.
Ao definir soluções comprovadas, os padrões tornam o nosso trabalho intencional, garantindo que cada experiência não é apenas funcional, mas também cuidadosamente concebida.