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
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
kela-success-green
10
20
30
40
50
60
70
80
90
100
kela-warning-yellow
10
20
30
40
50
60
70
80
90
100
kela-danger-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.
kela-purple
10
20
30
40
50
60
70
80
90
100
kela-turquoise
10
20
30
40
50
60
70
80
90
100
Poistuvat lisävärit
Poistuvat lisävärit poistetaan versiossa 17.0.0, eikä niiden käyttöä enää suositella uusissa toteutuksissa.
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
Täydentävät sävyt
KDS sisältää joitakin täydentäviä sävyjä, jotka eivät kuulu tavanomaiseen 10-portaiseen asteikkoon. Nämä sävyt on tarkoitettu erityisiin käyttötarkoituksiin, ja niitä tulisi käyttää harkiten.
White (ja black-soft tummassa teemassa) sävyjä käytetään tyypillisisesti suurilla pinnoilla käyttöliittymän taustavärinä. White-soft (ja black tummassa teemassa) sen sijaan soveltuu taustaväriksi esimerkiksi dashboardeissa tai muissa tilanteissa joissa käytetään valkopohjaisia paneeleja sisällön rajaamiseen.
black
black
soft
white
white
soft