Design tokens

The colour, typography, spacing, and other stylistic decisions as design tokens for consumption.

Theme colours

Brand

EMBL Brand Colour


Value: #18974c


Sass variable: $vf-color__brand

Sass function: brand-color(default)


CSS custom property: --vf-color__brand

EMBL Brand Colour Dark


Value: #0a5032


Sass variable: $vf-color__brand--dark

Sass function: brand-color(dark)


CSS custom property: --vf-color__brand--dark

Text and interactive

Primary Text Colour


Value: #1a1c1a


Sass variable: $vf-color__text--primary

Sass function: text-color(primary)


CSS custom property: -vf-color__text--primary

Secondary Text Colour


Value: #373a36


Sass variable: $vf-color__text--secondary

Sass function: text-color(secondary)


CSS custom property: -vf-color__text--secondary

Link Colour


Value: #3b6fb6


Sass variable: $vf-color__link

Sass function: text-color(default)


CSS custom property: --vf-color__link

Link Hover Colour


Value: #193f90


Sass variable: $vf-color__link--hover

Sass function: text-color(hover)


CSS custom property: --vf-color__link--hover

Link Focus Colour


Value: #193f90


Sass variable: $vf-color__link--focus

Sass function: text-color(focus)


CSS custom property: --vf-color__link--focus

Link Visited Colour


Value: #563d82


Sass variable: $vf-color__link--visited

Sass function: text-color(visited)


CSS custom property: --vf-color__link--visited

Buttons

Primary Button Text Colour


Value: #ffffff


Sass variable: $vf-color__button__text--primary

Sass function: button-color(text--primary)


CSS custom property: --vf-color__button__text--primary

Primary Button Border Colour


Value: #3b6fb6


Sass variable: $vf-color__button__border--primary

Sass function: button-color(border--primary)


CSS custom property: --vf-color__button__border--primary

Primary Button Background Colour


Value: #3b6fb6


Sass variable: $vf-color__button__background--primary

Sass function: button-color(background--primary)


CSS custom property: --vf-color__button__background--primary

Primary Button Shadow Colour


Value: #193f90


Sass variable: $vf-color__button__shadow--primary

Sass function: button-color(shadow--primary)


CSS custom property: --vf-color__button__shadow--primary

Secondary Button Text Colour


Value: #3b6fb6


Sass variable: $vf-color__button__text--secondary

Sass function: button-color(text--secondary)


CSS custom property: --vf-color__button__text--secondary

Secondary Button Border Colour


Value: #3b6fb6


Sass variable: $vf-color__button__border--secondary

Sass function: button-color(border--secondary)


CSS custom property: --vf-color__button__border--secondary

Secondary Button Background Colour


Value: #ffffff


Sass variable: $vf-color__button__background--secondary

Sass function: button-color(background--secondary)


CSS custom property: --vf-color__button__background--secondary

Secondary Button Shadow Colour


Value: #193f90


Sass variable: $vf-color__button__shadow--secondary

Sass function: button-color(shadow--secondary)


CSS custom property: --vf-color__button__shadow--secondary

Tertiary Button Text Colour


Value: #ffffff


Sass variable: $vf-color__button__text--tertiary

Sass function: button-color(text--tertiary)


CSS custom property: --vf-color__button__text--tertiary

Tertiary Button Border Colour


Value: #373a36


Sass variable: $vf-color__button__border--tertiary

Sass function: button-color(border--tertiary)


CSS custom property: --vf-color__button__border--tertiary

Tertiary Button Background Colour


Value: #373a36


Sass variable: $vf-color__button__background--tertiary

Sass function: button-color(background--tertiary)


CSS custom property: --vf-color__button__background--tertiary

Tertiary Button Shadow Colour


Value: #000000


Sass variable: $vf-color__button__shadow--tertiary

Sass function: button-color(shadow--tertiary)


CSS custom property: --vf-color__button__shadow--tertiary

UI and neutral colours

UI Yellow


Value: #fffadc


Sass function: (yellow)


CSS custom property: --vf-ui-color--yellow

UI Red


Value: #d32f2f


Sass function: (red)


CSS custom property: --vf-ui-color--red

Neutral 0


Value: #ffffff



CSS custom property: --vf-color--neutral--0

Neutral 100


Value: #f3f3f3


Sass function: neutral(100)


CSS custom property: --vf-color--neutral--100

Neutral 200


Value: #e4e4e4


Sass function: neutral(200)


CSS custom property: --vf-color--neutral--200

Neutral 300


Value: #d0d0ce


Sass function: neutral(300)


CSS custom property: --vf-color--neutral--300

Neutral 400


Value: #a9abaa


Sass function: neutral(400)


CSS custom property: --vf-color--neutral--400

Neutral 500


Value: #8d8f8e


Sass function: neutral(500)


CSS custom property: --vf-color--neutral--500

Neutral 600


Value: #707372


Sass function: neutral(600)


CSS custom property: --vf-color--neutral--600

Neutral 700


Value: #54585a


Sass function: neutral(700)


CSS custom property: --vf-color--neutral--700

Neutral 800


Value: #373a36


Sass function: neutral(800)


CSS custom property: --vf-color--neutral--800

Neutral 900


Value: #000000


Sass function: neutral(900)


CSS custom property: --vf-color--neutral--900

Decorative brand colour palette

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

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

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