Ícones
Os ícones da Spaceship traduzem ações e ideias complexas em símbolos instantaneamente reconhecíveis, ajudando-te a navegar e interagir com facilidade.
Universais, mas distintos, os nossos ícones são os mais pequenos blocos de construção da marca, concebidos para reconhecimento imediato, mantendo claramente a identidade da Spaceship.
Versões
Todos os ícones da Spaceship estão disponíveis em duas versões: contorno (principal) e preenchido (secundária).
Construção
Os ícones são concebidos de acordo com regras definidas — desde a grelha base até aos parâmetros do traço — garantindo resultados consistentes e equilibrados.
Tamanho
Escaláveis por definição, 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 utilizadores a identificar mais facilmente os seus produtos numa determinada interface. Para garantir consistência nestes contextos de UI, os ícones usam as cores do Spaceship Design System.
Cores da marca
Sendo as cores principais da Spaceship, estas devem ser a escolha principal para os ícones — quer em contextos funcionais, como a interface da plataforma, quer em utilizações mais ilustrativas, como a representação de funcionalidades nas páginas de produto. Consulta a página de cores para mais detalhes.
Cores do produto
As cores principais de um produto devem ser aplicadas aos respetivos ícones. Isto é essencial para o reconhecimento e a notoriedade do produto em todo o ecossistema Spaceship.
Cores de notificação
Usa cores de notificação para reforçar mensagens de alerta. 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 tens alguns exemplos do que deves evitar ao usar ícones.
Não distorças, rodes nem inverta os ícones. Redimensiona sempre proporcionalmente.
Não uses ícones maiores do que 40x40px. Procura manter o equilíbrio entre os elementos.
Não uses matizes nem sombras.