Väripaletit
Kela Design Systemin värijärjestelmä perustuu kolmeen eri väripalettiin: pääväreihin, tilaväreihin ja lisäväreihin. Kun värejä käytetään ulkoasussa johdonmukaisesti, verkkopalvelu näyttäytyy tunnistettavana ja yhtenäisenä.
Päävärit Kelan verkkopalveluissa
Verkkoilmeen päävärejä sovelletaan toistuvissa elementeissä ja käyttöliittymien kiinteissä osissa. Päävärien paletti muodostuu Kelan brändiväreistä, jotka toimivat Kelan visuaalisen ilmeen perustana.
Verkossa pääväreinä käytetään sinistä, keltaista sekä harmaan sävyjä. Valkoista käytetään suurina pintoina ja taustavärinä. Sinisestä ja keltaisesta on erikseen osoitettu sävyt, jotka yhdistyvät tunnistettavasti Kelan brändi-ilmeeseen. Sävyt on kuvattu pyöreällä muodolla.
Harmaan eri sävyjä voidaan käyttää yksityiskohdissa, joissa sovelletaan matalaa kontrastia ja visuaalisesti kevyttä tyyliä (taustasävyt, reunaviivat ja erottimet). Harmaan tummimpia sävyjä voidaan käyttää myös tekstissä.
kela-blue
10
20
30
40
50
60
70
80
90
100
kela-yellow
10
20
30
40
50
60
70
80
90
100
kela-gray
10
20
30
40
50
60
70
80
90
100
black
black
white
white
Tilavärit
Tilavärejä käytetään ilmaisemaan asian tilaa ja antamaan välitön palaute palvelun käyttäjälle. Tilaväreillä on toiminnallinen ja käyttäjää opastava rooli.
Värit ovat toisistaan selkeästi erottuvia ja värikylläisiä. Tilavärit noudattavat vakiintunutta soveltamislogiikkaa: vihreä viestii onnistumisesta, keltainen herättää huomion ja punainen varoittaa tai kertoo virheestä. Sinistä brändiväriä voi käyttää neutraalien tilojen kuvaamiseen.
Värejä ei tule yleensä käyttää kuvittavissa yksityiskohdissa tai sellaisissa sisällön osissa, joiden tarkoitus on joku muu kuin käyttäjän ohjaaminen tai opastaminen. Poikkeuksen tästä muodostaa kuitenkin keltainen brändiväri, jota sovelletaan sekä tilavärinä että päävärinä.
kela-blue
10
20
30
40
50
60
70
80
90
100
success-green
10
20
30
40
50
60
70
80
90
100
warning-yellow
10
20
30
40
50
60
70
80
90
100
warning-red
10
20
30
40
50
60
70
80
90
100
Lisävärit
Lisävärejä voidaan hyödyntää kuvittavissa elementeissä, informaatiografiikassa sekä tiettyyn käyttötarkoitukseen räätälöidyissä sisällön osissa.
Lisävärien käyttö voi olla perusteltua esimerkiksi kaavioissa, tilastokuvioissa sekä muissa havainnollistavissa visuaalisissa sisällöissä, joissa värillä on ensisijaisesti tietoa välittävä merkitys.
Käytä lisävärejä maltillisesti ja tapauskohtaisesti harkiten, niillä on Kelan verkkoilmeen värikokonaisuudessa sekundäärinen ja täydentävä rooli. Laajojen ja voimakkaiden väripintojen muodostamista kannattaa yleensä välttää, jotta Kelan organisaatioilmeen mukainen värien hierarkia säilyy asiakkaan näkökulmasta selkeänä ja loogisena.
dark-orange
10
20
30
40
50
60
70
80
90
100
dark-red
10
20
30
40
50
60
70
80
90
100
dark-purple
10
20
30
40
50
60
70
80
90
100
dark-turquoise
10
20
30
40
50
60
70
80
90
100
bright-blue
10
20
30
40
50
60
70
80
90
100
bright-lime
10
20
30
40
50
60
70
80
90
100