Website Style Guide

01. Color palette

PRIMARY

SECONDARY

TEXT DARK

TEXT LIGHT

BG DARK

BG LIGHT

#F9F9F9

#e0e0e0

#444444

#000000

02. Text styles

This is a h1 heading over two lines on a light background

This is a h2 heading over two lines on a light background

This is a h3 heading over two lines on a light background

This is a h4 heading over two lines on a light background

This is a h5 heading over two lines on a light background

This is a h6 heading over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a h1 heading over two lines on a light background

This is a h2 heading over two lines on a light background

This is a h3 heading over two lines on a light background

This is a h4 heading over two lines on a light background

This is a h5 heading over two lines on a light background

This is a h6 heading over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a h1 heading over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a h1 heading over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H2 over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Learn more

H2 over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus Leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Learn more

H3 over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H5 over two lines on a light background

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ut elit tellus
Luctus nec ullamcorper mattis
Pulvinar dapibus leo.

Learn more

H3 over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H5 over two lines on a light background

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ut elit tellus
Luctus nec ullamcorper mattis
Pulvinar dapibus leo.

Learn more

Page title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large Row Padding

Using a light background 1

Medium Row Padding

Using a dark background 1

Small Row Padding

Using a light background 2

This is a h1 heading over two lines on a light background

Using Medium Row Padding on a dark background 2.

Column Padding Large

Using a white background

Column Padding Large

Using a light background 2

Column Padding Medium

Using a white background

Column Padding Medium

Using a light background 2

Column Padding Small

Using a white background

Column Padding Small

Using a light background 2

03. Modules

Form on dark background

Form on a light background

Mon to Fri	8:00am – 7:00pm
Sat	8:00am – 12:00pm
Sun	8:00am – 11:00am

Mon to Fri	9:00am – 11:00am
	12:00pm – 2:30pm
	4:00pm – 7:00pm
Sat	9:00am – 12:00pm
Sun	9:00am – 11:00am

Website Style Guide

01. Color palette

02. Text styles

This is a h1 heading over two lines on a light background

This is a h2 heading over two lines on a light background

This is a h3 heading over two lines on a light background

This is a h4 heading over two lines on a light background

This is a h5 heading over two lines on a light background

This is a h6 heading over two lines on a light background

This is a h1 heading over two lines on a light background

This is a h2 heading over two lines on a light background

This is a h3 heading over two lines on a light background

This is a h4 heading over two lines on a light background

This is a h5 heading over two lines on a light background

This is a h6 heading over two lines on a light background

This is a h1 heading over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

This is a h1 heading over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H2 over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H2 over two lines on a light background

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

H3 over two lines on a light background

H5 over two lines on a light background

H3 over two lines on a light background

H5 over two lines on a light background

Page title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Large Row Padding

Using a light background 1

Medium Row Padding

Using a dark background 1

Small Row Padding

Using a light background 2

This is a h1 heading over two lines on a light background

Using Medium Row Padding on a dark background 2.

Column Padding Large

Using a white background

Column Padding Large

Using a light background 2

Column Padding Medium

Using a white background

Column Padding Medium

Using a light background 2

Column Padding Small

Using a white background

Column Padding Small

Using a light background 2

03. Modules

Form on dark background

Form on a light background

Page title block

Using Large Row Padding on a light background 3