Design tokens

Colours

EMBL Green


Value:

#18974c


Sass Function:

color(green)


CSS custom property:

--vf-color--green

EMBL Green, Darkest Tint


Value:

#0a5032


Sass Function:

color(green--darkest)


CSS custom property:

--vf-color--green--darkest

EMBL Green, Dark Tint


Value:

#007b53


Sass Function:

color(green--dark)


CSS custom property:

--vf-color--green--dark

EMBL Green, Light Tint


Value:

#6cc24a


Sass Function:

color(green--light)


CSS custom property:

--vf-color--green--light

EMBL Green, Lightest Tint


Value:

#d0debb


Sass Function:

color(green--lightest)


CSS custom property:

--vf-color--green--lightest

This Design Token has been deprecated.

Please use the vf-neutral--600 token.

EMBL Grey


Value:

#707372


Sass Function:

color(grey)


CSS custom property:

--vf-color--grey

This Design Token has been deprecated.

Please use the vf-neutral--800 token.

EMBL Grey, Darkest Tint


Value:

#373a36


Sass Function:

color(grey--darkest)


CSS custom property:

--vf-color--grey--darkest

This Design Token has been deprecated.

Please use the vf-neutral--700 token.

EMBL Grey, Dark Tint


Value:

#54585a


Sass Function:

color(grey--dark)


CSS custom property:

--vf-color--grey--dark

This Design Token has been deprecated.

Please use the vf-neutral--300 token.

EMBL Grey, Light Tint


Value:

#a8a99e


Sass Function:

color(grey--light)


CSS custom property:

--vf-color--grey--light

This Design Token has been deprecated.

Please use the vf-neutral--200 token.

EMBL Grey, Lightest Tint


Value:

#d0d0ce


Sass Function:

color(grey--lightest)


CSS custom property:

--vf-color--grey--lightest

EMBL Red


Value:

#d41645


Sass Function:

color(red)


CSS custom property:

--vf-color--red

EMBL Red, Dark Tint


Value:

#a6093d


Sass Function:

color(red--dark)


CSS custom property:

--vf-color--red--dark

EMBL Red, Light Tint


Value:

#e58f9e


Sass Function:

color(red--light)


CSS custom property:

--vf-color--red--light

EMBL Blue


Value:

#3b6fb6


Sass Function:

color(blue)


CSS custom property:

--vf-color--blue

EMBL Blue, Dark Tint


Value:

#193f90


Sass Function:

color(blue--dark)


CSS custom property:

--vf-color--blue--dark

EMBL Blue, Light Tint


Value:

#8bb8e8


Sass Function:

color(blue--light)


CSS custom property:

--vf-color--blue--light

EMBL Purple


Value:

#734595


Sass Function:

color(purple)


CSS custom property:

--vf-color--purple

EMBL Purple, Dark Tint


Value:

#563d82


Sass Function:

color(purple--dark)


CSS custom property:

--vf-color--purple--dark

EMBL Purple, Light Tint


Value:

#cba3d8


Sass Function:

color(purple--light)


CSS custom property:

--vf-color--purple--light

EMBL Orange


Value:

#f49e17


Sass Function:

color(orange)


CSS custom property:

--vf-color--orange

EMBL Orange, Dark Tint


Value:

#b65417


Sass Function:

color(orange--dark)


CSS custom property:

--vf-color--orange--dark

EMBL Orange, Light Tint


Value:

#efc06e


Sass Function:

color(orange--light)


CSS custom property:

--vf-color--orange--light

EMBL Yellow


Value:

#f4c61f


Sass Function:

color(yellow)


CSS custom property:

--vf-color--yellow

EMBL Yellow, Dark Tint


Value:

#ffb81c


Sass Function:

color(yellow--dark)


CSS custom property:

--vf-color--yellow--dark

EMBL Yellow, Light Tint


Value:

#fdd757


Sass Function:

color(yellow--light)


CSS custom property:

--vf-color--yellow--light

EMBL Bright Green


Value:

#a1be1f


Sass Function:

color(bright-green)


CSS custom property:

--vf-color--bright-green

EMBL Bright Green, Dark Tint


Value:

#7fb428


Sass Function:

color(bright-green--dark)


CSS custom property:

--vf-color--bright-green--dark

EMBL Bright Green, Light Tint


Value:

#e2e868


Sass Function:

color(bright-green--light)


CSS custom property:

--vf-color--bright-green--light

This Design Token has been deprecated.

Please use the vf-neutral--900 token.

UI Black


Value:

#000000


Sass Function:

ui-color(black)


CSS custom property:

--vf-ui-color--black

This Design Token has been deprecated.

Please use the vf-neutral--300 token.

UI Grey


Value:

#d8d8d8


Sass Function:

ui-color(grey)


CSS custom property:

--vf-ui-color--grey

This Design Token has been deprecated.

Please use the vf-neutral--100 token.

UI Grey light


Value:

#f3f3f3


Sass Function:

ui-color(grey--light)


CSS custom property:

--vf-ui-color--grey--light

UI Yellow


Value:

#fffadc


Sass Function:

ui-color(yellow)


CSS custom property:

--vf-ui-color--yellow

This Design Token has been deprecated.

Please use the vf-color--red token.

UI Red


Value:

#d32f2f


Sass Function:

ui-color(red)


CSS custom property:

--vf-ui-color--red

This Design Token has been deprecated.

Please use the vf-neutral--0 token.

UI White


Value:

#ffffff


Sass Function:

ui-color(white)


CSS custom property:

--vf-ui-color--white

This Design Token has been deprecated.

Please use the vf-neutral--100 token.

UI Off white


Value:

#fafafa


Sass Function:

ui-color(off-white)


CSS custom property:

--vf-ui-color--off-white

Find an issue on this page? Propose a change or discuss it.