| Info |
|---|
1177 Vårdguidens 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. |
| Innehållsförteckning |
|---|
Exempel
...
Designspecifikation
1177 Vårdguidens färgpalett består av en röd primärfärg (main), sekundärfärgerna mörkröd (secondary-dark) och ljusrosa (secondary-light) och ett antal komplementfärger där blå (sky-base, sky-dark samt sky-background) är det vi främst använder.
Ljusgrå är även en sekundärfärg i varumärkesmanualen, men används inte i stor omfattning på webben.
...
Den blå färgen används för att signalera tjänster för professionen, samt för På sidan-navigering, länkar och övriga ikoner av funktionell karaktär.
(Se tex. komponenten Navigation inspiration/verktyg (brickor) - 1177 för att illustrera skillanden mellan färganvändning för invånartjänster och profession)
Komplementfärger, förutom blå, används begränsat och då i de ljusaste nyanserna som bakgrundsfärg i ett fåtal komponenter som meddelanden etc.
Läs mer om färgpaletten i 1177 Vårdguidens varumärkesmanual.
Do’s and Don’ts
Se 1177 Vårdguidens varumärkesmanual.
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 Ineras varumärke använder i huvudsak tre färger, en primär- en sekundär- och en accentfärg. Dessa nya färger gäller från och med den 14 december 2022 och ersätter den gamla turkos/beigea färgsättningen.
Innehållsförteckning
...
| Innehållsförteckning |
|---|
...
Exempelbild
...
Variabler
...
Variabler används i våra designsystem i Figma för att skapa färgsystem. En variabel har ett namn som inte är färgspecifikt (t ex Primary/40) och som motsvarar en hexkod (t ex #A33662). Genom att skapa färgsystem med generella namn blir designsystemet enklare att hantera, förvalta och förändra.
Varje färgvariabel har också en tillhörande variabel som heter “on”. Denna används för att bestämma färg på exempelvis text eller ikon som placeras på den, i fallet den används som bakgrund. Primary/40 har alltså en kompletterande Primary/on-40-variabel.
Färg | Variabel | Värde |
|---|---|---|
 | Primary/30 | #7E2A4C |
 | Primary/40 | #A33662 |
 | Primary/90 | #C03F73 |
 | Secondary/40 | #E7DAC5 |
 | Secondary/90 | #F6F1E9 |
 | Secondary/95 | #F9F6F1 |
 | Accent/30 | #305A47 |
 | Accent/40 | #40775E |
 | Accent/90 | #AFD4C4 |
 | Neutral/20 | #353636 |
 | Neutral/40 | #727373 |
 | Neutral/90 | #CCCCCC |
 | Neutral/99 | #F0F0F0 |
 | Neutral/100 | #FFFFFF |
 | Success/40 | #277637 |
 | Success/99 | #E7F7EA |
 | Attention/40 | #FFD748 |
 | Attention/95 | #FFF7D9 |
 | Error/40 | #DB0F00 |
 | Error/99 | #FFDAD7 |
| Background/40 | #FFFFFF |
Designspecifikation
...
I Ineras färgpalett är rödrosa 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.
Röd 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.
Färgpaletten kommer att uppdateras med fler nyanser för orange och turkos.
Tillgänglighet
...
Den nivå av tillgänglighet som gäller för digitala tjänster under varumärket Inera är minst WCAG 2.1, 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.0, 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å, plommon och grå mot vit bakgrund. Kontrollera alltid kontrastvärdena själv mot den bakgrund som används.
Research på komponenten
Färgpaletten har tagits fram av One day interact på uppdrag av Diana Block och har i samband med detta tillgänglighetsanpassats/testats för att passa på webben (gäller huvudfärgerna).
Relaterade resurser/komponenter
Status
...
Status
...
| Status | ||||
|---|---|---|---|---|
|
...
Publicerad
...
2020-01-18
...
Senast uppdaterad
...
Feedback
...
Hjälp oss att förbättra den här sidan genom att ge feedback, ställa frågor och lämna andra kommentarer på Inera UX Slacken i kanalen #komponenter_design eller #komponenter_kod alternativt kan du använda vårt formulär.
Publicerad | |
|---|---|
Senast uppdaterad |