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

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

Interactive

Value: #3b6fb6

Sass function: interactive-color(default)

CSS custom property: --vf-color__interactive

Interactive background

Value: #d1e3f6

Sass function: interactive-color(background)

CSS custom property: --vf-color__interactive--background

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