Färger - Inera

Ineras varumärke använder i huvudsak tre färger, en primär (rödrosa)- en sekundär (beige)- och en accentfärg (grön). Två komplementfärger (turkos, orange) finns också, men bör användas mycket sparsamt (exempelvis i diagram och statistik).

Innehållsförteckning

Exempelbild

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

Färg	Variabel	Värde
Open	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.

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/

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.