Kleenheat Brand Style Guide

We aim to present our Kleenheat brand in a striking and memorable way — be it to existing or future customers, our stakeholders, or the broader energy market.

1. Introduction

1.1 Our personality

If Kleenheat was a person, would you want to be their friend? Personality goes a long way towards building relationships, which is why we need to focus on the traits that make great first impressions and stand the test of time.

Who we are:

  • Leader The captain, not the coach. We are part of the team and speak for the team.
  • Reliable We do what we say we will.
  • Honest We don’t hide behind jargon and T&Cs.
  • Inclusive We don’t pick sides, we unify.
  • Humour We like a laugh as much as our customers.

1.2 Our tone

Now we undersand our brand personality, let’s help make sure it shines bright on our website.

  • We’re purposeful when we speak because we have something to say.
  • We’re open and warm.
  • Our style is conversational.
  • Our language is straightforward.

2. Brand

We want the way we look to mirror our service offering: strong and consistent.

The Kleenheat logo is a fundamental asset of our brand. The logo is to be used across a variety of marketing collateral and communications.

The preferred version of the logo is blue on a light-coloured background (Option 1). The alternative is to use a white logo on dark-coloured backgrounds (Option 2).

2.2 Colour palette

Primary colours

The Kleenheat blue is the dominant colour used to represent the brand and should be heavily used throughout all collateral.

Name Hexadecimal SASS Variable
Kleenheat Blue #009ee3 $color-cyan
Dark Blue #12273e $color-navy
Kleenheat Dark Blue #00457c $color-royal
Mid Blue #0096d0 $color-cyan-web
Light Blue #87cde8 $color-cyan-light
Pale Blue #eef7fc $color-cyan-pale

Secondary colours

The secondary colour palette has been introduced to showcase Kleenheat’s bright and friendly personality.

The colours should be used sparingly to complement the primary colour palette.

Name Hexadecimal SASS Variable
Purple #7869a7 $color-brand-purple
Pink #c72969 $color-brand-pink
Yellow #ffcc00 $color-brand-yellow
Green #30773f $color-brand-green
Grey #e4e6d4 $color-brand-grey

Grey Colours

The grey colour palette may be used to set out regions of a web page.

Name Hexadecimal SASS Variable
White #ffffff $color-white
Grey 2 #fafafa $color-grey-2
Grey 5 #f2f2f2 $color-grey-5
Grey 10 #e5e5e5 $color-grey-10
Grey 15 #d9d9d9 $color-grey-15
Grey 20 #cccccc $color-grey-20
Grey 30 #b2b2b2 $color-grey-30
Grey 40 #999999 $color-grey-40
Grey 50 #7f7f7f $color-grey-50
Grey 60 #666666 $color-grey-60
Grey 70 #4c4c4c $color-grey-70
Grey 80 #333333 $color-grey-80
Grey 90 #191919 $color-grey-90
Black #000000 $color-black

2.3 Typography

The primary typeface for headings and body copy is ASAP, used in bold and regular.

ABCDEFGHIJKLMNOPQRSTUVWXYZ.,”!*

abcdefghijklmnopqrstuvwxyz 0123456789

ASAP Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ.,”!*

abcdefghijklmnopqrstuvwxyz 0123456789

ASAP Regular

Besom is our handwritten font used for break out text or copy that needs highlighting. This font should only be used for a portion of a headline or call out quote. It should never be used across a complete sentence or for paragraphs of text.

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Besom

2.4 Icons

Illustrated icon styles are hand-drawn in a playful style similiar to the Besom font.

Home/Residential
Home/Residential
Quarterly Bills
Quarterly bills
Email
Email

3. Language

When we say something, we want our audience to know it’s coming from Kleenheat. Each time we talk we want to use language that puts our customers at the heart of what we’re saying.

3.1 Our tone

At Kleenheat we talk like humans, not robots. We want every customer interaction to feel like a chat with a friend. This means we:

  • use simple, straightforward language,
  • avoid using jargon and corporate speak,
  • engage in conversations, not just transactions,
  • are open, warm and friendly,
  • have fun — energy shouldn’t be too serious, and
  • use first person not third — we work at Kleenheat, so we’re a part of Kleenheat.
Example:
Say: “To switch, phone 13 21 80.”
Not: “To find out more about switching, give us a call on 13 21 80 today.”

3.2 Acronyms

If there’s a chance your reader won’t recognise an abbreviation or acronym, spell it out at first mention — then use the short version going forward.

Tip: If the abbreviation or acronym is well known (like SMS or HTML) don’t worry about spelling it out.

Long form Acronym External use?
Natural Gas NG No
Liquid Petroleum Gas LPG Yes
Liquid Natural Gas LNG Yes
Customer Service Team CST No
Monthly Energiser ME No
Monthly Smart Saver MSS No
Standard Form Contract SFC No
Western Australia WA Yes
Northern Territory NT Yes

3.3 Capitalisation

Avoid capitalising random words in the middle of a sentence unless they’re products, places or people.

Example: “Choose our Monthly Smart Saver plan and save.”

Always refer to Kleenheat with a capital “K”. (No exceptions, ever.)

We should always capitalise our states. (Remember, it’s Western Australia, not West Australia.)

Document titles and headlines should use sentence case.

3.4 Contractions

Joining two words is great and represents our honest, relaxed and friendly brand. Do it whenever appropriate.

Examples: We’re; you’re; it’s; we’ll.

3.5 Spelling

Remember to use Australian English — that means ‘s’ over ‘z’ always.

Example: Organised, not organized.

Note: In code, whether C#, HTML, CSS, or JavaScript, use American spelling.

3.6 Numbers

Spell out a number when it begins a sentence or is less than 10. Otherwise, use the numeral.

Examples: One, two, three, four, five, six, seven, eight, nine, 10.

Numbers over three digits need commas.

Examples: 999; 1,000; 150,000

Once we reach a million, save the zeros and spell it out. (For dollars, abbreviation is okay.)

Examples: Five million, $10m

Always stick to two decimal places with decimals.

Example: 4.57, not 4.5729

NOTE: To round the number to two decimal places use the first four decimal places. This is a regulatory requirement.

Explaining figures as fractions? Spell them out.

Example: Two thirds, not 2/3

In most cases, it’s fine to use the “%” symbol when referring to a percentage. If writing formal documents (like contracts, agreements, processes or procedures) it’s best to use “per cent”.

Example: “Switch to Kleenheat and save 20% on your gas charges.”

Use a hyphen (-) to indicate a range or span of numbers.

Example: “Delivery is in 2-3 working days.”

3.7 Dates and times

As a general rule, always include the day, month and year in their entirety. (Steer clear of using “th”, “nd”, “st” or “rd” for dates, too.)

Example: Saturday 24 January 2017

Use numerals and am or pm without spacing. Always include minutes, even if it’s the top of the hour.

Example: 7:00am - 7:35pm

3.8 Measurements

We often need to explain measurements as part of our product and service offering. Here’s an overview:

Kilogram – 45kg
Tonne – 100T
Megawatts – 30MW
Megawatt Hour – 26,000MWh
Gigajoules – 15GJ
Terajoules – 0.5TJ