• Start
  • Blogg
  • Kom igång
  • Riktlinjer
  • Komponenter
  • Changelog
  • Tillgänglighet
  • Inställningar

Riktlinjer

Riktlinjer

​
​

Inga resultat hittade, prova med andra sökvillkor.

Personlighet

Designfilosofi
Designprinciper
Värdeord

Identitet

Bildmanér
Dotterbolag
Färger
Ikonografi
Logotyp
Tonläge
Typografi
UX-writing

Layout

Angränsande ytor
Brytpunkter
Grid
Layoutregioner
Mellanrum
Säkert område

Mönster

Destruktiva val
Hjälp
Inloggning
Inställningar
Interaktionstillstånd
Landningssidor
Navigering
Obligatoriska fält
Offline
Onboarding
Progress
Startskärm
Textinmatning
Tomma tillstånd
Validering

Produkter och tjänster

Bodies för bebisar
Chattbot och chatt
Desktop web apps för professionella användare
Digitala skärmar
Html-mejl

Färger

Färger

Uppdaterad 2026-06-16

Färg är en viktig del av SJs visuella identitet. En färg kan signalera renhet, stolthet eller trygghet. Den kan också vara mer omedelbar, varna eller peka på något viktigt. För största möjliga likhet, oberoende av medium och teknik, finns våra färger i olika färgsystem.

Bakgrund

Varje dag passerar våra tåg hundratals stationer och binder samman Sverige från norr till söder. SJ är också en del av lösningen för att Sveriges klimatmål ska nås. Därför är det naturligt att vår färgpalett består av färger hämtade från hela Sveriges natur.

Bakgrund

Primära ID-färger

Distinkta, pigga färger hämtade från svensk natur utgör primärfärger och skapar ett modernt och optimistiskt SJ. Löv 2 och Himmel 2 är mörkare nyanser av Löv 1 och Himmel 1 och ska bara användas om Löv 1 och Himmel 1 inte ger tillräcklig kontrast mellan förgrund och bakgrund.

Löv 2, Hex: 00892F

Löv 2, Hex: 00892F

Löv 1, Hex: 00AB3B

Löv 1, Hex: 00AB3B

Gräs, Hex: 62DB5A

Gräs, Hex: 62DB5A

Himmel 2, Hex: 1B96BA

Himmel 2, Hex: 1B96BA

Himmel 1, Hex: 22BCE8

Himmel 1, Hex: 22BCE8

Raps, Hex: FFD700

Raps, Hex: FFD700

Sekundära ID-färger

Varma, dämpade färger hämtade från svensk natur uttrycker trygghet och lugn. Passar bra som accentfärger eller när vi vill ”vrida ner” volymen. Höstlöv 2 är en mörkare nyans av Höstlöv 1 och ska bara användas om Höstlöv 1 inte ger tillräcklig kontrast mellan förgrund och bakgrund.

Sten, Hex: 252525

Sten, Hex: 252525

Granit, Hex: 696B57

Granit, Hex: 696B57

Höstlöv 2, Hex: C44E00

Höstlöv 2, Hex: C44E00

Höstlöv 1, Hex: F56200

Höstlöv 1, Hex: F56200

Lera, Hex: A57D4C

Lera, Hex: A57D4C

Sjö, Hex: 00749A

Sjö, Hex: 00749A

Sekundära ID-färger ljusa

Som komplement finns ett antal ljusare färgtoningar som fungerar bra för bakgrundsplattor.

Äng, Hex: E8F7E4

Äng, Hex: E8F7E4

Mossa, Hex: E8F7F6

Mossa, Hex: E8F7F6

Sand, Hex: F9F4CF

Sand, Hex: F9F4CF

Snö, Hex: F5F5EE

Snö, Hex: F5F5EE

Svart och vitt

Text och grafik är oftast svart. Bakgrunder är oftast vita.

Svart, Hex: 000000

Svart, Hex: 000000

Vitt, Hex: FFFFFF

Vitt, Hex: FFFFFF

Varningsfärger

Används för att kommunicera att något har gått fel.

Varning, Hex: DE1F26

Varning, Hex: DE1F26

Smultron, Hex: FCE9E9

Smultron, Hex: FCE9E9

Tillåtna färgkombinationer

Då vi strävar efter hög läsbarhet i allt vi gör är det viktigt att välja förgrundsfärger som skapar god kontrast mot bakgrunden.

  • Meningsbärande grafik såsom ikoner och diagram måste ha ett kontrastvärde på minst 3:1.
  • Stor text måste ha ett kontrastvärde på minst 3:1. Stor text är 18 punkter (24 pixlar) och större, eller 14 punkter (19 pixlar) och större om den är i fetstil.
  • Vanlig text måste ha ett kontrastvärde på minst 4,5:1. Vanlig text är mindre än 18 punkter (24 pixlar), och mindre än 14 punkter (19 pixlar) om den är i fetstil.
Löv 2 + Vitt

Löv 2 + Vitt

Löv 1 + Vitt

Löv 1 + Vitt

Gräs + Svart

Gräs + Svart

Himmel 2 + Vitt

Himmel 2 + Vitt

Himmel 1 + Svart

Himmel 1 + Svart

Raps + Svart

Raps + Svart

Sjö + Vitt

Sjö + Vitt

Äng + Svart

Äng + Svart

Mossa + Svart

Mossa + Svart

Sand + Svart

Sand + Svart

Snö + Svart

Snö + Svart

Snö + Granit

Snö + Granit

Snö + Löv 2

Snö + Löv 2

Snö + Himmel 2

Snö + Himmel 2

Snö + Höstlöv 2

Snö + Höstlöv 2

Vitt + Svart

Vitt + Svart

Vitt + Granit

Vitt + Granit

Vitt + Löv 1

Vitt + Löv 1

Vitt + Himmel 1

Vitt + Himmel 1

Vitt + Höstlöv 1

Vitt + Höstlöv 1

Vitt + Varning

Vitt + Varning

Varning + Vitt

Varning + Vitt

Smultron + Svart

Smultron + Svart

Exempel på användning

Färg som interaktion

Färg som interaktion

Färg som fokusmarkering

Färg som fokusmarkering

Färg som hjälp vid validering

Färg som hjälp vid validering

Färg som förstärkning

Färg som förstärkning

Färg som markering av valda element

Färg som markering av valda element

Färg som signal och progress

Färg som signal och progress

Färg som bakgrundsplatta

Färg som bakgrundsplatta

Assets

Tokens

bit.cloud

Har du frågor?

Margareta Lindén

Varumärkesupplevelse

Relaterade riktlinjer

  • Identitetsmanual 2.2 (pdf)