Brand Colours
The colours of the Water Safety New Zealand identity take cues from our lakes, rivers, and oceans. 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
"Moana" (deep blue) is our primary brand colour, it's dominant, adaptable, and a representation of our connection to the oceans that surround our island nation.
"Waipuna" (light blue) represents the light, clear water from springs. It is particularly suited as an accent colour to darker backgrounds or when used in combination with 'Moana' as seen in our primary logo lockup.
Moana
HEX #1a427d
RGB 26 66 125
CMYK 100 84 23 08
Waipuna
HEX #28ace2
RGB 40 172 226
CMYK 70 14 00 00
Secondary Colours
"Tuna" (off-white) is our primary neutral. It reflects the whitewater and currents in our rivers. 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) - Preferably we avoid using our logo in black and find that "Moana" can generally be used as our high contrast option. However, if required by certain applications you can use the logo in black as long as it all single tone.
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 "Inter" 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.
Inter 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) / ? ! . ; : " ' | $ % & *
Inter 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) / ? ! . ; : " ' | $ % & *
Inter 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 Safety New Zealand, 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 our work. (Our sample gallery will be available shortly for reference).
Grids
Water Safety New Zealand 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.
