Skip to content

2024 Website Style Guide

Colours

New Expanded Gradient Colour Scheme

Middle colour is the dominat one, with ligher and/or darker used for better contrast on sections and button & background gradients.

Blues

Oranges

White - Grays - Black

Grays are slate (blue tinted). White is very light slate (same as background colour), and black is very dark slate

Fonts

Move heading fonts away from serif to a sans-serif font. Fira Sans is suggested, as it adds a bit of style, while still being very readable. Not all weights will be used, but are provided for example.

Heading Font - Fira Sans

Heading 1 Normal

Heading 1 Medium

Heading 1 SemiBold

Heading 1 Bold

Heading 1 ExtraBold

Heading 1 BlackBold

Heading 2 Normal

Heading 2 Medium

Heading 2 SemiBold

Heading 2 Bold

Heading 2 ExtraBold

Heading 2 BlackBold

Heading 3 Normal

Heading 3 Medium

Heading 3 SemiBold

Heading 3 Bold

Paragraph Font - Poppins

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum ut ex vel pulvinar. Donec accumsan lacus eget finibus fringilla. Praesent dignissim gravida arcu eget sollicitudin. Donec sit amet justo in nisi feugiat pretium vel vel risus. Quisque facilisis, diam a auctor dapibus, nibh felis fermentum tellus, non vulputate quam tortor vitae eros. Nunc gravida porttitor enim, sed egestas nisi tempus aliquam.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam rutrum ut ex vel pulvinar. Donec accumsan lacus eget finibus fringilla. Praesent dignissim gravida arcu eget sollicitudin. Donec sit amet justo in nisi feugiat pretium vel vel risus. Quisque facilisis, diam a auctor dapibus, nibh felis fermentum tellus, non vulputate quam tortor vitae eros. Nunc gravida porttitor enim, sed egestas nisi tempus aliquam.

Book Now