Saiba mais sobre o livro de Benny Czarny, «Cybersecurity Upside Down»

Saiba mais
Utilizamos inteligência artificial para as traduções dos sítios e, embora nos esforcemos por garantir a exatidão, estas podem nem sempre ser 100% precisas. Agradecemos a sua compreensão.

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 paleta de cores foi organizada de forma a permitir uma ampla variedade de cenários visuais e suportes, mantendo ao mesmo tempo uma consistência clara. Devem ser evitados matizes, transparências ou valores opacos da paleta. Em vez disso, deve-se limitar-se aos tons especificados.

OPSWAT Cores da marca — Visão geral

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.

OPSWAT Cores da marca — Primárias

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

PretoPreto 100
HEX#000000
RGB0 0 0
CMYK60 50 40 100
BrancoBranco 100
HEX#FFFFFF
RGB255 255 255
CMYK0 0 0 0

Tons neutros

​Neutro 1200
HEX#0C121D
RGB40 55 82
CMYK100 79 44 93
PMSPreto 6
​Neutro 1100
HEX#141B27
RGB20 27 39
CMYK88 76 30 82
PMS532
​Neutro 1000
HEX#172234
RGB23 34 52
CMYK95 72 15 67
PMS533
​Neutro 900
HEX#24324B
RGB36 50 75
CMYK95 74 7 44
PMS534
​Neutro 800
HEX#344565
RGB52 69 101
CMYK78 58 6 32
​Neutro 700
HEX#475B81
RGB79 91 129
CMYK60 40 5 20
​Neutro 600
HEX#607497
RGB96 116 151
CMYK43 25 3 8
PMS535
​Neutro 500
HEX#A9B2C4
RGB169 178 196
CMYK34 17 2 7
PMS536
​Neutro 400
HEX#C7CCD5
RGB199 204 213
CMYK24 12 2 6
​Neutro 300
HEX#DEE0E4
RGB222 224 228
CMYK14 7 3 5
PMS427
​Neutro 200
HEX#EBECEE
RGB235 236 238
CMYK4 2 3 4
PMS427 a 50%
​Neutro 100
HEX#F8F9F9
RGB248 249 249
CMYK2 1 2 2
PMS427 a 25%

Tons azuis

P
Meia-noiteAzul-meia-noite 1200
HEX#050F22
RGB5 15 34
CMYK100 80 0 90
PMS296
​Azul 1100
HEX#091B3B
RGB9 27 59
CMYK100 79 12 70
PMS289
P
MarinhoAzul-marinho 1000
HEX#0D2654
RGB13 38 64
CMYK100 79 12 59
PMS655
​Azul 900
HEX#123D8B
RGB18 61 139
CMYK100 75 2 18
PMS287
​Azul 800
HEX#1854C3
RGB24 84 195
CMYK100 75 0 0
PMS286
P
AzulAzul 700
HEX#1D6BFC
RGB29 107 252
CMYK90 48 0 0
PMS285
​Azul 600
HEX#357BFC
RGB53 123 252
CMYK88 40 0 0
​Azul 500
HEX#5690FD
RGB86 144 253
CMYK87 30 0 0
​Azul 400
HEX#77A6FD
RGB119 166 253
CMYK85 21 0 0
PMS2925
​Azul 300
HEX#A5C4FE
RGB165 196 254
CMYK60 6 0 0
PMS299 a 70%
​Azul 200
HEX#C6DAFE
RGB195 218 254
CMYK34 3 0 0
PMS299 a 40%
​Azul 100
HEX#E8F0FF
RGB232 240 255
CMYK7 1 0 0
PMS299 a 8%

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

​Azul-petróleo 1200
HEX#001D1E
RGB0 29 32
CMYK100 41 35 87
PMS546
​Azul-petróleo 1100
HEX#013E42
RGB1 62 66
CMYK100 21 28 76
PMS548
​Teal 1000
HEX#016065
RGB1 96 101
CMYK100 16 24 60
​Azul-petróleo 900
HEX#018288
RGB1 130 136
CMYK100 12 21 44
PMS315
​Azul-petróleo 800
HEX#02A3AC
RGB2 163 172
CMYK100 10 29 20
PMS3145
​Azul-petróleo 700
HEX#02C5CF
RGB2 197 207
CMYK98 0 28 4
PMS7711
P
Azul-petróleoAzul-petróleo 600
HEX#02E9F5
RGB2 233 245
CMYK74 0 13 0
PMS631
​Teal 500
HEX#28F2FD
RGB40 242 253
CMYK62 0 8 0
PMS637
​Azul-petróleo 400
HEX#58F5FD
RGB88 245 253
CMYK48 0 9 0
PMS310
​Teal 300
HEX#88F8FE
RGB136 248 254
CMYK36 0 9 0
PMS629
​Azul-petróleo 200
HEX#B8FBFE
RGB184 251 254
CMYK23 0 1 0
PMS290
​Teal 100
HEX#E8FEFF
RGB232 254 255
CMYK10 2 0 0
PMS656

Verde de segurança

​Verde 1200
HEX#002318
RGB0 35 24
CMYK93 33 68 85
PMS627
​Verde 1100
HEX#004832
RGB0 72 50
CMYK94 28 74 73
PMS3308
​Green 1000
HEX#006C4C
RGB0 108 76
CMYK89 19 72 60
PMS343
​Verde 900
HEX#009165
RGB0 145 101
CMYK90 14 62 43
PMS568
​Verde 800
HEX#00B67F
RGB0 182 127
CMYK100 5 65 26
PMS3295
​Verde 700
HEX#00DA99
RGB0 218 153
CMYK99 0 69 0
PMS3278
P
VerdeVerde 600
HEX#00FFB2
RGB0 255 178
CMYK66 0 48 0
PMS3395
​Green 500
HEX#2DFFC0
RGB45 255 192
CMYK55 0 38 0
​Green 400
HEX#59FFCD
RGB89 255 205
CMYK43 0 28 0
PMS3385
​Verde 300
HEX#86FFDB
RGB134 255 219
CMYK33 0 18 0
PMS332
​Verde 200
HEX#B3FFE8
RGB179 255 232
CMYK20 0 14 0
PMS573
​Green 100
HEX#DFFFF5
RGB223 255 245
CMYK17 0 12 0
PMS566

Perigo Vermelho

​Vermelho 1200
HEX#290009
RGB41 0 9
CMYK42 69 37 85
PMSPreto 5
​Vermelho 1100
HEX#530013
RGB83 0 19
CMYK30 85 59 70
PMS1817
​Red 1000
HEX#7E001D
RGB126 0 29
CMYK9 100 64 48
PMS202
​Vermelho 900
HEX#A90027
RGB169 0 39
CMYK7 100 68 32
PMS201
​Vermelho 800
HEX#D40031
RGB212 0 49
CMYK3 100 70 12
PMS200
P
VermelhoVermelho 700
HEX#FF003D
RGB255 0 61
CMYK0 100 72 0
PMS199
​Vermelho 600
HEX#FF254A
RGB255 37 74
CMYK0 94 64 0
PMS192
​Vermelho 500
HEX#FF495E
RGB255 73 94
CMYK0 76 54 0
PMS1785
​Vermelho 400
HEX#FF6E75
RGB255 110 117
CMYK0 54 38 0
PMS177
​Vermelho 300
HEX#FF9392
RGB255 147 146
CMYK0 42 18 0
PMS1765
​Vermelho 200
HEX#FFBAB7
RGB255 186 183
CMYK0 23 6 0
PMS196
​Vermelho 100
HEX#FFDFDB
RGB255 223 219
CMYK0 14 5 1
PMS691

Aviso Laranja

​Orange 1200
HEX#2B0C00
RGB43 12 0
CMYK32 72 99 81
PMS2322
​Orange 1100
HEX#551A00
RGB85 26 0
CMYK15 67 100 65
PMS7568
​Orange 1000
HEX#802B00
RGB128 43 0
CMYK10 72 100 46
PMS1615
​Orange 900
HEX#AA3E00
RGB170 62 0
CMYK6 71 100 32
PMS1605
​Orange 800
HEX#D55300
RGB213 83 0
CMYK2 77 100 9
PMS1525
P
LaranjaOrange 700
HEX#FF6B00
RGB255 107 0
CMYK0 70 100 0
PMS165
​Orange 600
HEX#FF8025
RGB255 128 37
CMYK0 59 80 0
PMS164
​Orange 500
HEX#FF954A
RGB255 149 74
CMYK0 46 70 0
​Orange 400
HEX#FFAB6F
RGB255 171 111
CMYK0 33 57 0
PMS2016
​Orange 300
HEX#FFC094
RGB255 192 148
CMYK0 27 40 0
PMS713
​Orange 200
HEX#FFD6B9
RGB255 214 185
CMYK0 16 32 0
PMS2015
​Orange 100
HEX#FFEBDE
RGB255 235 222
CMYK0 8 16 0
PMS2015 @50%

Cuidado Amarelo

​Amarelo 1200
HEX#251E00
RGB37 30 0
CMYK39 43 80 91
PMSPreto 2
​Amarelo 1100
HEX#493C00
RGB73 60 0
CMYK23 38 89 70
PMS455
​Amarelo 1000
HEX#6D5A00
RGB109 90 0
CMYK19 37 100 59
PMS133
​Amarelo 900
HEX#927800
RGB146 120 0
CMYK10 23 100 43
PMS456
​Amarelo 800
HEX#B69700
RGB182 151 0
CMYK8 21 100 28
PMS111
​Amarelo 700
HEX#DBB600
RGB219 182 0
CMYK2 22 100 8
PMS110
P
AmareloAmarelo 600
HEX#FFD600
RGB255 214 0
CMYK0 11 97 2
PMS7405
​Amarelo 500
HEX#FFDC2B
RGB255 220 43
CMYK0 8 86 0
PMS7404
​Amarelo 400
HEX#FFE355
RGB255 227 85
CMYK0 7 75 0
PMS128
​Amarelo 300
HEX#FFEA80
RGB255 234 128
CMYK0 4 62 0
PMS127
​Amarelo 200
HEX#FFF1AA
RGB255 241 170
CMYK0 3 43 0
PMS1205
​Amarelo 100
HEX#FFF8D5
RGB255 248 213
CMYK0 4 27 0
PMS7401

Educação Púrpura

​Roxo 1200
HEX#170618
RGB23 6 24
CMYK100 100 10 79
PMS276
​Roxo 1100
HEX#290B2C
RGB41 11 44
CMYK91 100 8 59
PMS2695
P
AcademiaPurple 1000
HEX#3E1142
RGB62 17 66
CMYK85 100 6 38
PMS2627
​Roxo 900
HEX#5E1A64
RGB94 26 100
CMYK75 100 8 26
PMS2623
​Roxo 800
HEX#7F2387
RGB127 35 135
CMYK67 95 4 16
PMS520
P
RoxoRoxo 700
HEX#9F2CAA
RGB159 44 170
CMYK58 90 0 0
PMS2592
​Roxo 600
HEX#BF36CB
RGB191 54 203
CMYK51 79 0 0
PMS258
​Purple 500
HEX#CA59D4
RGB202 89 212
CMYK36 60 0 0
PMS7440
​Roxo 400
HEX#D57CDD
RGB213 124 221
CMYK27 52 0 0
PMS7439
​Roxo 300
HEX#E09FE6
RGB224 159 230
CMYK26 37 0 0
PMS264
​Roxo 200
HEX#ECC2EF
RGB236 194 239
CMYK17 20 0 1
PMS665
​Roxo 100
HEX#F7E5F8
RGB247 229 248
CMYK3 6 0 2
PMS663

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

contexto-de-utilização-das-cores

Gráficos

contexto-de-utilização-das-cores

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

cores-gradientes

Texto

cores-gradientes

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

cores-elétricas

Variações

cores-elétricas

Tipo

cores-elétricas

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.

cores-acessibilidade

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.

cores-acessibilidade

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.

cores-acessibilidade

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.

cores-acessibilidade