Gå til hovedinnhold
TOKENS

Oversikt

Oversikt over designsystemets fargetokens

Primitive

«Primitive tokens» representerer fargepaletten til Entur. Disse brukes til å bygge de andre tokensettene.

Du viser nå scss, du kan endre format i innstillinger.

blue

blue-100
#292b6a
blue-90
#393d79
blue-80
#54568c
blue-70
#626493
blue-60
#8284ab
blue-50
#9ea0bd
blue-40
#bcbdd2
blue-30
#d9dae8
blue-20
#eaeaf1
blue-10
#f6f6f9

canary

canary-100
#483705
canary-90
#775b09
canary-80
#b38909
canary-70
#e9b10c
canary-60
#ffca28
canary-50
#ffda6b
canary-40
#ffe082
canary-30
#ffeeb3
canary-20
#fff4cd
canary-10
#fffbeb

coral

coral-100
#370606
coral-90
#5d0e0e
coral-80
#8a1414
coral-70
#b31414
coral-60
#d31b1b
coral-50
#f73e3b
coral-40
#ff5959
coral-30
#ff9494
coral-20
#ffcece
coral-10
#ffe5e5

grey

grey-110
#101112
grey-100
#262729
grey-90
#3d3e40
grey-80
#515254
grey-70
#6e6f73
grey-60
#949699
grey-50
#b6b8ba
grey-40
#cfd2d4
grey-30
#e3e6e8
grey-20
#edf0f2
grey-10
#f2f5f7

lavender

lavender-100
#11143c
lavender-90
#181c56
lavender-80
#262f7d
lavender-70
#3b46ab
lavender-60
#5a68c4
lavender-50
#8794d4
lavender-40
#aeb7e2
lavender-30
#c7cdeb
lavender-20
#d9ddf2
lavender-10
#f0f1fa

mint

mint-100
#022015
mint-90
#034029
mint-80
#05613e
mint-70
#068152
mint-60
#1a8e60
mint-50
#37ab83
mint-40
#5ac39a
mint-30
#9cd9c2
mint-20
#d0f1e3
mint-10
#e6f6f0

peach

peach-100
#3a1503
peach-90
#742b06
peach-80
#ae4009
peach-70
#e6560f
peach-60
#fd7835
peach-50
#fd9a68
peach-40
#ffbf9e
peach-30
#ffd3bd
peach-20
#ffe4d6
peach-10
#fff1eb

sky

sky-100
#011a23
sky-90
#022536
sky-80
#003852
sky-70
#044d6c
sky-60
#046690
sky-50
#067eb2
sky-40
#2d98d2
sky-30
#64b3e7
sky-20
#acd7f1
sky-10
#e1eff8

transparent

transparent-bluealpha10
#9ea0bd1a
transparent-bluealpha40
#54568c66
transparent-canaryalpha25
#ffe08240
transparent-canaryalpha30
#fff4cd4d
transparent-coralalpha20
#ff949433
transparent-ebonyalpha15
#e5e5e926
transparent-ebonyalpha20
#cccdd44d
transparent-ebonyalpha25
#e5e5e940
transparent-ebonyalpha35
#e5e5e959
transparent-lavenderalpha70
#aeb7e2b2
transparent-mintalpha20
#5ac39a33
transparent-neutralalpha10
#cfd2d41a
transparent-neutralalpha15
#cfd2d426
transparent-neutralalpha20
#26272933
transparent-peachalpha70
#ffbf9eb2
transparent-skyalpha20
#2d98d233

ebony

ebony-100
#08091c
ebony-95
#141527
ebony-90
#212233
ebony-85
#2d2e3e
ebony-80
#393a49
ebony-75
#464755
ebony-70
#525360
ebony-65
#5e5f6c
ebony-60
#6a6b78
ebony-55
#757584
ebony-50
#81828f
ebony-45
#8d8e9c
ebony-40
#999aa7
ebony-35
#a6a7b2
ebony-30
#b3b4bd
ebony-25
#bfc0c8
ebony-20
#cccdd4
ebony-15
#d8d9df
ebony-10
#e5e5e9
ebony-5
#f2f2f5

Semantic

«Semantic tokens» er laget for å definere hva den brukes til. De er farger som skal brukes til bakgrunn, tekst, stroke og shape til grafiske elementer (for eksempel ikon, illustrasjoner). «Base colors» er bygget på disse, forskjellen på semantiske og base-tokens er at base-tokens tilbyr dark-mode.

Du viser nå scss, du kan endre format i innstillinger.

fill

background

contrast-dark
#212233
contrast-light
#181c56
contrast-lightalt
#393d79
contrast-lightalt2
#292b6a
overlay-solid
#393a49
overlay-solidalt
#464755
overlay-transparent
#e5e5e926
overlay-transparentalt
#e5e5e940
standard-colorless
#ffffff00
standard-dark
#08091c
standard-light
#ffffff
subdued-dark
#2d2e3e
subdued-light
#d9dae8
tint-dark
#141527
tint-light
#f6f6f9
tint-neutral
#f2f5f7
tint-transparent
#9ea0bd1a

boolean

false-contrast
#9ea0bd
false-dark
#e5e5e959
false-light
#949699
true-contrast
#5ac39a
true-dark
#5ac39a
true-light
#1a8e60

disabled

light
#cfd2d4
transparent
#cfd2d426
transparentalt
#cfd2d41a

information

contrast
#64b3e7
deep
#067eb2
muted
#e1eff8
tint
#acd7f1
transparent
#2d98d233

negative

contrast
#ff5959
dark
#5d0e0e
deep
#d31b1b
muted
#ffcece
tint
#ff9494
transparent
#ff949433

primary

active-contrast
#8794d4
active-light
#11143c
default-contrast
#aeb7e2
default-light
#181c56
hover-contrast
#c7cdeb
hover-light
#393d79

secondary

active-contrast
#8794d4
active-light
#aeb7e2
default-colorless
#ffffff00
hover-contrast
#626493
hover-light
#d9ddf2

selected

default-contrast
#393d79
default-dark
#e5e5e9
default-darkalt
#81828f
default-light
#f6f6f9
default-neutral
#e3e6e8
hover-contrast
#54568c
hover-dark
#e5e5e959
hover-light
#eaeaf1
hover-neutral
#edf0f2

success

contrast
#5ac39a
deep
#1a8e60
muted
#d0f1e3
subdued
#37ab83
tint
#9cd9c2
transparent
#5ac39a33

warning

contrast
#ffe082
deep
#ffca28
muted
#fff4cd
tint
#ffeeb3
transparent
#ffe08240

shape

accent
#181c56
contrast
#aeb7e2
dark
#08091c
darkalt
#b3b4bd
disabled
#515254
highlight
#ff5959
highlightalt
#ff9494
inactive
#bcbdd2
information
#067eb2
informationalt
#64b3e7
informationalt2
#acd7f1
light
#ffffff
lightalt
#e5e5e9
negative
#d31b1b
negativealt
#ff9494
neutral
#6e6f73
neutralalt
#b6b8ba
neutralalt2
#949699
subdued
#626493
subduedalt
#d9dae8
success
#1a8e60
successalt
#5ac39a
successalt2
#9cd9c2
warning
#ffca28
warningalt
#ffe082
warningalt2
#ffeeb3

stroke

accent
#181c56
colorless
#ffffff00
contrast
#aeb7e2
contrastalt
#54568c
dark
#b3b4bd
darkalt
#81828f
darkalt2
#08091c
highlight
#ff5959
highlightalt
#ff9494
information
#067eb2
informationalt
#acd7f1
light
#ffffff
lightalt
#e5e5e9
negative
#d31b1b
negativealt
#ff9494
neutral
#e3e6e8
neutralalt
#949699
subdued
#8284ab
success
#1a8e60
successalt
#5ac39a
successalt2
#9cd9c2
transparent
#54568c66
transparentalt
#aeb7e2b2
warning
#e9b10c
warningalt
#ffeeb3

text

accent
#181c56
dark
#08091c
darkalt
#b3b4bd
disabled
#515254
highlight
#aeb7e2
highlightalt
#ffbf9e
light
#ffffff
lightalt
#e5e5e9
negative
#d31b1b
negativealt
#ff9494
neutral
#6e6f73
neutralalt
#b6b8ba
neutralalt2
#949699
subdued
#626493
subduedalt
#d9dae8
success
#1a8e60
successalt
#5ac39a

Base

«Base tokens» er basert på «Semantic tokens» men har støtte for dark-mode. Det er disse vi ønsker du tar i bruk. Les mer om hvordan ta i bruk base-tokens.

Du viser nå scss, du kan endre format i innstillinger.

light

frame

contrast
#181c56
contrastalt
#393d79
default
#ffffff
elevated
#ffffff
elevatedalt
#f6f6f9
subdued
#d9dae8
tint
#f6f6f9

shape

accent
#181c56
bicycle-contrast
#00db9b
bicycle-default
#388f76
bus-contrast
#ff6392
bus-default
#c5044e
cableway-contrast
#b482fb
cableway-default
#78469a
disabled
#6e6f73
disabledalt
#b6b8ba
ferry-contrast
#6fdfff
ferry-default
#0c6693
funicular-contrast
#b482fb
funicular-default
#78469a
helicopter-contrast
#fbafea
helicopter-default
#800664
highlight
#ff5959
light
#ffffff
mask
#ffffff
maskalt
#ffffff
metro-contrast
#f08901
metro-default
#bf5826
mobility-contrast
#00db9b
mobility-default
#388f76
plane-contrast
#fbafea
plane-default
#800664
subdued
#626493
subduedalt
#d9dae8
taxi-contrast
#ffe082
taxi-default
#3d3e40
train-contrast
#42a5f5
train-default
#00367f
tram-contrast
#b482fb
tram-default
#78469a
walk-contrast
#8284ab
walk-default
#8d8e9c
airportlinkbus-contrast
#fbafea
airportlinkbus-default
#800664
airportlinkrail-contrast
#fbafea
airportlinkrail-default
#800664

stroke

contrast
#aeb7e2
default
#181c56
disabled
#949699
focus-contrast
#aeb7e2
focus-standard
#181c56
highlight
#ff5959
light
#ffffff
subdued
#8284ab
subduedalt
#e3e6e8

text

accent
#181c56
disabled
#6e6f73
disabledalt
#b6b8ba
highlight
#ff5959
light
#ffffff
subdued
#626493
subduedalt
#d9dae8

dark

frame

contrast
#212233
contrastalt
#141527
default
#08091c
elevated
#e5e5e926
elevatedalt
#464755
subdued
#2d2e3e
tint
#141527

shape

accent
#e5e5e9
bicycle-contrast
#4db295
bicycle-default
#4db295
bus-contrast
#e87a9b
bus-default
#e87a9b
cableway-contrast
#b898e5
cableway-default
#b898e5
disabled
#b6b8ba
disabledalt
#b3b4bd
ferry-contrast
#8ccfe2
ferry-default
#8ccfe2
funicular-contrast
#b898e5
funicular-default
#b898e5
helicopter-contrast
#f2b8e5
helicopter-default
#f2b8e5
highlight
#ff9494
light
#e5e5e9
mask
#2d2e3e
maskalt
#393a49
metro-contrast
#dd973c
metro-default
#dd973c
mobility-contrast
#4db295
mobility-default
#4db295
plane-contrast
#f2b8e5
plane-default
#f2b8e5
subdued
#b3b4bd
subduedalt
#b3b4bd
taxi-contrast
#ffe082
taxi-default
#ffe082
train-contrast
#60a2d7
train-default
#60a2d7
tram-contrast
#b898e5
tram-default
#b898e5
walk-contrast
#8d8e9c
walk-default
#8d8e9c
airportlinkbus-contrast
#f2b8e5
airportlinkbus-default
#f2b8e5
airportlinkrail-contrast
#f2b8e5
airportlinkrail-default
#f2b8e5

stroke

contrast
#aeb7e2
default
#b3b4bd
disabled
#e3e6e8
focus-contrast
#aeb7e2
focus-standard
#aeb7e2
highlight
#ff9494
light
#b3b4bd
subdued
#81828f
subduedalt
#949699

text

accent
#e5e5e9
disabled
#b6b8ba
disabledalt
#b6b8ba
highlight
#ff9494
light
#e5e5e9
subdued
#b3b4bd
subduedalt
#b3b4bd

Datavisualisering

Data-tokens er Entur sin egen palett for farger som skal benyttes til visualisering av data. Les mer om datavisualisering.

Du viser nå scss, du kan endre format i innstillinger.

light

standard

azure
#2f98fa
blue
#181c56
coral
#ff5959
jungle
#0ea2a8
lavender
#8692ca
lilac
#8e57e3
peach
#ca825b
spring
#57a257

contrast

azure
#64b2fb
blue
#6c6eb7
coral
#ff5959
jungle
#0fc2b3
lavender
#aeb7e2
lilac
#ea8bea
peach
#ffbf9e
spring
#7bc00b

dark

standard

azure
#669bcc
blue
#aeb7e2
coral
#ff9494
jungle
#349d94
lavender
#7c8ad0
lilac
#c982c9
peach
#d6855c
spring
#8cb24c

contrast

azure
#669bcc
blue
#aeb7e2
coral
#ff9494
jungle
#349d94
lavender
#7c8ad0
lilac
#c982c9
peach
#d6855c
spring
#8cb24c

Transport

Transport-tokens er Entur sine farger på transportmidler. Les mer om transportfarger. Transparent-variantene brukes i dag for å vise disabled state, disse har svak kontrast og må brukes med omhu.

Du viser nå scss, du kan endre format i innstillinger.

standard

bicycle
#388f76
bus
#c5044e
cableway
#78469a
carferry
#0c6693
citybike
#388f76
ferry
#0c6693
funicular
#78469a
helicopter
#800664
metro
#bf5826
mobility
#388f76
neutral
#181c56
plane
#800664
taxi
#3d3e40
train
#00367f
tram
#78469a
walk
#8d8e9c
airportlinkbus
#800664
airportlinkrail
#800664

transparent

bus-transparent
#c5044e26
cableway-transparent
#78469a26
carferry-transparent
#0c669326
ferry-transparent
#0c669326
funicular-transparent
#78469a26
helicopter-transparent
#80066426
metro-transparent
#bf582626
plane-transparent
#80066426
taxi-transparent
#3d3e4026
train-transparent
#00367f26
tram-transparent
#78469a26
airportlinkbus-transparent
#80066426
airportlinkrail-transparent
#80066426

contrast

bicycle
#00db9b
bus
#ff6392
cableway
#b482fb
carferry
#6fdfff
citybike
#00db9b
ferry
#6fdfff
funicular
#b482fb
helicopter
#fbafea
metro
#f08901
mobility
#00db9b
neutral
#ffffff
plane
#fbafea
taxi
#ffe082
train
#42a5f5
tram
#b482fb
walk
#8284ab
airportlinkbus
#fbafea
airportlinkrail
#fbafea

transparent

bus-transparent
#ff639226
cableway-transparent
#b482fb26
carferry-transparent
#6fdfff26
ferry-transparent
#6fdfff26
funicular-transparent
#b482fb26
helicopter-transparent
#fbafea26
metro-transparent
#f0890126
plane-transparent
#fbafea26
taxi-transparent
#ffe08226
train-transparent
#42a5f526
tram-transparent
#b482fb26
airportlinkbus-transparent
#fbafea26
airportlinkrail-transparent
#fbafea26

dark

bicycle
#4db295
bus
#ef7398
cableway
#b898e5
carferry
#8ccfe2
citybike
#4db295
ferry
#8ccfe2
funicular
#b898e5
helicopter
#f2b8e5
metro
#dd973c
mobility
#4db295
neutral
#e5e5e9
plane
#f2b8e5
taxi
#ffe082
train
#60a2d7
tram
#b898e5
walk
#8d8e9c
airportlinkbus
#f2b8e5
airportlinkrail
#f2b8e5

transparent

bus-transparent
#ef739826
cableway-transparent
#b898e526
carferry-transparent
#8ccfe226
ferry-transparent
#8ccfe226
funicular-transparent
#b898e526
helicopter-transparent
#f2b8e526
metro-transparent
#dd973c26
plane-transparent
#f2b8e526
taxi-transparent
#ffe08226
train-transparent
#60a2d726
tram-transparent
#b898e526
airportlinkbus-transparent
#f2b8e526
airportlinkrail-transparent
#f2b8e526
Rediger denne siden på Bitbucket