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.
2.1 Our Logo
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
ABCDEFGHIJKLMNOPQRSTUVWXYZ.,”!*
abcdefghijklmnopqrstuvwxyz 0123456789
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
2.4 Icons
Illustrated icon styles are hand-drawn in a playful style similiar to the Besom font.
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