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
blue-90
blue-80
blue-70
blue-60
blue-50
blue-40
blue-30
blue-20
blue-10
canary
canary-100
canary-90
canary-80
canary-70
canary-60
canary-50
canary-40
canary-30
canary-20
canary-10
coral
coral-100
coral-90
coral-80
coral-70
coral-60
coral-50
coral-40
coral-30
coral-20
coral-10
grey
grey-110
grey-100
grey-90
grey-80
grey-70
grey-60
grey-50
grey-40
grey-30
grey-20
grey-10
lavender
lavender-100
lavender-90
lavender-80
lavender-70
lavender-60
lavender-50
lavender-40
lavender-30
lavender-20
lavender-10
mint
mint-100
mint-90
mint-80
mint-70
mint-60
mint-50
mint-40
mint-30
mint-20
mint-10
peach
peach-100
peach-90
peach-80
peach-70
peach-60
peach-50
peach-40
peach-30
peach-20
peach-10
sky
sky-100
sky-90
sky-80
sky-70
sky-60
sky-50
sky-40
sky-30
sky-20
sky-10
transparent
transparent-bluealpha10
transparent-bluealpha40
transparent-canaryalpha25
transparent-canaryalpha30
transparent-coralalpha20
transparent-ebonyalpha15
transparent-ebonyalpha20
transparent-ebonyalpha25
transparent-ebonyalpha35
transparent-lavenderalpha70
transparent-mintalpha20
transparent-neutralalpha10
transparent-neutralalpha15
transparent-neutralalpha20
transparent-peachalpha70
transparent-skyalpha20
ebony
ebony-100
ebony-95
ebony-90
ebony-85
ebony-80
ebony-75
ebony-70
ebony-65
ebony-60
ebony-55
ebony-50
ebony-45
ebony-40
ebony-35
ebony-30
ebony-25
ebony-20
ebony-15
ebony-10
ebony-5
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
contrast-light
contrast-lightalt
contrast-lightalt2
overlay-solid
overlay-solidalt
overlay-transparent
overlay-transparentalt
standard-colorless
standard-dark
standard-light
subdued-dark
subdued-light
tint-dark
tint-light
tint-neutral
tint-transparent
boolean
false-contrast
false-dark
false-light
true-contrast
true-dark
true-light
disabled
light
transparent
transparentalt
information
contrast
deep
muted
tint
transparent
negative
contrast
dark
deep
muted
tint
transparent
primary
active-contrast
active-light
default-contrast
default-light
hover-contrast
hover-light
secondary
active-contrast
active-light
default-colorless
hover-contrast
hover-light
selected
default-contrast
default-dark
default-darkalt
default-light
default-neutral
hover-contrast
hover-dark
hover-light
hover-neutral
success
contrast
deep
muted
subdued
tint
transparent
warning
contrast
deep
muted
tint
transparent
shape
accent
contrast
dark
darkalt
disabled
highlight
highlightalt
inactive
information
informationalt
informationalt2
light
lightalt
negative
negativealt
neutral
neutralalt
neutralalt2
subdued
subduedalt
success
successalt
successalt2
warning
warningalt
warningalt2
stroke
accent
colorless
contrast
contrastalt
dark
darkalt
darkalt2
highlight
highlightalt
information
informationalt
light
lightalt
negative
negativealt
neutral
neutralalt
subdued
success
successalt
successalt2
transparent
transparentalt
warning
warningalt
text
accent
dark
darkalt
disabled
highlight
highlightalt
light
lightalt
negative
negativealt
neutral
neutralalt
neutralalt2
subdued
subduedalt
success
successalt
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
contrastalt
default
elevated
elevatedalt
subdued
tint
shape
accent
bicycle-contrast
bicycle-default
bus-contrast
bus-default
cableway-contrast
cableway-default
disabled
disabledalt
ferry-contrast
ferry-default
funicular-contrast
funicular-default
helicopter-contrast
helicopter-default
highlight
light
mask
maskalt
metro-contrast
metro-default
mobility-contrast
mobility-default
plane-contrast
plane-default
subdued
subduedalt
taxi-contrast
taxi-default
train-contrast
train-default
tram-contrast
tram-default
walk-contrast
walk-default
airportlinkbus-contrast
airportlinkbus-default
airportlinkrail-contrast
airportlinkrail-default
stroke
contrast
default
disabled
focus-contrast
focus-standard
highlight
light
subdued
subduedalt
text
accent
disabled
disabledalt
highlight
light
subdued
subduedalt
dark
frame
contrast
contrastalt
default
elevated
elevatedalt
subdued
tint
shape
accent
bicycle-contrast
bicycle-default
bus-contrast
bus-default
cableway-contrast
cableway-default
disabled
disabledalt
ferry-contrast
ferry-default
funicular-contrast
funicular-default
helicopter-contrast
helicopter-default
highlight
light
mask
maskalt
metro-contrast
metro-default
mobility-contrast
mobility-default
plane-contrast
plane-default
subdued
subduedalt
taxi-contrast
taxi-default
train-contrast
train-default
tram-contrast
tram-default
walk-contrast
walk-default
airportlinkbus-contrast
airportlinkbus-default
airportlinkrail-contrast
airportlinkrail-default
stroke
contrast
default
disabled
focus-contrast
focus-standard
highlight
light
subdued
subduedalt
text
accent
disabled
disabledalt
highlight
light
subdued
subduedalt
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
blue
coral
jungle
lavender
lilac
peach
spring
contrast
azure
blue
coral
jungle
lavender
lilac
peach
spring
dark
standard
azure
blue
coral
jungle
lavender
lilac
peach
spring
contrast
azure
blue
coral
jungle
lavender
lilac
peach
spring
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
bus
cableway
carferry
citybike
ferry
funicular
helicopter
metro
mobility
neutral
plane
taxi
train
tram
walk
airportlinkbus
airportlinkrail
transparent
bus-transparent
cableway-transparent
carferry-transparent
ferry-transparent
funicular-transparent
helicopter-transparent
metro-transparent
plane-transparent
taxi-transparent
train-transparent
tram-transparent
airportlinkbus-transparent
airportlinkrail-transparent
contrast
bicycle
bus
cableway
carferry
citybike
ferry
funicular
helicopter
metro
mobility
neutral
plane
taxi
train
tram
walk
airportlinkbus
airportlinkrail
transparent
bus-transparent
cableway-transparent
carferry-transparent
ferry-transparent
funicular-transparent
helicopter-transparent
metro-transparent
plane-transparent
taxi-transparent
train-transparent
tram-transparent
airportlinkbus-transparent
airportlinkrail-transparent
dark
bicycle
bus
cableway
carferry
citybike
ferry
funicular
helicopter
metro
mobility
neutral
plane
taxi
train
tram
walk
airportlinkbus
airportlinkrail
transparent
bus-transparent
cableway-transparent
carferry-transparent
ferry-transparent
funicular-transparent
helicopter-transparent
metro-transparent
plane-transparent
taxi-transparent
train-transparent
tram-transparent
airportlinkbus-transparent
airportlinkrail-transparent