Harmoney Brand Style Guide

Philosophy

The tagline stack

Harmoney has four taglines, used in four different places. Pick the line that fits the channel; do not invent new framings.

The customer-centricity checklist

Nine questions asked of every piece of customer-facing work:

Primary mark - the button

The logotype enclosed in the button shape is used on all external-facing communications. Minimum size equals the smallest button size; the mark can scale very large.

Red button on white ground

Lettermark

The simplified lettermark serves constrained spaces - app icons, favicons, mobile navigation. Two colourways only: red on light or white grounds, white on dark or red grounds.

Red lettermark on white

White lettermark on Choral Red

Device mark - the dot

Clear space

Keep 0.5x button height between the logo and content edges, and a minimum of one button height between the brand mark and accompanying text in a lock-up. The lettermark keeps 0.5x circle height to margins.

0.5x 0.5x 0.5x 0.5x

Rules

Brand primary

Brand secondary

Blue is the interactive highlight in the funnel - buttons, field highlights, text links. Green indicates success and completion.

Functional greys

System colours

Error Red and Alert Yellow appear only as icon fills or field outline highlights - never as fills for large areas.

Extended palette - the tonal ramps

Each family runs a full ramp from 150 (darkest) to 25 (lightest). Gradients and tints stay inside a single family.

Gradients - all fourteen

Only create gradient combinations within each colour family, blending dark to mid-tone to light. Angular 45-degree gradients serve buttons and icons (lighter colour on top edge); vertical gradients serve website section separators and graphs; angular circular pairings serve donut graphs. The white gradient is reserved for website content separators.

Shadows

The inner shadow serves buttons and data call-outs on graphs. The drop shadow is cast in Grey 100 at 50 percent opacity.

Usage and contrast

The three families, every served weight

This document embeds the exact font files the website serves. What renders below is the served subset, weight by weight.

The type scale

The scale is an Augmented Fourth (factor 1.414), rounded to the nearest four, with solfège step names. Sizes are literal pixels; below 640px viewports the mobile values apply (resize this window to see the scale respond). Headline leading is solid - leading equals type size. Body leading is loose - 1.4x, rounded to the nearest factor of four.

Setting rules

Served font payload

Six faces are served, subset to the required character ranges including the macron set.

Spacing scale

The factors apply to scales, strokes, spacing and radius alike.

Corner radii

The pill is the core brand shape - the call to action is always the pill.

Grid thinking

Web breakpoints

The website is mobile-first: base styles are the single-column layout, and enhancements apply at two breakpoints.

Structural primitives

Three primitives lay out every page - a centred 1200px container, a padded section, and a vertical stack. This document is itself built from them.

Product benefits · 11 icons · expressive register

Loan needs · 11 icons · expressive register

Loan purposes · 18 icons · monochrome line-art register

Offer tiles · 13 icons · functional register

Interface icons · 24 icons · stroke inherits text colour

How the families map

File names are stable identifiers; the product data owns the ids and display labels.

The Harmoney ease

Ease in hard, ease out soft: maximum force at departure (outgoing velocity 100%), controlled landing (incoming velocity 50%). The curve applies to position, scale, rotation and opacity alike. Never linear; never the default ease.

The May 2021 documentation records the curve as cubic-bezier(1, 0, 0.5, 1); the interactive brand demonstrations implement cubic-bezier(0.99, 0, 0.58, 1), and the brand definition directs that the implemented curve governs. Every animation on this page runs on it.

The five principles

The six core behaviours - live

Each demonstration below is driven by the motion tokens themselves. Replay any of them.

Building blocks - a selection, live

The full kit also carries shifting type, list scroll (generic and specific), the typing paragraph, the shifting container (one per banner, always left-to-right or bottom-to-top, corner radius half the shortest side) and image parallax (2.5 percent scale per second).

Bespoke animations

Above the building blocks sit four bespoke dot-metaphor compositions, each expressing a key brand idea. Reference stills from the canonical demonstrations:

Start Now - a single dot launches with a long gradient trail

Start Fresh - multiple dots converge and merge into one

Intelligent Review - a single dot tracked up close, "Processing securely"

Congratulations - dots resolve into the hidden Harmoney smile

Deciding what to animate

The tonal scale

Voice runs on a continuum from aspirational to educational. Headlines and advertising sit at the aspirational end - supportive and encouraging, humbly presenting future possibilities rather than over-selling big dreams. Product copy sits at the educational end - knowledgeable, trustworthy, clear human language.

The three language rules

For trust signals, render the live customer count through the counter pattern - "Trusted by over {{customer_counter.formatted}} customers." - rather than fixing a number into the copy.

The anchor verb: Start

"Start" is the structural spine of approved messaging - it leads headline-position copy and conjugates with an aspiration ("Start the renovations"), a product name ("Start Now loans") or an imperative close ("Start online now"). Supporting verbs: help, make, fix up, clean up, get stuck in.

Lines that are not in the brand

• Faster Fairer Loans - a cliché, not a conversation.
• Personalised rates just for you - replaced by "A great rate analysed just for you."
• Unlock your dreams, Take the leap, Empower your finances - wrong register.

The cheat-sheet

Long copy - the gold standard

Long copy spends most of its words describing the customer's situation, then resolves to a fresh-start payoff. Open with a verb of intent in the infinitive - "To get", "To settle" - never an imperative command. Concrete beats abstract. The product name is a payoff, not a hook, and the fine print is straight-up rate disclosure.

The supporting line beneath any "Start" anchor headline: "We are here to help you start now with personal loans, directly, discreetly, diligently. No middle men, no judgements, just clever use of smart technology to make fairer, faster decisions about your loan."

Regional distinctives

Radio - approved verbatim scripts

Broadcast scripts are approved verbatim and combine established building blocks; new framings are not invented at the microphone. Contractions are permitted in approved broadcast scripts only - they are quoted here exactly.

The four principles

Backgrounds

Casting - the heritage brief

The 2022 production casting brief (heritage record): talent aged 20 to 50, friendly and relatable with a naturally optimistic disposition, across a deliberate diversity matrix.

Wardrobe palette - the heritage brief

Everyday chic: solid colour blocks, no fine patterns, nothing that clashes with red or dark typography running over images.

Swatch chips are indicative, drawn from the brand palette; the wardrobe brief names garment colours, not screen values.

Chart types and when to use them

Design rules

A compliant example

Sample bar graph drawn to the rules: rounded bars, single-colour red gradient, mono axis labels, call-out with the inner shadow treatment. Sample values are illustrative.

Animating a graph

Universal rules

The curve element

The curve is the default compositional device, integrated into the background or composition where space permits. Omission is permitted - with the reason recorded against the asset - where the format makes the curve create unusable space: 200x200 and smaller squares, the 468x60 banner, and skyscraper variants where the curve would crop the protagonist or the copy.

Format constraints

Canonical copy

Replace the licence number if it changes; do not alter the structure of the strapline.

Construction, by orientation

Register

Where a role is not currently held by a named individual, it is exercised by the next most senior available authority.

Open items

1. Webfont licence confirmation. Webfont rights for the brand-supplied typefaces are asserted operationally but not yet confirmed in writing. Production use on the harmoney.com.au and harmoney.co.nz web hosts awaits that written confirmation. Item owner: Harmoney.
2. Button-logo vector export. The full-wordmark button logo exists only as an approved raster (333 x 76). A production-grade vector export from the original design source is outstanding; section 3 renders the raster.
3. Photography asset library. Rules and production briefs are defined (section 11); the curated, licensed image library is a defined next phase. No imagery ships with the brand definition today.
4. Animated icon rebuilds. The animated product-benefit icon instances on the live site are broken (empty animation data) and render as static artwork. The animations are to be recreated from the brand rules rather than recovered.
5. Need-icon inheritance decision. "Do need pages carry their own icon, or inherit the icon of the purpose they point to?" Flagged for the designer session (section 8).
6. Icon legibility flags, recorded for the next design review. (a) The interest-rate open lock could be misread as signalling a variable rate. (b) The secured-versus-unsecured shackle difference on the comparison-rate pair is near-invisible at 64px; each tile renders alone on its product page, so side-by-side distinguishability is secondary. (c) The path-drawn "yr" on the loan-terms tile is the weakest legibility in the set. (d) The home-improvements brush shape is approximate.
7. Emphasis (bounce) duration. The 1000ms emphasis duration is carried from the earlier stylesheet vocabulary and is not yet a named token alongside the 600ms base. To be tokenised with creative-director sign-off.
8. New Zealand growth-product label. The Australian market carries the "Start Now loans" product label; the New Zealand corpus uses the generic "personal loan". Whether New Zealand adopts a parallel label is open with New Zealand marketing.
9. Documented-versus-implemented easing curve. The May 2021 documentation and the interactive demonstrations differ (section 9). Resolved in favour of the implemented curve by the brand definition; recorded here so the approval covers that choice explicitly.
10. Photography framing rule, by era. The 2021 library rule (crop at waist) and the 2022 production rule (crop at knees) both stand, scoped by production era; do not mix eras within a banner set. Recorded here so the approval covers the dual rule explicitly.
11. Known errors in the 2021 agency source, documented and not propagated. The archived agency pages carry minor listing errors - for example one palette step listed twice and several spelling slips. The brand definition corrects these; the originals remain preserved for provenance.