Ícones
Os ícones da Spaceship traduzem ações e ideias complexas em símbolos instantaneamente reconhecíveis, ajudando os usuários a navegar e interagir com facilidade.
Universais e ao mesmo tempo distintos, nossos ícones são os menores blocos de construção da marca, projetados para reconhecimento instantâneo enquanto mantêm claramente a identidade da Spaceship.
Versões
Todos os ícones da Spaceship estão disponíveis em duas versões: contornada (primária) e preenchida (secundária).
Construção
Os ícones são projetados de acordo com regras definidas — desde a grade base até os parâmetros de traço — garantindo resultados consistentes e equilibrados.
Tamanho
Escaláveis por design, os ícones devem ser usados em cinco tamanhos para preservar a clareza e a harmonia visual em todo o sistema.
Cores
A cor é um elemento essencial que ajuda os usuários a identificar seus produtos mais facilmente em uma determinada interface. Para garantir consistência nesses contextos de interface, os ícones utilizam as cores do Spaceship Design System.
Cores da marca
Como cores principais da Spaceship, estas devem ser a escolha primária para ícones — seja em contextos funcionais como a interface da plataforma ou em usos mais ilustrativos, como a representação de recursos nas páginas de produtos. Confira a página de cores para mais detalhes.
Cores do produto
As cores principais de um produto devem ser aplicadas aos seus respectivos ícones. Isso é fundamental para o reconhecimento e a percepção do produto em todo o ecossistema Spaceship.
Cores de notificação
Use cores de notificação para reforçar mensagens de alerta. Elas devem ser aplicadas apenas aos ícones de alerta, com exceções ocasionais quando outro ícone também representa estados de sucesso, erro ou aviso.
Orientações
Aqui estão alguns exemplos do que evitar ao usar ícones.
Não distorça, gire ou inverta os ícones. Sempre dimensione proporcionalmente.
Não utilize ícones maiores que 40x40px. Busque equilíbrio entre os elementos.
Não utilize tons ou matizes.