Brand colour

base-ultra-dark

base-dark

base-hover

base

base-medium

base-light

base-ultra-light

primary-ultra-dark

primary-dark

primary-hover

primary

primary-medium

primary-light

primary-ultra-light

accent-ultra-dark

accent-dark

accent-hover

accent

accent-medium

accent-light

accent-ultra-light

border-base-ultra-dark

border-base-ultra-light

border--primary-ultra-dark

border--primary

border--accent

border--accent-light

border--primary-ultra-light

Tipography

h1

text--primary-ultra-dark

h2

text--primary-dark

h3

text--primary (default)

h4

text--primary-medium

h5

text--primary-light

h6

text--primary-ultra-light

Lorem Ipsum is a placeholder text used in the typography and printing industry.

Button size

btn--xs btn--s btn--m btn--l btn--xl btn--xxl

Button colour

btn-base btn-base + btn-outline btn-primary btn-primary + btn-outline btn-accent btn-accent + btn-outline

Icon Size

icon

Image Icon Size

Base Color - Transparent

Typically the darkest colour or background colour for the website.

.bg--base-ultra-dark-trans-90

.bg--base-ultra-dark-trans-80

.bg--base-ultra-dark-trans-60

.bg--base-ultra-dark-trans-40

.bg--base-ultra-dark-trans-20

.bg--base-ultra-dark-trans-10

.bg--base-trans-90

.bg--base-trans-80

.bg--base-trans-60

.bg--base-trans-40

.bg--base-trans-20

.bg--base-trans-10

Primary Color - Transparent

.bg--primary-ultra-dark-trans-90

.bg--primary-ultra-dark-trans-80

.bg--primary-ultra-dark-trans-60

.bg--primary-ultra-dark-trans-40

.bg--primary-ultra-dark-trans-20

.bg--primary-ultra-dark-trans-10

.bg--primary-trans-90

.bg--primary-trans-80

.bg--primary-trans-60

.bg--primary-trans-40

.bg--primary-trans-20

.bg--primary-trans-10

Accent Color - Transparent

.bg--accent-ultra-dark-trans-90

.bg--accent-ultra-dark-trans-80

.bg--accent-ultra-dark-trans-60

.bg--accent-ultra-dark-trans-40

.bg--accent-ultra-dark-trans-20

.bg--accent-ultra-dark-trans-10

.bg--accent-trans-90

.bg--accent-trans-80

.bg--accent-trans-60

.bg--accent-trans-40

.bg--accent-trans-20

.bg--accent-trans-10

Secondary Colour

An alternate to the primary colour.

.bg--secondary-ultra-dark

.bg--secondary-dark

.bg--secondary-medium

.bg--secondary

.bg--secondary-ultra-light

.bg--secondary-light

.bg--secondary-comp

.bg--secondary-hover

.bg--secondary-ultra-dark-trans-90

.bg--secondary-ultra-dark-trans-80

.bg--secondary-ultra-dark-trans-60

.bg--secondary-ultra-dark-trans-40

.bg--secondary-ultra-dark-trans-20

.bg--secondary-ultra-dark-trans-10

.bg--secondary-trans-90

.bg--secondary-trans-80

.bg--secondary-trans-60

.bg--secondary-trans-40

.bg--secondary-trans-20

.bg--secondary-trans-10

Shade

.bg--shade-ultra-dark

.bg--shade-dark

.bg--shade-medium

.bg--shade-light

.bg--shade-ultra-light

.bg--shade-ultra-dark-trans-90

.bg--shade-ultra-dark-trans-80

.bg--shade-ultra-dark-trans-60

.bg--shade-ultra-dark-trans-40

.bg--shade-ultra-dark-trans-20

.bg--shade-ultra-dark-trans-10