Färger - 1177

1177:s färgpalett består av en röd primärfärg, sekundärfärgerna mörkröd och ljusrosa samt ett antal komplementfärger.

Färger

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.

Open

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 #C12143). 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	Utgående namn

Färg	Variabel	Värde	Utgående namn
Open	Primary/30	#6A0032	Basfärger/secondary-dark
	Primary/35	#A00B36	Webbspecifika färger/nav
	Primary/40	#C12143	Basfärger/main
	Primary/90	#FAEEF0	Basfärger/secondary-light
	Secondary/95 Endast vårdpersonal/profession	#FAF8F6	-
	Accent/30	#3B4266	Himmel/sky-dark
	Accent/40	#396291	Webbspecifika färger/cta
	Accent/90	#C6D2DF	Himmel/sky-background
	Neutral/20	#353535	Sten/stone-dark
	Neutral/40	#636466	Sten/stone-base
	Neutral/50	#808285	Sten/stone-clear
	Neutral/90	#DADBDC	Sten/stone-line
	Neutral/99	#F1F2F2	Sten/stone-background
	Neutral/100	#FFFFFF	Sten/white
	Success/30	#395428	Gräs/grass-dark
	Success/40	#419002	Gräs/grass-base
	Success/99	#EEF8EE	Gräs/grass-background
	Attention/40	#FFC100	Sol/sun-clear
	Attention/95	#FFF8E0	Sol/sun-background
	Error/40	#C12143	Basfärger/main
	Error/99	#FAEEF0	Basfärger/secondary-light
	Background/40	#FFFFFF	Basfärger/white

Designspecifikation

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 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.

På webben använder vi alltså i huvudsak röd och blå färgskala.

När ska jag använda röd eller blå färg?

• Röd färg används för element som är avsedda för information (inspiration).

• Blå färg används för element som är avsedda för verktyg.
  
  

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.

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.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.

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).

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.