Sidjämförelse

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

Innehållsförteckning

...

...

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
Image Modified	Primary/30	#7E2A4C
Image Modified	Primary/40	#A33662
Image Modified	Primary/90	#C03F73
Image Modified	Secondary/40	#E7DAC5
Image Modified	Secondary/90	#F6F1E9
Image Modified	Secondary/95	#F9F6F1
Image Modified	Accent/30	#305A47
Image Modified	Accent/40	#40775E
Image Modified	Accent/90	#AFD4C4
Image Modified	Neutral/20	#353636
Image Modified	Neutral/40	#727373
Image Modified	Neutral/90	#CCCCCC
Image Modified	Neutral/99	#F0F0F0
Image Modified	Neutral/100	#FFFFFF
Image Modified	Success/40	#277637
Image Modified	Success/99	#E7F7EA
Image Modified	Attention/40	#FFD748
Image Modified	Attention/95	#FFF7D9
Image Modified	Error/40	#DB0F00
Image Modified	Error/99	#FFDAD7
Image Modified	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.

...

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.

...

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.