Sidjämförelse

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.

...

Exempelbild

...

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.

...

Image Added

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.

...

Färg	Variabel	Värde	Utgående namn
	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
Image RemovedImage Added	Secondary/40	#396291	Himmel/sky-base
Image Removed	Secondary/90	#C6D2DF	Himmel/sky-line
Image Removed	Secondary/95	#F1F1F5	Himmel/sky-background
95 Endast vårdpersonal/profession	#FAF8F6	-
	Accent/30	#3B4266	Himmel/sky-dark
	Accent/40	#396291	Webbspecifika färger/cta
	Accent/90	#C6D2DF	Himmel/sky-line
Image Added	Accent/95	#F1F1F5	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

...

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.

...