Breathe

Website Style Guide

This page outlines the current colours, styles and design standards for the Breathe website.

Colours

Primary
#
rgb()
var(--primary)
Secondary
#
rgb()
var(--secondary)
Accent
#
rgb()
var(--accent)
Base
#
rgb()
var(--accent)
Shade
#
rgb()
var(--accent)
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Hover
Light
Ultra Light
Medium
Dark
Ultra Dark
Light
Ultra Light
Medium
Dark
Ultra Dark

Primary Background

Text on an accent background

Secondary Alt Background

Text on an accent background

Dark Background

Text on a dark background

Medium Background

Text on a medium background

Light Background

Text on a light background

Call to action heading

Call to action text
Call to Action

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
text

Alternative heading style

White Heading

white paragraph text

Light Heading

light paragraph text

Accent Heading

accent paragraph text

Text styles

Heading h1

Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.

  • Bulleted list item
  • Bulleted list item
  1. Numbered list item
  2. Numbered list item

A blockquote style for quoted text

Heading h2

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h3

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h4

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h5

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

Heading h6

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. 

 

Fonts

Display: Hind

Source: Google Fonts
Use: Headings

Regular (400)

Semi Bold (600)

Bold (700)

Body: Open Sans

Source: Google Fonts
Use: Most text on the website

Regular (400)

Semi Bold (600)

Bold (700)

Alternative: Lora

Source: Google Fonts
Use: Quotes and text that needs to compliment the main font style

Regular (400)

Semi Bold (600)

Bold (700)

Support for Macrons and other text styles

Nā tō rourou, nā taku rourou, ka ora ai te iwi

With your food basket and my food basket the people will thrive

Heading font
ā ē ī ō ū
Ā Ē Ī Ō Ū

Alt Heading font
ā ē ī ō ū
Ā Ē Ī Ō Ū

A text link 
Small Text
Large Text
Tagline

Testimonials

This is a wonderful testimonial about your services or product. Keep it short and readable and choose one that's relevant to the content around it. 
Person's Name
Person's Title
This is a wonderful testimonial about your services or product. Keep it short and readable and choose one that's relevant to the content around it. 
Person's Name
Person's Title

Forms and lists

[gravityform id="1" title="false" description="false" ajax="true"]
A super simple icon list element.
It has several list items you can easily edit.
Delete rows you don't need.
Duplicate existing rows to add more.
Change the icons per row.
Change the icon padding to adjust the left spacing.
  • Bulleted list
  • another item

Image, image box & video

Our service is fantastic

We love to help you delight your clients. Here's the secret sauce about how we do that. If you want to see how we can help, jump on the phone today. 

Image Background

Dark Transparent Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Image Background

Dark Transparent Background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Background Overlay

Overlay on top of background image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Box styles

Accent Box
Dark Box
Light Box
Dark Transparent Box
Light Transparent Box
Very Light Transparent Box
diamondthumbs-up