Renk
Bu renkler birlikte güçlü, güvenilir ve ileri görüşlü bir marka kimliği oluşturarak Kolay İK'nın insan kaynakları sektöründe çözümleriyle öne çıkmasını ve tanınmasını sağlar.
İçerik
Renk sistemimiz kullanıcı arayüzüne rengi anlamı bir şekilde uygulamanıza yardımcı olur. Renk temaları birbiriyle uyumlu, metnin erişilebilir olmasını sağlayacak ve UI öğelerini ve yüzeylerini birbirinden ayıracak şekilde tasarlanmıştır.
01
Renk Paletleri
Bu renkleri ressamın paletine benzetebilirsiniz. Mavinin her tonu var fakat gökyüzü için aslında 4 farklı ton kullanıyor. Resmini tamamlaması için ise mavinin 6 farklı renk tonuna ihtiyacı var. İhtiyaç için kullanılan her ton bizim için tanımlanmış renktir. Bunlara da token adını veririz.
Blue 50
Blue 100
Blue 200
Blue 300
Blue 400
Blue 500
Blue 600
Blue 700
Blue 800
Blue 900
Blue 1000
AA
4.50:1
Cheer 50
Cheer 100
Cheer 200
Cheer 300
Cheer 400
Cheer 500
Cheer 600
Cheer 700
Cheer 800
Cheer 900
Cheer 1000
AA
4.28:1
Orange 50
Orange 100
Orange 200
Orange 300
Orange 400
Orange 500
Orange 600
Orange 700
Orange 800
Orange 900
Orange 1000
AA
4.49:1
Red 50
Red 100
Red 200
Red 300
Red 400
Red 500
Red 600
Red 700
Red 800
Red 900
Red 1000
AA
4.48:1
02
Birincil
Birincil buton, linkler, aksiyona davet amaçlı ve önemi yüksek yerlerde tercih edilir. Sayfadaki görsel ağırlığı ~%20 olmalıdır.
Primary
Aa
Blue 600
Soft
Base
Tint
Shade
Blue 50
Blue 600
Blue 700
Blue 900
Default
Bileşenlerde öne çıkarılmak istenen yerlerde kullanılır
Soft
Alan, bölüm gibi yerlerde arkaplanlarda kullanılması önerilir.
Tint
Etkileşimler için kullanılır. Ör; Button Hover, Input Focus
Shade
Üçüncül durumlar için kullanılır. Ör; Button Pressed, Input Active
03
İkincil
Birincil işlem önceliğinden sonra gelir. Sayfada görsel ağırlığı ~~%20-%40 arasında olmalıdır.
Secondary
Aa
Blue 600
Soft
Base
Tint
Shade
Blue 50
Blue 600
Blue 700
Blue 900
Default
Bileşenlerde öne çıkarılmak istenen yerlerde kullanılır
Soft
Alan, bölüm gibi yerlerde arkaplanlarda kullanılması önerilir.
Tint
Etkileşimler için kullanılır. Ör; Button Hover, Input Focus
Shade
Üçüncül durumlar için kullanılır. Ör; Button Pressed, Input Active
04
Sistem Renkleri
Kullanıcıları uyarmak, bilgilendirmek veya hataya sebebiyet veren durumlar için kullanılan renkleri öğrenin.
Cheer
Aa
Cheer 600
Soft
Base
Tint
Shade
Cheer 50
Cheer 600
Cheer 700
Cheer 900
Alert
Aa
Red 600
Soft
Base
Tint
Shade
Red 50
Red 600
Red 700
Red 900
Warning
Aa
Orange 600
Soft
Base
Tint
Shade
Orange 50
Orange 600
Orange 700
Orange 900
Info
Aa
Blue 400
Soft
Base
Tint
Shade
Blue 100
Blue 400
Blue 500
Blue 800
Default
Bileşenlerde öne çıkarılmak istenen yerlerde kullanılır
Soft
Alan, bölüm gibi yerlerde arkaplanlarda kullanılması önerilir.
Tint
Etkileşimler için kullanılır. Ör; Button Hover, Input Focus
Shade
Üçüncül durumlar için kullanılır. Ör; Button Pressed, Input Active
05
Yüzey Renkleri
Bir alanı belirleme için kullanılan (section ve card gibi) alanların arka planlarında veya kenarlıklarında kullanılan renkleri öğrenin
Background
Ana zemin rengidir
Aa
5.44:1
White
Background Invert
Ana zemin rengidir. Kontrast gerektiren yerlerde kullanılır. Light Mode için koyu, dark mode için açık renk görünür.
Aa
11.78:1
Grey 1000
Background Light Static
Ana zemin rengidir. Light ve Dark mode’da da açık renk görünür. Primitive gibi davranır.
Aa
5.44:1
White
Background Dark Static
Ana zemin rengidir. Light ve Dark mode’da da koyu görünür. Primitive gibi davranır.
Aa
5.44:1
Grey 1000
Surface
/
Surface ana grup adı olarak kullanılır
Level 1
Level 2
Level 3
Level 4
Grey 10
Grey 20
Grey 30
Grey 50
Level 1
Background üstüne gelen ilk renktir.
Level 2
Level 1 üstüne gelen renktir. İç içe kart örneklerini düşünebilirsiniz.
Level 3
Level 2 üstüne gelen renktir. Kontrast yaratması/öncelik belirlemesi için kullanılır.
Level 4
Level 1’in kenarlık rengi olarak kullanılır. Kontrast yaratacak daha koyu zeminler için de tercih edilebilir.
06
Ön Plan Renkleri
Yakında
Metin, ikon gibi ön yüzey elementlerine ait renkleri öğrenin
Value
Aa
Value
Value
Value
Dark 2
Value
Value
Value
Value
Value
07
Yardımcı Renkler
Yakında
Marka, Eylem ve sistem renklerinin yanında tasarımda belirli bir alanı ön plana çıkarırken veya yaratıcı olunması gereken yerlerde ihtiyaç duyulacak yardımcı renkleri öğrenin.
Value
Aa
Value
Value
Value
Dark 2
Value
Value
Value
Value
Value
