Färger

Våra färger inspireras av det svenska landskapet, där våra tåg varje dag susar genom ett skiftande landskap i landsbygd, fjäll, kust, skog och stad. Vi använder färg för att skapa en känsla, men också för att särskilja, skapa tempo och dynamik i flöden och tydliggöra funktion och val.

Precis som nyansrikedomen i det svenska landskapet, så vill vi inte bara vara en färg, utan det är dynamiken och harmonin i våra färger som tillsammans skapar uttrycket. Men vi får aldrig bli röriga eller otydliga. Därför är friheten i färgval en frihet under ansvar.

Färgpalett

Hur ska man tänka kring färger?

SJ associeras ofta med sin gröna färg. Det gröna förstärker också vårt starka miljöengagemang. Därför bör grönt vara huvudsakliga upplevelsen av vårt varumärke digitalt. Samtidigt är vi inte rädda för att använda våra övriga färger för att skapa en dynamisk och färgstark upplevelse – vi vill inte fastna i svart, vitt och grönt.

Även om vi vill upplevas som pigga och färgglada vill vi undvika att upplevas som för röriga. Vi använder färg som en signal, för att guida eller för att förstärka ett budskap. Vi kan även använda färg för att dekorera – för att upplevas som pigga – men vi undviker att blanda för många färger på en och samma vy eftersom det lätt blir rörigt och syftet med att använda färg riskerar att gå förlorat.

Specifika färger är inte låsta till särskilda funktioner, även om grönt ofta är att föredra för interaktionsobjekt som är primära.

Färg och tillgänglighet

Färg får aldrig påverka tillgängligheten negativt – vi ska alltid uppfylla gällande kontrastvärden enligt WCAG. Använd gärna de ljusare fägerna, men respektera minsta textstorlek per färg. Låt färger snarare komplettera än utgöra grunden för viktiga interaktioner.

Färg får aldrig användas som den enda sättet att särskilja eller förklara en funktion eller händelse, utan måste alltid kompletteras med text.

Exempel på användning

Exempel med fyra färgglada knappar, bland annat "Visa biljett".

Färg som interaktion

Orange text för "sista minuten"-pris.

Färg som förstärkning

Röda felmeddelanden i ett formulär.

Färg som hjälp vid validering

Grön ram runt ett valt chip.

Färg som funktion & dekoration

Grön och gul färg för att visa tågets framfart.

Färg som signal

Relaterade riktlinjer