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
Nuanțe neutre
Nuanțe de albastru
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
Verde de siguranță
Pericol roșu
Avertisment portocaliu
Atenție Galben
Educație Purple
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.
