Hierarquia
O Sistema de Design da Spaceship é construído em camadas, cada uma adicionando clareza, estrutura e propósito. Elas formam uma hierarquia que orienta como projetamos, construímos e escalamos produtos — desde a menor decisão visual até a mais ampla jornada do usuário.
Seguindo os princípios do Atomic Design, estruturamos nossos principais recursos nas seguintes categorias, tornando-os mais fáceis de usar para todas as equipes.
Foundations
Definem as regras centrais da nossa linguagem visual — cores, tipografia, espaçamento, grades, movimento e tokens. Elas nos dão uma base consistente para trabalhar.
Components
Dão vida às regras fundamentais em elementos de interface reutilizáveis que resolvem problemas cotidianos de design.
Templates
Demonstram como componentes e padrões funcionam juntos em contexto, fornecendo estruturas prontas para páginas e experiências completas.
Padrões
Capturam soluções comprovadas e melhores práticas, garantindo que nosso trabalho permaneça consistente, acessível e centrado no usuário em cada ponto de contato.
Foundations
Os átomos essenciais do Spaceship Design System. Eles definem as regras visuais e estruturais sobre as quais cada componente e padrão é construído.
Color
Define paletas de marca e funcionais que garantem harmonia, acessibilidade e flexibilidade entre os produtos.
Typography
Estabelece hierarquia e clareza com uma escala tipográfica que torna o conteúdo fácil de ler e escanear.
Spacing
Fornece uma escala sistemática para margens, preenchimento e ritmo de layout, a fim de manter interfaces consistentes.
Grids
Cria layouts responsivos que se adaptam entre dispositivos, mantendo a estrutura e o alinhamento..
Motion
Usa transições e animação para direcionar a atenção, comunicar status 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 fáceis.
Fundamentos claros significam menos barreiras, mais inclusão e mais tempo dedicado à solução de 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 de interface — de botões e campos de entrada até navegação e mensagens de feedback. Todo componente é acessível, responsivo e facilmente adaptável a diferentes contextos ou dispositivos.
Componentes reutilizáveis garantem que cada produto que criamos seja lançado mais rapidamente e pareça conectado ao panorama geral.
Templates
Os templates são a ponte entre os blocos de construção e a experiência do usuário. Eles combinam foundations e componentes em contextos de página inteira, 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, nas quais os designers principalmente atualizam o conteúdo e ajustam os módulos para se adequar a cada contexto.
Componentes compartilháveis
Estruturas reutilizáveis mais complexas, como tabelas comparativas ou cartões de preços, são projetadas para lidar com cenários específicos de forma consistente entre os produtos.
Com estruturas prontas para começar, as equipes podem se concentrar menos em decisões de layout e mais em atender às necessidades reais dos usuários.
Padrões
Os padrões capturam o que aprendemos com testes, feedback e uso no mundo real, transformando isso em soluções reutilizáveis e padronizadas. Cada padrão é baseado na intenção do usuário, seja simplificar o processo de checkout, lidar com erros ou orientar os usuários em formulários.
Ao definir soluções comprovadas, os padrões tornam nosso trabalho intencional, garantindo que cada experiência não seja apenas funcional, mas cuidadosamente projetada.