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 até à sua forma mais pura, transmitindo um propósito claro e uma simplicidade intemporal.
Tipo
Os pictogramas Spaceship existem em dois tipos: regular e comp. O tipo comp combina um pictograma regular com um ícone da Iconography Library da Spaceship, permitindo transmitir conceitos mais complexos e específicos.
Versões
Todos os pictogramas Spaceship estão disponíveis em duas versões: preenchida (primária) e outlined (secundária). A versão outlined só deve ser usada quando um pictograma precisa de menos peso visual do que pictogramas, texto ou componentes de interface próximos. Isto ajuda a estabelecer hierarquia visual em layouts 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 Spaceship são desenhados 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 geralmente usam um único tom. A única exceção é o tipo comp, que pode incluir cores de marca ou de notificação, sobre as quais encontrarás mais informações abaixo. Para garantir consistência nos contextos de interface, os pictogramas seguem as referências de cor do Spaceship Design System.
Cor padrão
O cinzento é a cor padrão 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 outlined só estão disponíveis na cor padrão.
Cores de marca
SPS Blue, SPS Dark Gray ou branco também podem ser usados em vez da cor padrão quando é necessário mais impacto visual ou para reforçar a identidade Spaceship. Consulta a página de cores para mais detalhes.
Cores de produto
A cor principal do produto deve ser usada para 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 de sistema genéricas 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 fiquem no canto inferior direito.
Não uses gradientes complexos ou multicolores nas versões preenchidas.
Não mistures elementos preenchidos e outlined 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 outlined além da cor padrão.
Não combines a cor padrão com qualquer cor além da cor principal da marca Spaceship e das cores de Notificação.