Färger
Västra Götalandsregionen har fem dekorfärger (röd, grön, blå, gul och grå) som används för att förmedla varumärket. Av dessa använder Komponentkartan tre som temafärger; röd, grön och blå. Den gula dekorfärgen har valts bort eftersom den har låg kontrast. Den grå dekorfärgen används som gråskala i alla teman. I Komponentkartan finns även en fjärde temafärg som är neutral blågrå färg. Det neutrala temat är framtaget för att användas i en portal där man når funktionalitet från flera applikationer. Vattenstämplen (loggan) får inte visas i det neutrala temat eftersom det inte är en officiell VGR-färg.
Temafärgerna används för att färgsätta applikationer som utvecklas inom Västra Götalandsregionen. För applikationer som delar användare med andra egenutvecklade applikationer rekommenderas att välja olika temafärger så att användarna lättare kan känna igen vilken applikation de befinner sig i. Temafärgen ger viktiga interaktiva element färg och används även på banner och meny.
Temafärgerna finns i tre nyanser: primär, sekundär och dimmad. Den primära nyansen är tagen från den visuella profilen. Den sekundära nyansen är 70 % av den primära och den dimmade är 10 % av den primära. Dock har vissa nyanser anpassats så att intrycket blir att alla sekundära (och dimmade) nyanser har samma kulörthet.
Bilden nedan visar temafärgernas HEX-koder.
Bilden nedan visar vilka varianter av text och ikoner som får visas på dem.
Det finns färger som används på gränssnittselement och texter som är gemensamma för alla teman. De är utvalda för att vara i tydlig kontrast mot temafärgerna. De används på följande sätt:
- Bakgrundsfärgen är den färgen som används som bakgrund för hela sidan när du använder Komponentkartan.
- Fokusfärgen används när element i gränssnittet fokuseras
- Success används för att visa att något har lyckats, t.ex. att en användare har lagts till.
- Fail, primär används för att visa att något är fel, t.ex. om man har matat in information på ett felaktigt format.
- Fail, sekundär används som bakgrund till den primära fail-färgen.
- Svart används främst till text men även former och ikoner.
- Vit används för att rama in innehåll i page-blocks, page-header etc.
- Grå, mörk används för platshållartext, men kan även användas i illustrationer eller likande när svart blir för starkt.
- Grå, primär används för inaktiva texter och komponenter, men kan även användas i illustrationer eller likande när svart blir för starkt.
- Grå, sekundär används på likande sätt som den primära grå, men den får inte användas på text.
- Grå, dimmad används på likande sätt som den primära grå, men den får inte användas på text.
Bilden nedan visa UI-färgernas HEX-koder.
Bilden nedan visar vilka varianter av text och ikoner som får visas på dem.
Text ska ha hög läsbarhet och det är därför viktigt att textens färg har hög kontrast mot sin bakgrund. Främst används en svart färg på text, men i vissa komponenter används även vit text. Platshållartext har fått en egen kulör. Inaktiv text ha lägre kontrast och då används den primära grå färgen.
På vit bakgrund får svart, mörk grå och primär grå visas.
Utöver dekorfärgerna finns även ett antal andra varumärkesfärger i den visuella profilen; beige, grön, lime, orange, rosa, lila, röd och turkos. Varumärkesfärgerna används för att färgsätta visuella objekt som ikoner och grafer som är stödjande information. De får inte användas på interaktiva element som t.ex. knappar, då används temafärgen istället.
Bilden nedan visar varumärkesfärgerna och deras HEX-koder.
Bilden nedan visar vilka varianter av text och ikoner som får visas på dem.
