Färger
Här presenteras färgerna för 1177 och Inera. De båda varumärkena använder sig av primärfärg, sekundärfärg, accentfärg och komplementfärger.
Lista med färger
Färgernas namn som används i vårt designsystem är semantiska (t ex Primary 40) och motsvarar en hexkod (t ex #C12143). Genom att skapa färgsystem med generella namn blir designsystemet enklare att hantera, förvalta och förändra.
Namn | 1177 | Inera |
|---|---|---|
Primary 20 |
|
|
Primary 30 |
|
|
Primary 40 |
|
|
Primary 50 |
|
|
Primary 60 |
|
|
Primary 70 |
|
|
Primary 90 |
|
|
Secondary 40 | - |
|
Secondary 90 | - |
|
Secondary 95 |
|
|
Accent 20 |
|
|
Accent 30 |
|
|
Accent 40 |
|
|
Accent 50 |
|
|
Accent 60 |
|
|
Accent 70 |
|
|
Accent 90 |
|
|
Accent 95 |
| - |
Neutral 10 |
|
|
Neutral 15 |
|
|
Neutral 20 |
|
|
Neutral 40 |
|
|
Neutral 50 |
| - |
Neutral 90 |
|
|
Neutral 99 |
|
|
Neutral 100 |
|
|
Success 30 |
| - |
Success 40 |
|
|
Success 99 |
|
|
Attention 40 |
|
|
Attention 95 |
|
|
Error 40 |
|
|
Error 60 |
|
|
Error 99 |
|
|
Designspecifikation 1177
1177:s varumärkesmanual är den prioriterade källan och är alltid vad vi utgår från i första hand när det gäller korrekt information om färger och färgkoder.
1177 för invånare
1177:s färgpalett består av en röd primärfärg, sekundärfärgerna mörkröd och ljusrosa och ett antal komplementfärger där blå är den vi främst använder.
Ljusgrå är även en sekundärfärg i varumärkesmanualen, men används inte i stor omfattning på webben.
På webben använder vi alltså i huvudsak röd och blå färgskala.
På detaljnivå
Röd färg:
Varumärkesbyggande illustrationer
Ikoner i ramverk (sajthuvud)
Länkar i ramverk (sajthuvud, sajtfot, megameny)
Navigationsbrickor för navigering till artikelsidor och med syfte att informera och inspirera
Blå färg:
Ikoner generellt (som används vid knappar och länkar)
Länkar, länkade rubriker (tex i puffar)
Interaktiva element och CTA: På sidan-navigering, knappar, fält, dropmenyer, listelement
Ram som ramar in t.ex. multipla sökfält
Navigationsbrickor för navigering som används till verktyg
Navigationsbrickor (finns på sektions-/samlingssidor) kan alltså ha röd eller blå färg beroende på användning:
För navigering till artikelsidor och med syfte att informera och inspirera används röd färgskala.
För navigering som används till verktyg används blå färgskala.
1177 för vårdpersonal
Färg för vårdpersonal använder samma palett som 1177 för invånare, men använder i större utsträckning de blå färgerna som primärfärg. Som komplement används en, specifikt för vårdpersonal framtagen, beige färg som sekundärfärg. Vit används som bakgrundsfärg.
Typografi för vårdpersonal använder mörkgrå färg. 1177 för vårdpersonal är mer avskalat och inte lika rött som 1177 för invånare.
Färger för statusmarkering
För att signalera en viss status kan olika färger användas, gärna i kombination med en ikon.
Blå = neutral/information
Gul = uppmärksamhet (attention)
Röd = varning
Grön = ok/avklarat
Andra färger
Komplementfärger, förutom blå samt gul för meddelanden, används i övrigt mycket begränsat och rekommenderas att endast användas när det finns ett starkt specifikt behov.
Läs mer om färgpaletten i 1177:s varumärkesmanual.
Designspecifikation Inera
Ineras varumärkesmanual är den prioriterade källan och är alltid vad vi utgår från i första hand när det gäller korrekt information om färger och färgkoder.
I Ineras färgpalett är lila den primära färgen. Sekundärfärg är beige och accentfärg är grön.
Basfärger i paletten är de som är benämnda 40. Till dessa finns även ljusare respektive mörkare nyanser.
Lila färg används varumärkesbyggande i header, footer, navigationselement och typografi. Grön färg används som cta (call to action) för tex knappar, forms-element samt länkad text och rubriker. Beige färg används i stor utsträckning för bakgrundsytor.
Kompletterande färger som orange och turkos används främst i grafik, illustrationer och diagram.
Tillgänglighet
Samtliga färger i varumärkesmanualen är framtagna för att passa både tryck och digitalt bruk. Kontrastvärdena ska uppfylla kraven för WCAG 2.2, AA.
Var noga med att kontrollera kontrastvärdena både för text mot bakgrund respektive komponenter och informationsbärande grafik. Se riktlinjer:
https://webbriktlinjer.se/riktlinjer/126-tillrackliga-kontraster/
https://webbriktlinjer.se/riktlinjer/156-anvand-tillrackliga-kontraster-i-komponenter-och-grafik/
Obs! I varumärkesmanualen nämns det att “Samtliga färger är säkrade för tryck och digitalt bruk och uppfyller kraven för WCAG 2.2, AA.” Här bör tilläggas att det gäller nyans mörk av samtliga färger mot vit bakgrund, samt nyans bas för röd, blå och grå mot vit bakgrund. Kontrollera alltid kontrastvärdena själv mot den bakgrund som används.
Färgpaletten har tagits fram av One day interact på uppdrag av Marknad och kommunikation och har i samband med detta tillgänglighetsanpassats/testats för att passa på webben (gäller huvudfärgerna).