Pictogramas
Pequenos e simples elementos gráficos que melhoram componentes-chave da web, comunicando ideias de forma rápida e eficaz.
Literais, funcionais e geométricos — os nossos pictogramas destilam ideias à sua forma mais pura, transmitindo um propósito claro e uma simplicidade intemporal.
Tipo
Os pictogramas da Spaceship existem em dois tipos: regular e comp. O tipo comp combina um pictograma regular com um ícone da Iconography Library da Spaceship, permitindo-nos transmitir conceitos mais complexos e específicos.
Versões
Todos os pictogramas da Spaceship estão disponíveis em duas versões: preenchida (primária) e contornada (secundária). A versão contornada só deve ser usada quando um pictograma precisa de menos peso visual do que os pictogramas, texto ou componentes de UI próximos. Isto ajuda a estabelecer hierarquia visual em esquemas complexos.
Construção
Os pictogramas baseiam-se num conjunto de regras, desde a grelha base até aos parâmetros de gradiente e traço, para garantir resultados consistentes e equilibrados.
Tamanho
Os pictogramas da Spaceship foram concebidos para serem escaláveis, mantendo a consistência visual e garantindo a melhor legibilidade. Existem cinco tamanhos de pictogramas no nosso sistema de design.
Cores
Os pictogramas usam geralmente uma única tonalidade. A única exceção é o tipo comp, que pode incluir cores da marca ou de notificação, sobre as quais encontrarás mais informação abaixo. Para garantir consistência em contextos de UI, os pictogramas seguem as referências de cor do Spaceship Design System.
Cor predefinida
O cinzento é a cor predefinida dos pictogramas e deve ser usado para representar mensagens, ações ou funcionalidades. Em casos excecionais, também pode ser usado para produtos. Os pictogramas contornados só estão disponíveis na cor predefinida.
Cores da marca
SPS Blue, SPS Dark Gray ou branco também podem ser usados em vez da cor predefinida quando é necessário maior impacto visual ou para reforçar a identidade da Spaceship. Consulta a página de cores para mais detalhes.
Cores do produto
A cor principal do produto deve ser usada nos pictogramas em contextos dedicados ao produto (páginas de produto, cartões de produto, etc.) para todos os produtos atuais e futuros.
Cores de notificação
Estas cores devem ser usadas para reforçar uma mensagem de notificação. A versão comp só deve ser usada em mensagens genéricas do sistema e não em estados de aviso.
Orientações
Aqui tens alguns exemplos do que deves evitar ao criar e usar pictogramas.
Não deixes que elementos-chave do pictograma regular caiam no canto inferior direito.
Não uses gradientes complexos ou multicoloridos nas versões preenchidas.
Não mistures elementos preenchidos e contornados no tipo comp.
Não uses outras cores nas versões preenchidas além das identificadas acima.
Não uses qualquer cor nas versões contornadas além da cor predefinida.
Não combines a cor predefinida com qualquer cor além da cor primária da marca Spaceship e das cores de notificação.