Gå til hovedinnhold
KOMPONENTER

Tokens

Designtokens er vårt felles designspråk satt i system - bindeleddet mellom alle flater.

Ved bruk av pakken @entur/tokens så har man tilgang til alle gjenbrukbare verdier

som kan brukes for å designe sider og komponenter for å følge Entur sin visuelle identitet.

Disse kan aksesseres enten ved CSS, SASS, LESS eller Javscript-variabler. Eksempelvis, importering av SASS-variablene og bruk av dem.

@import '~@entur/tokens/dist/styles.scss';
.grey-text {
  color: $colors-greys-grey40;
}

SASS og LESS variablene aksesseres med henholdsvis $ og @, og er semantisk delt opp ved - (bindestrek).

CSS-variablene prefikses med to bindestrek. Javascript-variablene aksesseres som nestede objekter.

Tokens

Du kan lese mer om fargene våre i visuell identitet-seksjonen.

Farger

NavnVerdiEksempel
#181c56
#aeb7e2
#ffffff
#ff5959
#ffbf9e
#292b6a
#393d79
#54568c
#656782
#8285a8
#babbcf
#d1d4e3
#ebebf1
#949494
#d1d3d3
#e9e9e9
#f3f3f3
#f8f8f8
#0082b9
#64b3e7
#e1eff8
#d31b1b
#ff9494
#ffcece
#1a8e60
#5ac39a
#d0f1e3
#efd358
rgba(68, 192, 255, 0.5)
#1a1a1a
#de8108
#dd5415
#800664
#800664
#642e88
#642e88
#642e88
#181c56
#181c56
#181c56
#00367f
#0497bc
#0497bc
#388f76
#f08901
#ff5974
#e258c3
#e258c3
#a476e5
#a476e5
#a476e5
#ffffff
#ffffff
#ffffff
#42a5f5
#6fdfff
#6fdfff
#00db9b

Avstander

NavnVerdiEksempel
0px (0rem)
16px (1rem)
4px (0.25rem)
8px (0.5rem)
12px (0.75rem)
16px (1rem)
24px (1.5rem)
32px (2rem)
40px (2.5rem)
48px (3rem)
56px (3.5rem)
64px (4rem)
72px (4.5rem)
80px (5rem)
88px (5.5rem)
96px (6rem)

Tekstvekting

NavnVerdiEksempel
500
ABC abc
600
ABC abc

Tekststørrelser

NavnVerdiEksempel
10px (0.625rem)
ABC abc
12px (0.75rem)
ABC abc
14px (0.875rem)
ABC abc
16px (1rem)
ABC abc
24px (1.5rem)
ABC abc
28px (1.75rem)
ABC abc
32px (2rem)
ABC abc
40px (2.5rem)
ABC abc

Linjehøyder

NavnVerdi
14px (0.875rem)
16px (1rem)
20px (1.25rem)
22px (1.375rem)
24px (1.5rem)
28px (1.75rem)
30px (1.875rem)
36px (2.25rem)
42px (2.625rem)
48px (3rem)
60px (3.75rem)

Breakpoints

NavnVerdi
800px (50rem)
1200px (75rem)

Border-bredde

NavnVerdiEksempel
2px (0.125rem)
1px (0.0625rem)
2px (0.125rem)
4px (0.25rem)

Border-radius

NavnVerdiEksempel
1px (0.0625rem)
1px (0.0625rem)
4px (0.25rem)

Z-indexer

NavnVerdi
-1
0
10
20
30
40
50

Timings

NavnVerdiEksempel
0.1s
Hover for transisjonstid
0.2s
Hover for transisjonstid
0.5s
Hover for transisjonstid

Shadows

NavnVerdiEksempel
0 0 0.125rem 0.125rem rgba(68, 192, 255, 0.5)
0 0.125rem 0.25rem 0.125rem rgba(0, 0, 0, 0.2)