FARGETOKENS

Oversikt

Oversikt over Entur Linje sine fargetokens

Base

«Base tokens» er basert på «semantic tokens» men har støtte for fargemoduser. Det er disse tokens-ene vi anbefaler at du bruker. Les mer om hvordan ta i bruk base-tokens.

Du viser nå SCSS .

Hvordan importere

For å bruke base tokens importer du dem slik:

@use "@entur/tokens/dist/base.scss" as base

Fargemodus

frame

contrast

#181c56

contrastalt

#393d79

contrastalt2

#292b6a

default

#ffffff

elevated

#ffffff

elevatedalt

#f6f6f9

subdued

#d9dae8

tint

#f6f6f9

shape

accent

#181c56

bicycle-contrast

#00db9b

bicycle-default

#33826b

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

#33826b

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

highlightalt

#ffbf9e

light

#ffffff

subdued

#626493

subduedalt

#d9dae8

Semantic

«Semantic tokens» har navn som beskriver hva de 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 støtter fargemoduser.

Du viser nå SCSS .

Hvordan importere

For å bruke semantic tokens importer du dem slik:

@use "@entur/tokens/dist/semantic.scss" as semantic

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

overlay-transparentalt2

#cccdd44d

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

high-contrast

#11143c

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

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 .

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. Transparent-variantene brukes i dag for å vise disabled state, disse har svak kontrast og må brukes med omhu.

Du viser nå SCSS .

standard

bicycle

#0d827e

bus

#c5044e

bus-regional

#427500

cableway

#78469a

carferry

#0c6693

citybike

#0d827e

ferry

#0c6693

funicular

#78469a

helicopter

#800664

metro

#bf5826

metroalt

#a2532f

mobility

#0d827e

neutral

#181c56

plane

#800664

taxi

#3d3e40

train

#00367f

tram

#78469a

walk

#8d8e9c

airportlinkbus

#800664

airportlinkrail

#800664

transparent

bus-regional-transparent

#42750026

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

#00dbb6

bus

#ff6392

bus-regional

#b8db48

cableway

#b482fb

carferry

#6fdfff

citybike

#00dbb6

ferry

#6fdfff

funicular

#b482fb

helicopter

#fbafea

metro

#f08901

mobility

#00dbb6

neutral

#ffffff

plane

#fbafea

taxi

#ffe082

train

#42a5f5

tram

#b482fb

walk

#9ea0bd

airportlinkbus

#fbafea

airportlinkrail

#fbafea

transparent

bus-regional-transparent

#b8db4826

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

#4db2a1

bus

#ef7398

bus-regional

#a4bf4d

cableway

#b898e5

carferry

#8ccfe2

citybike

#4db2a1

ferry

#8ccfe2

funicular

#b898e5

helicopter

#f2b8e5

metro

#dd973c

mobility

#4db2a1

neutral

#e5e5e9

plane

#f2b8e5

taxi

#ffe082

train

#60a2d7

tram

#b898e5

walk

#8d8e9c

airportlinkbus

#f2b8e5

airportlinkrail

#f2b8e5

transparent

bus-regional-transparent

#a4bf4d26

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

Primitive

«Primitive tokens» representerer alle tilgjengelige farger i fargepaletten til Entur. Disse brukes som byggeklosser for mer sofistikerte token-sett.

Disse skal helst ikke brukes direkte! Se heller på «base tokens» eller «semantic tokens» og snakk med designsystem-teamet hvis disse ikke møter dine behov.

Du viser nå SCSS .

Hvordan importere

For å bruke primitive tokens importer du dem slik:

@use "@entur/tokens/dist/primitive.scss" as primitive

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-blue-alpha10

#9ea0bd1a

transparent-blue-alpha40

#54568c66

transparent-canary-alpha25

#ffe08240

transparent-canary-alpha30

#fff4cd4d

transparent-coral-alpha20

#ff949433

transparent-ebony-alpha15

#e5e5e926

transparent-ebony-alpha20

#cccdd44d

transparent-ebony-alpha25

#e5e5e940

transparent-ebony-alpha35

#e5e5e959

transparent-lavender-alpha70

#aeb7e2b2

transparent-mint-alpha20

#5ac39a33

transparent-neutral-alpha10

#cfd2d41a

transparent-neutral-alpha15

#cfd2d426

transparent-neutral-alpha20

#26272933

transparent-peach-alpha70

#ffbf9eb2

transparent-sky-alpha20

#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