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 Kannan verkkopalveluissa
Kannan visuaalisen verkkoilmeen väripaletti perustuu Kannan brändikirjan väreihin, jotka toimivat brändin visuaalisen ilmeen perustana.
Kanta-brändin värit pohjautuvat luonnon raikkaisiin sävyihin – sävyihin, jotka ovat yhteisiä koko Suomelle. Sama symbolinen ajatus koskee Kantaa, joka yhdistää meitä kaikkia ja on meidän kaikkien käytössä. Väreillä halutaan kommunikoida Kannalle keskeisiä arvoja: uskottavuutta, luotettavuutta, terveyttä, hyvinvointia ja ihmisläheisyyttä.
Kannan verkkoilmeen pääväreinä käytetään Kanta-brändikirjasta johdettua petroolia ja kirkasta vihreää. Valkoista käytetään suurina pintoina ja taustavärinä. Petroolista ja vihreästä on erikseen osoitettu sävyt, jotka yhdistyvät tunnistettavasti Kannan 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ä.
kanta-blue
10
20
30
40
50
60
70
80
90
100
kanta-green
10
20
30
40
50
60
70
80
90
100
kanta-gray
10
20
30
40
50
60
70
80
90
100
Tilavärit
Tilavärejä verkkoilmeessä käytetään toiminnalliseen tarkoitukseen – ne voivat varoittaa, viestiä virhetilanteesta tai ilmoittaa toiminnon onnistumisesta. Verkkokäyttöön suunniteltujen tilavärien tulee olla toisistaan selkeästi erottuvia ja värikylläisiä, jolloin ne toimivat parhaiten käyttäjää opastavassa roolissa.
Onnistumisesta viestivä vihreä on sama kuin tehosteena käytettävä vihreän väri. Varoitusta viestivä keltainen ja virhettä viestivä punainen on muodostettu brändikirjan lisävärien keltaisesta ja lohenpunaisesta. Petroolin sävyjä voi lisäksi käyttää neutraalien tilojen kuvaamiseen.
kanta-blue
10
20
30
40
50
60
70
80
90
100
kanta-success-green
10
20
30
40
50
60
70
80
90
100
kanta-warning-yellow
10
20
30
40
50
60
70
80
90
100
kanta-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.
kanta-lilac
10
20
30
40
50
60
70
80
90
100
kanta-magenta
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