Í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, mas distintos, nossos ícones são os menores blocos de construção da marca, projetados para reconhecimento instantâneo, mantendo 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 — da grade base aos 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 com mais facilidade em uma determinada interface. Para garantir consistência nesses contextos de UI, os ícones usam 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 respectivos ícones. Isso é fundamental para o reconhecimento e a percepção do produto em todo o ecossistema da 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 em que outro ícone também represente estados de sucesso, erro ou aviso.
Orientações
Aqui estão alguns exemplos do que evitar ao usar ícones.
Não distorça, gire nem inverta ícones. Sempre redimensione proporcionalmente.
Não use ícones maiores que 40x40px. Busque equilíbrio entre os elementos.
Não use matizes nem tonalidades.