Birincil
Birincil paletimiz kreatif çalışmalarımızın büyük kısmını oluşturur ve her parçada en güçlü tonları temsil etmelidir.
Renkler
Renk paletimizin kökleri tarihimize dayanır ve görünümümüzün temelini oluşturur. Cesur, kendinden emin bir duruş sergilemek veya net bir uzmanlık aktarmak için kullanılabilir.
Renk paletimiz, net bir tutarlılık sağlarken çok çeşitli görsel senaryoları ve ortamları destekleyecek şekilde düzenlenmiştir. Paletin renk tonları, saydamlıkları veya opak değerlerinden kaçınılmalıdır. Bunun yerine belirtilen tonlara sadık kalın.
Gölgeler
Esneklik için 3 ana renk paleti farklı gölge değerlerinde mevcuttur. Renk tonu veya şeffaflık eklemeyin ve tonları olduğu gibi kullanın.
Siyah & Beyaz
Siyah
Siyah 100
HEX#000000
CMYK60 50 40 100
Beyaz
Beyaz 100
HEX#FFFFFF
CMYK0 0 0 0
Nötr Tonlar
Nötr 1200
HEX#0C121D
CMYK100 79 44 93
Nötr 1100
HEX#141B27
CMYK88 76 30 82
Nötr 1000
HEX#172234
CMYK95 72 15 67
Nötr 900
HEX#24324B
CMYK95 74 7 44
Nötr 800
HEX#344565
CMYK78 58 6 32
Neutral 700
HEX#475B81
CMYK60 40 5 20
Nötr 600
HEX#607497
CMYK43 25 3 8
Nötr 500
HEX#A9B2C4
CMYK34 17 2 7
Nötr 400
HEX#C7CCD5
CMYK24 12 2 6
Nötr 300
HEX#DEE0E4
CMYK14 7 3 5
Nötr 200
HEX#EBECEE
CMYK4 2 3 4
Nötr 100
HEX#F8F9F9
CMYK2 1 2 2
Mavi Tonlar
P
Gece yarısı
Mavi 1200
HEX#050F22
CMYK100 80 0 90
Mavi 1100
HEX#091B3B
CMYK100 79 12 70
P
Donanma
Mavi 1000
HEX#0D2654
CMYK100 79 12 59
Mavi 900
HEX#123D8B
CMYK100 75 2 18
Mavi 800
HEX#1854C3
CMYK100 75 0 0
P
Mavi
Mavi 700
HEX#1D6BFC
CMYK90 48 0 0
Mavi 600
HEX#357BFC
CMYK88 40 0 0
Mavi 500
HEX#5690FD
CMYK87 30 0 0
Mavi 400
HEX#77A6FD
CMYK85 21 0 0
Mavi 300
HEX#A5C4FE
CMYK60 6 0 0
Mavi 200
HEX#C6DAFE
CMYK34 3 0 0
Mavi 100
HEX#E8F0FF
CMYK7 1 0 0
Aksanlar
Ana paletimizi vurgulamak için ayrıca hareket iletmek ve belirli alanlara dikkat çekmek için bir dizi elektrikli paletimiz vardır. Vurgu renkleri asla büyük renk sıçramaları olarak kullanılmamalı ve mizanpajın %5'inden azını oluşturmalıdır.
Teknoloji 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
Güvenlik Yeşili
Yeşil 1200
HEX#002318
CMYK93 33 68 85
Yeşil 1100
HEX#004832
CMYK94 28 74 73
Yeşil 1000
HEX#006C4C
CMYK89 19 72 60
Yeşil 900
HEX#009165
CMYK90 14 62 43
Yeşil 800
HEX#00B67F
CMYK100 5 65 26
Yeşil 700
HEX#00DA99
CMYK99 0 69 0
P
Yeşil
Yeşil 600
HEX#00FFB2
CMYK66 0 48 0
Green 500
HEX#2DFFC0
CMYK55 0 38 0
Yeşil 400
HEX#59FFCD
CMYK43 0 28 0
Yeşil 300
HEX#86FFDB
CMYK33 0 18 0
Yeşil 200
HEX#B3FFE8
CMYK20 0 14 0
Yeşil 100
HEX#DFFFF5
CMYK17 0 12 0
Tehlike Kırmızı
Kırmızı 1200
HEX#290009
CMYK42 69 37 85
Kırmızı 1100
HEX#530013
CMYK30 85 59 70
Kırmızı 1000
HEX#7E001D
CMYK9 100 64 48
Kırmızı 900
HEX#A90027
CMYK7 100 68 32
Kırmızı 800
HEX#D40031
CMYK3 100 70 12
P
Kırmızı
Kırmızı 700
HEX#FF003D
CMYK0 100 72 0
Kırmızı 600
HEX#FF254A
CMYK0 94 64 0
Kırmızı 500
HEX#FF495E
CMYK0 76 54 0
Kırmızı 400
HEX#FF6E75
CMYK0 54 38 0
Kırmızı 300
HEX#FF9392
CMYK0 42 18 0
Kırmızı 200
HEX#FFBAB7
CMYK0 23 6 0
Kırmızı 100
HEX#FFDFDB
CMYK0 14 5 1
Uyarı Turuncu
Turuncu 1200
HEX#2B0C00
CMYK32 72 99 81
Turuncu 1100
HEX#551A00
CMYK15 67 100 65
Turuncu 1000
HEX#802B00
CMYK10 72 100 46
Turuncu 900
HEX#AA3E00
CMYK6 71 100 32
Turuncu 800
HEX#D55300
CMYK2 77 100 9
P
Turuncu
Turuncu 700
HEX#FF6B00
CMYK0 70 100 0
Turuncu 600
HEX#FF8025
CMYK0 59 80 0
Turuncu 500
HEX#FF954A
CMYK0 46 70 0
Turuncu 400
HEX#FFAB6F
CMYK0 33 57 0
Turuncu 300
HEX#FFC094
CMYK0 27 40 0
Turuncu 200
HEX#FFD6B9
CMYK0 16 32 0
Turuncu 100
HEX#FFEBDE
CMYK0 8 16 0
Dikkat Sarı
Sarı 1200
HEX#251E00
CMYK39 43 80 91
Sarı 1100
HEX#493C00
CMYK23 38 89 70
Sarı 1000
HEX#6D5A00
CMYK19 37 100 59
Sarı 900
HEX#927800
CMYK10 23 100 43
Sarı 800
HEX#B69700
CMYK8 21 100 28
Sarı 700
HEX#DBB600
CMYK2 22 100 8
P
Sarı
Sarı 600
HEX#FFD600
CMYK0 11 97 2
Sarı 500
HEX#FFDC2B
CMYK0 8 86 0
Sarı 400
HEX#FFE355
CMYK0 7 75 0
Sarı 300
HEX#FFEA80
CMYK0 4 62 0
Sarı 200
HEX#FFF1AA
CMYK0 3 43 0
Sarı 100
HEX#FFF8D5
CMYK0 4 27 0
Mor Eğitim
Mor 1200
HEX#170618
CMYK100 100 10 79
Mor 1100
HEX#290B2C
CMYK91 100 8 59
P
Akademi
Mor 1000
HEX#3E1142
CMYK85 100 6 38
Mor 900
HEX#5E1A64
CMYK75 100 8 26
Mor 800
HEX#7F2387
CMYK67 95 4 16
P
Mor
Mor 700
HEX#9F2CAA
CMYK58 90 0 0
Mor 600
HEX#BF36CB
CMYK51 79 0 0
Mor 500
HEX#CA59D4
CMYK36 60 0 0
Mor 400
HEX#D57CDD
CMYK27 52 0 0
Mor 300
HEX#E09FE6
CMYK26 37 0 0
Mor 200
HEX#ECC2EF
CMYK17 20 0 1
Mor 100
HEX#F7E5F8
CMYK3 6 0 2
Kullanım ve Bağlam
Rengin ve bağlamının dikkatli bir şekilde seçilmesi, yaratıcı anlatının şekillendirilmesinde, duyguların uyandırılmasında ve tasarım öğeleri arasında görsel uyumun sağlanmasında çok önemlidir. Rahat bir okuma deneyimi yaratmak için yazı rengini kullanın ve harekete geçirici renkler kullanın. Eylem rengini asla başlık olarak kullanmayın. Maviyi eylem ve bağlantılar için ayırın ve statik yazılar için kullanmaktan kaçının. Uygun yazı kontrastı gereksinimleri için erişilebilirlik yönergelerini incelediğinizden emin olun.
Metin
Grafikler
Gradyanlar
Degradeler derinlik hissi katar ve kompozisyon içindeki katmanlaşmayı iletmeye yardımcı olur. Ayrıca tipografi alanlarını renklendirmek ve gölgelendirmek için de kullanılabilirler. İzleyicinin gözünü içerik boyunca bir yöne çekmenin bir yolu olarak dereceli renk kullanın.
Degradeler oluştururken etkiyi ince tutmaya çalışın ve tanımlama için bir gölge grubundaki bir renk adımını atlayarak bir paleti atlama adımı tarzında kullanın. Renk gruplarını karıştırmak bir parçaya dinamik renk katmanın bir yolu olabilir. Bir parça üzerinde büyük renk sıçramaları olarak vurgulu ağır degradeler kullanmaktan kaçının.
Renk Engelleme
Metin
Elektrik
Elektrik efektimizi oluşturmak için, farklı deneyimler arasında tutarlı bir görünüm sağlamak üzere aşağıdaki yönergeleri kullanın.
Bir renk grubunun tonlarını kullanın ve simge grubunuzu aşağıda gösterildiği gibi oluşturun. Çizgiler veya kenarlıklar gibi diğer illüstrasyon şekilleri için de benzer teknikler kullanılabilir. Parlama ve spot ışık boyutu ve opaklığının, efekti ince ve temiz hale getirmek için grafik veya metinle ölçeklendirilmesi gerekecektir.
Yazı tipi için aynı renk kombinasyonları kullanılabilir ancak erişilebilirliğe çok dikkat edin. Tekniği büyük, kalın yazı tipi veya küçük yazı tipi üzerinde kullanmaktan kaçının. İsteğe bağlı spot ışıklarını metin bloğuna uyacak şekilde ayarlayın.
Gösterilen özellikler Figma içindir. Uygulamalarımızda görsel olarak eşleşmesi için ayarlamalar yapılması gerekecektir.
Formül
Varyasyonlar
Tip
Erişilebilirlik
Birincil
Mümkün olduğunca çok sayıda müşterimizin tutarlı bir deneyim yaşamasını sağlamak için her zaman mümkün olduğunca erişilebilir kalmak istiyoruz. Bunu yapabilmemizin bir yolu, metin için kontrast oranlarına ilişkin WCAG 2.1 yönergelerine bağlı kalmaktır.
Aşağıda, kabul edilebilir metin engelleme renkleri için 16 pt yazı tipimizle kullanılan renklerimizin tam testini göreceksiniz. "Dikkat" olarak işaretlenmişse, bu yalnızca AA standartlarını karşıladığı ve yalnızca büyük veya kalın metinlerde kullanılması gerektiği anlamına gelir.
Eylem
OPSWAT Mavi rengimiz ana CTA renk tonumuzdur ve ana renk bloklarımızın üzerine yerleştirilirken özel dikkat gösterilmelidir.
Aksanlar
Durumumuzu ve vurgularımızı kullanırken erişilebilirlik için ekstra dikkatli olun. Aşağıda bir yazı tipi rengi ve bloklama gösteriliyorsa bunlar önerilmez.
Akademi
Academy Purple'ı kullanırken erişilebilirlik için ekstra dikkatli olun. Aşağıda bir yazı tipi rengi ve bloklama gösteriliyorsa bunlar önerilmez.
