Primário
A nossa palete primária constitui a maior parte da nossa criatividade e deve representar os tons mais fortes em qualquer peça.
Cores
A nossa palete de cores está enraizada na nossa história e é a base da nossa aparência. Pode ser utilizada para marcar uma presença ousada e confiante ou para transmitir uma experiência clara.
A nossa palete de cores foi organizada de forma a suportar uma grande variedade de cenários visuais e meios, mantendo uma consistência clara. Os tons, as transparências ou os valores opacos da palete devem ser evitados. Em vez disso, mantenha-se fiel às tonalidades especificadas.
Sombras
Para maior flexibilidade, as 3 paletes de cores principais estão disponíveis em diferentes valores de tonalidade. Não colorir nem adicionar transparência e utilizar as sombras tal como estão.
Preto e branco
Tons neutros
Tons azuis
Acentos
Para acentuar a nossa palete primária, também temos um conjunto de paletes eléctricas para comunicar movimento e chamar a atenção para áreas específicas. As cores de realce nunca devem ser utilizadas como grandes manchas de cor e devem constituir menos de 5% do esquema.
Tecnologia Teal
Verde de segurança
Perigo Vermelho
Aviso Laranja
Cuidado Amarelo
Educação Púrpura
Utilização e contexto
A seleção cuidadosa da cor e do seu contexto é fundamental para moldar a narrativa criativa, evocar emoções e garantir a harmonia visual entre os elementos de design. Utilize a cor do tipo para criar uma experiência de leitura confortável e utilize cores que evoquem ação. Nunca utilize uma cor de ação como título. Reserve o azul para acções e ligações e evite utilizá-lo para tipos estáticos. Não se esqueça de consultar as diretrizes de acessibilidade para conhecer os requisitos de contraste de tipo adequados.
Texto
Gráficos
Gradientes
Os gradientes dão uma sensação de profundidade e ajudam a comunicar as camadas dentro da composição. Também podem ser utilizados para colorir e sombrear áreas para tipografia. Utilize cores graduadas como forma de atrair o olhar do espetador numa direção através do conteúdo.
Ao criar gradientes, tente manter o efeito subtil e utilize uma palete de forma gradual, saltando um passo de cor num grupo de tons para obter definição. A mistura de grupos de cores pode ser uma forma de dar cor dinâmica a uma peça. Evite utilizar gradientes muito acentuados como grandes manchas de cor numa peça.
Bloqueio de cores
Texto
Elétrico
Para criar o nosso efeito elétrico, utilize as diretrizes abaixo para garantir um aspeto consistente em diferentes experiências.
Utilize os tons de um grupo de cores e crie o seu grupo de ícones, como se mostra abaixo. Podem ser utilizadas técnicas semelhantes para outras formas de ilustração, como linhas ou margens. O tamanho e a opacidade da luz brilhante e pontual terão de ser dimensionados com o gráfico ou o texto para que o efeito seja subtil e limpo.
No caso do tipo de letra, podem ser utilizadas as mesmas combinações de cores, mas tenha em atenção a acessibilidade. Evite utilizar a técnica em tipos de letra grandes, a negrito ou minúsculos. Ajuste os focos de luz opcionais para se adaptarem ao bloco de texto.
As especificações apresentadas são para a Figma. Terão de ser efectuados ajustes para corresponder visualmente às nossas aplicações.
Fórmula
Variações
Tipo
Acessibilidade
Primário
Para garantir que o maior número possível de clientes tenha uma experiência consistente, queremos sempre manter-nos o mais acessíveis possível. Uma forma de o fazermos é aderindo às diretrizes WCAG 2.1 relativas aos rácios de contraste do texto.
Abaixo verá o teste completo das nossas cores utilizadas com o nosso tipo de letra a 16 pt para cores de bloqueio de texto aceitáveis. Se estiver assinalado como "Cuidado", significa que cumpre apenas as normas AA e que só deve ser utilizado para texto de grandes dimensões ou a negrito.
Ação
A nossa cor azul OPSWAT é a nossa principal tonalidade de cor CTA e deve ser dada especial atenção à colocação sobre os nossos blocos de cores primárias.
Acentos
Ao utilizar o nosso estado e os nossos acentos, tenha muito cuidado com a acessibilidade. Se uma cor de letra e um bloqueio forem apresentados abaixo, não são recomendados.
Academia
Ao utilizar a nossa Academia Púrpura, tenha especial cuidado com a acessibilidade. Se a cor do tipo de letra e o bloqueio forem apresentados abaixo, não são recomendados.
