Style Guide

This is your complete guide to this templates styling and interface elements.

Colour Palette

These are the global colour swatches that are used to colour all the elements on this website.

You can edit these easily throughout the entire site by clicking on the swatch, and editing the global colour. Too easy!
Dark Brand Color
Brand Color 1
Brand Color 2
Light Color
Neutral Color 1
Neutral Color 2
Neutral Color 3
Success Color
Alert Color
Error Color

Type Styles

Here's a handy list of the main type styles used throughout this website.

Edit these universally by clicking on the style, choosing 'Edit all ...' from the selector (look for the pink HTML tag) and change the type style accordingly.

Heading One

All H1 Headings

Heading Two

All H2 Headings

Heading Three

All H3 Headings

Heading Four

All H4 Headings
Heading five
All H5 Headings
Heading Six
All H6 Headings

Large Body Text Large Link

Text Large
All Links

Paragraph Body Text Body Link

All Paragraphs
All Links

Small Body Text Small Link

Text Small
All Links
Block Quote
All Block Quotes


When words just can't say enough, icons can step in.

Here's a set of some useful ones, in dark and light to use throughout your website.

Badges & Stickers

These badges can be used as category tags for blog posts or other content, or to help guide your website viewers to certain details on the page.
Badge Text
Outline Badge
Badge Text
on sale
Badge Text
on sale now
spring time special
Large Sticker
Badge Text
Luna Flora Loves
Buds of the Month
Extra Large Sticker
Badge Text


A 'card' is a multi-purpose component used to display content on your website in a contained format.

You can mix and match the different card styles here to create a hierarchy of information on your pages, or choose one style for a more uniform look.