Primare
Paleta noastră principală construiește cea mai mare parte a creației noastre și ar trebui să reprezinte cele mai puternice nuanțe din orice piesă.
Culori
Paleta noastră de culori este înrădăcinată în istoria noastră și stă la baza aspectului nostru. Aceasta poate fi folosită pentru a asigura o prezență îndrăzneață și încrezătoare sau pentru a transmite o expertiză clară.
Paleta noastră de culori a fost organizată pentru a susține o mare varietate de scenarii și medii vizuale, asigurând în același timp o coerență clară. Trebuie evitate nuanțele, transparențele sau valorile opace ale paletei. În schimb, rămâneți la nuanțele specificate.
Nuanțe
Pentru flexibilitate, cele 3 palete de culori principale sunt disponibile în diferite valori de nuanță. Nu nuanțați sau nu adăugați transparență și utilizați nuanțele ca atare.
Alb și negru
Negru
Negru 100
HEX#000000
CMYK60 50 40 100
Alb
Alb 100
HEX#FFFFFF
CMYK0 0 0 0
Nuanțe neutre
Neutru 1200
HEX#0C121D
CMYK100 79 44 93
Neutru 1100
HEX#141B27
CMYK88 76 30 82
Neutru 1000
HEX#172234
CMYK95 72 15 67
Neutru 900
HEX#24324B
CMYK95 74 7 44
Neutru 800
HEX#344565
CMYK78 58 6 32
Neutru 700
HEX#475B81
CMYK60 40 5 20
Neutru 600
HEX#607497
CMYK43 25 3 8
Neutru 500
HEX#A9B2C4
CMYK34 17 2 7
Neutru 400
HEX#C7CCD5
CMYK24 12 2 6
Neutru 300
HEX#DEE0E4
CMYK14 7 3 5
Neutru 200
HEX#EBECEE
CMYK4 2 3 4
Neutru 100
HEX#F8F9F9
CMYK2 1 2 2
Nuanțe de albastru
P
Miezul nopții
Albastru 1200
HEX#050F22
CMYK100 80 0 90
Albastru 1100
HEX#091B3B
CMYK100 79 12 70
P
Albastru marin
Albastru 1000
HEX#0D2654
CMYK100 79 12 59
Albastru 900
HEX#123D8B
CMYK100 75 2 18
Albastru 800
HEX#1854C3
CMYK100 75 0 0
P
Albastru
Albastru 700
HEX#1D6BFC
CMYK90 48 0 0
Albastru 600
HEX#357BFC
CMYK88 40 0 0
Albastru 500
HEX#5690FD
CMYK87 30 0 0
Albastru 400
HEX#77A6FD
CMYK85 21 0 0
Albastru 300
HEX#A5C4FE
CMYK60 6 0 0
Albastru 200
HEX#C6DAFE
CMYK34 3 0 0
Albastru 100
HEX#E8F0FF
CMYK7 1 0 0
Accente
Pentru a accentua paleta principală, avem, de asemenea, un set de palete electrice pentru a comunica mișcarea și a atrage atenția asupra anumitor zone. Culorile de accent nu ar trebui să fie folosite niciodată ca stropi mari de culoare și ar trebui să reprezinte mai puțin de 5% din aspect.
Tehnologie teal
Teal 1200
HEX#001D1E
CMYK100 41 35 87
Teal 1100
HEX#013E42
CMYK100 21 28 76
Teal 1000
HEX#016065
CMYK100 16 24 60
Teal 900
HEX#018288
CMYK100 12 21 44
Teal 800
HEX#02A3AC
CMYK100 10 29 20
Teal 700
HEX#02C5CF
CMYK98 0 28 4
P
Teal
Teal 600
HEX#02E9F5
CMYK74 0 13 0
Teal 500
HEX#28F2FD
CMYK62 0 8 0
Teal 400
HEX#58F5FD
CMYK48 0 9 0
Teal 300
HEX#88F8FE
CMYK36 0 9 0
Teal 200
HEX#B8FBFE
CMYK23 0 1 0
Teal 100
HEX#E8FEFF
CMYK10 2 0 0
Verde de siguranță
Verde 1200
HEX#002318
CMYK93 33 68 85
Verde 1100
HEX#004832
CMYK94 28 74 73
Verde 1000
HEX#006C4C
CMYK89 19 72 60
Verde 900
HEX#009165
CMYK90 14 62 43
Verde 800
HEX#00B67F
CMYK100 5 65 26
Verde 700
HEX#00DA99
CMYK99 0 69 0
P
Verde
Verde 600
HEX#00FFB2
CMYK66 0 48 0
Verde 500
HEX#2DFFC0
CMYK55 0 38 0
Verde 400
HEX#59FFCD
CMYK43 0 28 0
Verde 300
HEX#86FFDB
CMYK33 0 18 0
Verde 200
HEX#B3FFE8
CMYK20 0 14 0
Verde 100
HEX#DFFFF5
CMYK17 0 12 0
Pericol roșu
Roșu 1200
HEX#290009
CMYK42 69 37 85
Roșu 1100
HEX#530013
CMYK30 85 59 70
Roșu 1000
HEX#7E001D
CMYK9 100 64 48
Roșu 900
HEX#A90027
CMYK7 100 68 32
Roșu 800
HEX#D40031
CMYK3 100 70 12
P
Roșu
Roșu 700
HEX#FF003D
CMYK0 100 72 0
Roșu 600
HEX#FF254A
CMYK0 94 64 0
Roșu 500
HEX#FF495E
CMYK0 76 54 0
Roșu 400
HEX#FF6E75
CMYK0 54 38 0
Roșu 300
HEX#FF9392
CMYK0 42 18 0
Roșu 200
HEX#FFBAB7
CMYK0 23 6 0
Roșu 100
HEX#FFDFDB
CMYK0 14 5 1
Avertisment portocaliu
Portocaliu 1200
HEX#2B0C00
CMYK32 72 99 81
Portocaliu 1100
HEX#551A00
CMYK15 67 100 65
Portocaliu 1000
HEX#802B00
CMYK10 72 100 46
Portocaliu 900
HEX#AA3E00
CMYK6 71 100 32
Portocaliu 800
HEX#D55300
CMYK2 77 100 9
P
Portocaliu
Portocaliu 700
HEX#FF6B00
CMYK0 70 100 0
Portocaliu 600
HEX#FF8025
CMYK0 59 80 0
Portocaliu 500
HEX#FF954A
CMYK0 46 70 0
Portocaliu 400
HEX#FFAB6F
CMYK0 33 57 0
Portocaliu 300
HEX#FFC094
CMYK0 27 40 0
Portocaliu 200
HEX#FFD6B9
CMYK0 16 32 0
Portocaliu 100
HEX#FFEBDE
CMYK0 8 16 0
Atenție Galben
Galben 1200
HEX#251E00
CMYK39 43 80 91
Galben 1100
HEX#493C00
CMYK23 38 89 70
Galben 1000
HEX#6D5A00
CMYK19 37 100 59
Galben 900
HEX#927800
CMYK10 23 100 43
Galben 800
HEX#B69700
CMYK8 21 100 28
Galben 700
HEX#DBB600
CMYK2 22 100 8
P
Galben
Galben 600
HEX#FFD600
CMYK0 11 97 2
Galben 500
HEX#FFDC2B
CMYK0 8 86 0
Galben 400
HEX#FFE355
CMYK0 7 75 0
Galben 300
HEX#FFEA80
CMYK0 4 62 0
Galben 200
HEX#FFF1AA
CMYK0 3 43 0
Galben 100
HEX#FFF8D5
CMYK0 4 27 0
Educație Purple
Violet 1200
HEX#170618
CMYK100 100 10 79
Violet 1100
HEX#290B2C
CMYK91 100 8 59
P
Academie
Purple 1000
HEX#3E1142
CMYK85 100 6 38
Violet 900
HEX#5E1A64
CMYK75 100 8 26
Violet 800
HEX#7F2387
CMYK67 95 4 16
P
Violet
Violet 700
HEX#9F2CAA
CMYK58 90 0 0
Violet 600
HEX#BF36CB
CMYK51 79 0 0
Violet 500
HEX#CA59D4
CMYK36 60 0 0
Violet 400
HEX#D57CDD
CMYK27 52 0 0
Violet 300
HEX#E09FE6
CMYK26 37 0 0
Violet 200
HEX#ECC2EF
CMYK17 20 0 1
Violet 100
HEX#F7E5F8
CMYK3 6 0 2
Utilizare și context
Selectarea atentă a culorilor și a contextului acestora este esențială pentru conturarea narațiunii creative, evocarea emoțiilor și asigurarea armoniei vizuale între elementele de design. Utilizați culoarea caracterelor pentru a crea o experiență de lectură confortabilă și utilizați culori care evocă acțiunea. Nu folosiți niciodată o culoare de acțiune ca titlu. Rezervați albastrul nostru pentru acțiune și linkuri și evitați să îl utilizați pentru tipuri statice. Asigurați-vă că consultați liniile directoare privind accesibilitatea pentru a afla cerințele privind contrastul tipografic adecvat.
Text
Grafică
Gradiente
Gradientele adaugă un sentiment de profunzime și ajută la comunicarea stratificării în cadrul compoziției. De asemenea, acestea pot fi utilizate pentru gradarea culorilor și umbrirea zonelor pentru tipografie. Utilizați culoarea gradată ca modalitate de a atrage ochiul privitorului într-o direcție prin conținut.
Atunci când creați gradienți, încercați să păstrați un efect subtil și folosiți o paletă în modul "skip-step", sărind peste o treaptă de culoare într-un grup de nuanțe pentru definire. Amestecarea grupurilor de culori poate fi o modalitate de a aduce culoare dinamică unei piese. Evitați să folosiți gradienți cu accente puternice ca stropi mari de culoare pe o piesă.
Blocarea culorilor
Text
Electric
Pentru a crea efectul nostru electric, utilizați liniile directoare de mai jos pentru a asigura un aspect consecvent în cadrul diferitelor experiențe.
Utilizați nuanțele unui grup de culori și construiți grupul dvs. de pictograme după cum se arată mai jos. Tehnici similare pot fi utilizate pentru alte forme de ilustrare, cum ar fi liniile sau marginile. Dimensiunea și opacitatea strălucirii și a luminii punctuale vor trebui să se adapteze graficului sau textului pentru a face efectul subtil și curat.
Pentru tipurile de caractere, se pot utiliza aceleași combinații de culori, dar acordați o atenție deosebită accesibilității. Evitați să folosiți această tehnică pe caractere mari, bold sau minuscule. Reglați spoturile opționale pentru a se potrivi blocului de text.
Specificațiile prezentate sunt pentru Figma. Vor trebui făcute ajustări pentru a se potrivi vizual în aplicațiile noastre.
Formula
Variații
Tip
Accesibilitate
Primare
Pentru a ne asigura că un număr cât mai mare de clienți ai noștri au parte de o experiență consistentă, ne dorim întotdeauna să rămânem cât mai accesibili posibil. Un mod în care putem face acest lucru este prin aderarea la liniile directoare WCAG 2.1 privind raporturile de contrast pentru text.
Mai jos veți vedea testarea completă a culorilor noastre utilizate cu fontul nostru la 16 pt pentru culori acceptabile de blocare a textului. Dacă este marcată cu "Atenție", înseamnă că îndeplinește doar standardele AA și ar trebui utilizată numai pentru text mare sau text cu greutate mare.
Acțiune
Culoarea noastră albastră OPSWAT este principala nuanță de culoare CTA și trebuie acordată o atenție deosebită atunci când este plasată peste blocurile noastre de culori primare.
Accente
Atunci când utilizați statutul și accentele noastre, fiți foarte atenți la accesibilitate. Dacă o culoare de font și blocarea sunt prezentate mai jos, acestea nu sunt recomandate.
Academia
Atunci când utilizați Academia noastră Purple, acordați o atenție deosebită accesibilității. Dacă o culoare de font și blocarea sunt prezentate mai jos, acestea nu sunt recomandate.
