04 – Brand Collaterals

02 – Brand Logo

Style Guide

Style Guide

Style Guide

About
Clubhouse™

Brand Colours

The primary colours of the Water Safety New Zealand identity take cues from our nations waterways. These colours have been chosen to represent the authenticity of our culture and brand. Like our waterways, they have been designed to flow together in harmony. Please do not alter this colour palette in any way.

Primary Colours

"Wairoa" (blue) is our primary brand colour, and is a representation of the streams and rivers that connect our waterways.

"Rotokākahi" (green) takes inspiration from the tapu (sacred) lake in Rotorua, which holds special significance to Te Arawa iwi that gifted the whakairo in our logo. The usage of this colour represents our connection to lakes.

Wairoa

HEX #1a427d
RGB 03 61 72
CMYK 94 62 53 44

Rotokākahi

HEX #4d5441
RGB 77 84 65
CMYK 64 50 72 38

Secondary Colours

"Tuna" (off-white) is our primary neutral. It reflects the whitewater and splash of the waves in our oceans. This is the colour you should use when placing the logo on top of imagery, or when using the logo on dark backgrounds. You can also use this as a background accent colour to draw attention to key information.

"Pango" (black) - should only be used on white or light backgrounds. We never use our logo in black on top of any imagery or colours.

Tuna

HEX #eeeeee
RGB 238 238 238
CMYK 05 04 04 00

Pango

HEX #0e0e0e
RGB 14 14 14
CMYK 74 67 66 84

Brand Typeface

The brand font for Water Safety New Zealand is Degular Display. A modern, adaptable, and highly legible typeface that was designed to be used in print and digital interfaces.

One of the key features of Degular Display is its support for numerical symbols, which means it can be used well for social media graphics, and multi-lingual keyboards. This makes it a great choice for Water Safety New Zealand where we often apply macrons when typing in Māori. Additionally, the font is designed to work well on screens, which is essential for a digital consumption of our brand.

The brand typeface should be used exclusively for graphics, titles, and heading areas. We also provide a sub-font "Mori" below which is best used for paragraphs and text rich elements.

Hello, I'm font Degular Display

Weights

We only use our display font 'Degular Display' in the Medium weight for graphics, headings and titles.

Mori is our body, paragraph variable-weight typeface, which means you are able to customize weights and angles to create an infinite number of weights. That being said, we typically stay within these two weights.

Use contrast between heavy and lighter weights to communicate relevant importance, otherwise known as hierarchy, of information.

Degular display (Graphics & Titles)

Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz (0123456789) / ? ! . ; : " ' | $ % & *

Mori Regular (2-3 line text blocks)

Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz (0123456789) / ? ! . ; : " ' | $ % & *

Mori Light (Paragraphs)

Aa Bb Cc Dd Ee Ff Gg Hh Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz (0123456789) / ? ! . ; : " ' | $ % & *

Using Type Rules

When constructing layouts, these tips will help you build interesting, and on-brand compositions with typography.

While these rules are proven and sound, sometimes we break these to best communicate in certain circumstances. Please contact our brand team if you wish to gain special use permission.

1 – Stay Left-Aligned

Legibility and clarity are vitally important to great typographical layouts. Since most people read from left to right, we should align our type accordingly.

2 – Skip Weights & Double Size

Contrast is the name of the game when it comes to great design. When in doubt, skip a weight when pairing two weights, and double the size between two text elements.

3 – Align X-Heights or Baselines

Whenever you place text next to each other, either align the baselines (the line that the bottom of a lowercase x sits on) or align the x-heights (the top of a lowercase x). This helps align each line visually.

4 – Watch The Rag

When setting paragraphs, keep an eye on the right (ragged) edge. If the rag unintentionally creates a recognizeable shape, consider tweaking the language or resizing the container. Also, try to prevent single-word lines (orphans).

5 – Give Things Space, If Needed

Negative space, or the space around elements is vitally important. That being said, if informational elements belong together, move them closer together. Use grouping wisely: just try not to cram too many things in one space!

6 – Keep Line Length Reasonable

It is easy for the user to get lost in long lines of text, and short ones are easily ignored. It’s best to keep lines between 45 and 70 characters long, depending on the size of the font. This will ensure legibility as the font sizes increase or decrease.

Photography / Videography

At Water Skills for Life, we believe that high-quality photography and videography is an essential component of our brand. We use this content to showcase our community, messages, and the difference we make for our tamariki.

Grids

Water Skills for Life uses a grid structure on the website design to ensure a clean, organised and visually appealing layout, while maintaining a consistent and balanced design. The grid enhances user experience and adapts to different screens.

Fonts & Imagery

Fonts & Imagery

Fonts & Imagery

Fonts & Imagery