• 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

Mörkt läge

Mörkt läge

Uppdaterad 2026-05-21

SJ i mörkt och ljust läge bör ge en så likartad upplevelse som möjligt. Det innebär att vi jobbar med starka och pigga färger även när bakgrunden är mörk.

Ljust tema

Ljust tema

Mörkt tema

Mörkt tema

Färgkonvertering

Konverteringen sker främst på färgnivå, inte komponentnivå. Det innebär att varje färg har en motsvarighet i mörkt läge. Text och grafik mot bakgrundsbilder konverteras dock ej.

Grafik och bilder kan justeras för att fungera bättre med valt tema, men vi undviker att ändra om grafik så att den riskerar att förvirra – tåget för en dagsavgång bör därför inte justeras så att det ser ut som ett nattåg.

Mörkt läge exempel 1

Exempel 1

Mörkt läge exempel 2

Exempel 2

Mörkt läge exempel 3

Exempel 3

Färgpalett

Design tokens

SJ Design tokens

bit.cloud

Har du frågor?

Johan Beskow

Ansvarig digital design

Hanna Fredholm

Tillgänglighetsansvarig