• 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
Anpassning av komponenter
Avstånd
Brytpunkter
Grid
Layout
Layoutregioner
Säkert område

Mönster

Destruktiva val
Elevation
Hjälp
Inloggning
Interaktionstillstånd
Landningssidor
Minskad rörelse
Mörkt läge
Navigering
Obligatoriska fält
Offline
Onboarding
Progress
Prominens
Sök
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-05-21

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.

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

Löv 2

Löv 1

Löv 1

Gräs

Gräs

Himmel 2

Himmel 2

Himmel 1

Himmel 1

Raps

Raps

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

Sten

Granit

Granit

Höstlöv 2

Höstlöv 2

Höstlöv 1

Höstlöv 1

Lera

Lera

Sjö

Sjö

Sekundära ID-färger ljusa

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

Äng

Äng

Mossa

Mossa

Sand

Sand

Snö

Snö

Svart och vitt

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

Svart

Svart

Vitt

Vitt

Varningsfärger

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

Varning

Varning

Smultron

Smultron

Tillåtna färgkombinationer

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 dekoration

Färg som dekoration

Design tokens

SJ Design tokens

bit.cloud

Har du frågor?

Johan Beskow

Ansvarig digital design

Hanna Fredholm

Tillgänglighetsansvarig

Relaterade riktlinjer

  • SJ Identitetsmanual 2.2 (pdf)