Nelson Arts Festival

Website Style Guide

This page outlines the current colours, styles and design standards for the Nelson Arts Festival website.

Colours

Primary

Mahitahi

#

rgb()

var(--primary)

Secondary

Kaore

#

rgb()

var(--secondary)

Accent

Day Tui

#

rgb()

var(--accent)

Base

Night tui

#

rgb()

var(--accent)

Shade

Te Pō

#

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

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

Numbered list item
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
ā ē ī ō ū
Ā Ē Ī Ō Ū

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

Buttons & icons

Accent button Accent Outline button Underlined button Primary button White Button

Primary Button Primary Outline Button Base button

Icon

Icon Alt

Forms and lists

Oops! We could not locate your form.

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

© Nelson Arts Festival 2026 | Privacy Policy | Design by Downing, website by Avoca Web Design