Styleguides

Primary logo

With icon

Sustainability

Colours

Brand

Black
#000000

White
#FFFFFF

Grey
#EFEFEA

Light Grey B
#F9F8F7

Neutrals

Text
#333333

Secondary Grey
#79726B

Tertiary Grey
#B0AAA5

Mid Grey
#DCD8D3

Light Grey
#EFEFEA

System

Success
#177241

Error
#941212

Warning
#BC6C23

Info
#333333

Success Light
#E8F1EC

Error Light
#F4E7E7

Warning Light
#F8F0E9

Info Light
#EFEFEA

Desktop Headings

Display Heading

Century Gothic / Regular / 32

Heading 1

Century Gothic / Regular / 26

Heading 2

Century Gothic / Regular / 22

Heading 3

Century Gothic / Regular / 18

Heading 4

Century Gothic / Regular / 16

Mobile Headings

Large Display

Century Gothic / Regular / 28

Heading 1

Century Gothic / Regular / 24

Heading 2

Century Gothic / Regular / 20

Heading 3

Century Gothic / Regular / 18

Heading 4

Century Gothic / Regular / 16

Paragraph

Medium Regular
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Regular / 14

Medium Bold
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere.

Century Gothic / Bold / 14

Medium Underline
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Underline / 14

Medium Strikethrough
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Strikethrough / 14

Small Regular
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Regular / 12

Small Bold
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere.

Century Gothic / Bold / 12

Small Underline
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Underline / 12

Small Strikethrough
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Strikethrough / 12

X-Small Regular
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Regular / 12

X-Small Bold
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere.

Century Gothic / Bold / 12

X-Small Underline
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Underline / 12

X-Small Strikethrough
Lorem ipsum dolor sit amet consectetur. Fames massa lectus tellus dolor posuere tellus.

Century Gothic / Strikethrough / 12

Buttons

Medium

Small

Additional button with icons

Texts

Small Black

Small White

Medium Black

Medium White

Large Black

Large White

X-Large Black

X-Large White

Links

Link Black Link White

Checkbox

Radio Buttons

Slider/Range

Switch

Input/Email

your email address is invalid

Text Area

Select dropdown

Icons