...
| 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öd rödrosa den primära färgen. Sekundärfärg är beige och accentfärg är grön.
...