Styles & components

Typography

Tailor the font style to your preference by accessing the Variables panel.
Pick the font family you'd like to adjust effortlessly.

Should you wish to explore different fonts, navigate to Site Settings > Fonts. This section allows you to upload custom fonts, seamlessly integrate Google Fonts, or connect your Adobe Fonts account for a personalized touch. Once you've successfully uploaded a font in Site Settings, return to the Variables panel.
There, choose the specific font family you've added to implement any desired modifications.

The fonts utilized in this template are freely available for use under the Google Fonts license.

Hero

Hero Heading
Google font: Hepta Slab

Hero

Hero Small Heading
Google font: Hepta Slab

Big heading

Big Heading
Google font: Hepta Slab

Heading H1

All H1 Headings
Google font: Hepta Slab

Heading H2

All H2 Headings
Google font: Hepta Slab

Heading H3

All H3 Headings
Google font: Hepta Slab

Heading H4

All H4 Headings
Google font: Hepta Slab
Heading H5
All H5 Headings
Google font: Nunito

Paragraph

All Paragraphs
Google font: Nunito

Big Paragraph

Big Paragraph
Google font: Nunito
Colours

Harness the power of Webflow's variable feature with this template, enabling effortless color modifications that propagate across the entire site. To tweak a color, navigate to the Variables panel and select the one you want to adjust.

Aa
Black
Aa
White
Aa
Primary 1
Aa
Secondary 1
Icons

Most icons are Google material symbols, click here to read more about them.
‍‍
To change colour on SVG elements, download the .svg file from Assets, open it in a text editor, and seamlessly replace the HEX color code with your desired hue. Then, update the .svg file on the site with the modified version. It's that simple!

Buttons

Tailor the button colour and radius to your preference by accessing the Variables panel.

Primary ButtonPrimary ButtonPrimary Colour 1Primary Colour 2Primary Colour 3Secondary colour 1