Notes on the brand, your homepage, and a swap we'd like to make

The palette, exactly as the sheet specifies it

All six brand colours are in the site's code with their exact values. Five now render pixel-for-pixel identical to the sheet. The sixth is explained below.

The one that isn't exact: Dark Red

The site's colour engine builds each colour's darker and lighter steps automatically from its parent. That consistency is the point of the system, but it means Dark Red comes out as a darkened version of Red rather than as its own value. The gap is about two percent, and Dark Red only ever appears for a moment, as the colour a button turns when you hover over it.

We can make it exact, but it would mean treating Dark Red as a separate colour rather than a shade of Red, which adds complexity for something almost nobody will see. Happy either way — say the word if you'd like it changed.

Where a website needs more than the sheet gives

Your brand sheet is a logo and print sheet, and it does that job well. A website needs a few things it was never meant to cover. None of these replace your brand colours — they sit around them.

A dark background

The whole look of the new site sits on a deep teal ground. There's no dark background on the brand sheet, so this is an addition, and it's the single biggest visual decision in the design.

Lighter and darker steps of each colour

Every brand colour needs quieter and stronger versions of itself — the colour a button turns on hover, a hairline, a tinted panel. All generated from the brand value, so they stay in family.

A set of quieter tones for text on the dark background

Body copy, captions and fine print each need to sit a step quieter than the one above. These are generated from the background colour itself, so they're tinted to match it rather than being flat grey.

Three functional colours

Forms need to say "that worked", "check this" and "something's wrong". Not brand colours, and they never appear as decoration — only inside a form, next to the field they refer to.

One correction to the brand sheet

Light Aqua's numbers don't agree with each other. The colour code and the print values both describe the pale aqua, but the RGB line reads 121, 78, 154 — which is a purple.

We've gone with the pale aqua, since two of the three values agree on it and it's the colour in your logo and your own designs. Worth passing to Preddy Creative so the sheet can be corrected — anyone working from that RGB line would get it wrong.

Your logo, now as SVG

Your logo set came as PNG, JPG, PDF and Illustrator files. We've produced SVG versions of all fourteen variations from the Illustrator artwork, so the logo stays perfectly sharp at any size on any screen and loads faster.

The whole set is 53 KB against 643 KB for the PNGs, and every one is true vector rather than a traced copy — the original outlines, unchanged.

One small thing we left alone: the Aqua and Blue inside the logo artwork are a fraction off the brand sheet (#89d7d5 and #19637b, against #88d7d4 and #196376). Almost certainly from a print-to-screen conversion when the logo was drawn. We haven't "corrected" your logo files — but if you'd like them brought exactly onto the sheet, that's a quick change.

What we still need from you

The illustrations

Your brand sheet lists illustrations as a brand asset, usable on their own or as a repeating pattern. We don't have those files, and they're the one part of the brand we can't build without. Ideally from Preddy Creative:

• The illustration set as SVG or .ai files, or PNGs with transparent backgrounds
• The pattern-swatch version, if it's a separate file
• A note on where you do and don't want them used

That's the only asset outstanding. The fonts are covered in the next section.

The fonts: a swap we'd recommend

Your brand sheet names three typefaces — Poppins for headings, Now for sub-headings, DM Sans for body copy. Your homepage design introduces a fourth, the handwriting font Caveat. We think Caveat is worth having, and we think Now can go. That keeps you at three typefaces rather than four.

Why we keep the count down

It isn't fussiness. Every font family is a separate file the visitor's browser has to download before text can appear in the right typeface, and that cost lands hardest on a phone. Beyond that, more typefaces means more decisions, and more chances for pages to drift apart from each other over time. The test we'd apply: a typeface earns its place if it does a job none of the others can.

Where that leaves you

What we've done with your homepage design

Your mockup is clear and we're building from it. Three things in it sat outside the brand sheet, and one raised a question we would rather ask than answer for you. Here is how we have handled each.

Type sizes: the homepage and the rest of the site

Your mockup sets the homepage headings large — the main headline at 74px on a desktop screen, the section headings between 52 and 60. The site's type system runs a good deal smaller than that (47 and 35). The question is whether the whole site should come up to the homepage, or only the homepage.

Only the homepage. Its headlines are short, hand-written lines that can carry that size. The rest of the site carries long titles — a blog post called "Victoria's Work From Home Law 2026: What Employers Must Do Before September" would wrap to four lines at 74px. So the site keeps one type system with two tiers in it: a display tier the homepage uses, and the everyday tier every other page uses. Both are set in the same place, both scale smoothly from phone to desktop, and neither is a fixed pixel value typed into a page.

The introductory lines are the one thing that got smaller. They sat a third larger than your mockup, which was the main reason the built page read flatter than the design: the gap between heading and paragraph was narrower than you drew it. Bringing them to 20 restores that gap.

Decisions from the homepage review

With the homepage built, we compared it line by line against your design file. The copy matched word for word. A handful of visual details didn't, and this is how each has been settled.

Accessibility: five fixes made, one decision for you

We checked the design against accessibility standards as we built. Two things needed changing — a link colour in five places, and the button colour across the site. Both are done, and both are a single setting rather than a page-by-page job.

The arrow links on the four option cards, and the "About HR Gurus" link, were set in Turquoise on the card background. Turquoise is a mid-tone, so against that panel it falls just under the legibility threshold — 4.2 where 4.5 is needed. Switching those links to Aqua clears it comfortably at 6.8.

The structural checks all passed: heading order is clean, images carry alternative text, nothing overflows on a phone, and your text colours — including both Caveat lines — are comfortably legible. We've also given the navigation and footer links a little more height so they're easier to tap on a phone.

Seeing the whole system on the site itself

Everything described here is built into the site as a working system rather than a set of values typed in once. There is a page on the site that shows all of it in one place.

How your website looks, and how to ask for it — colours, shades, surfaces, buttons, cards, type, kickers and images, each shown as the site really renders it, with a live accessibility check on every colour pairing.

It's worth knowing what that page is, because it isn't a picture of the design. Every swatch and sample on it is drawn by the site's own settings as the page loads, so if a colour is ever adjusted the page changes with it and can't quietly go out of date the way a printed style sheet does. It says what each colour is for, which is the part that keeps a site on brand once several people are building pages in it, and every section ends with the words your team would use to ask for something.

It sits on the staging site while we build and is hidden from search engines. It moves across with everything else at launch, and it's the page we'd point your team to when they start building pages themselves.

Three things on your About and Careers pages

Both pages are built and every word is yours, carried across as it stands. Three things on the current versions look like leftovers rather than choices, and only you can tell us which. None of them holds anything up.

One thing on your footer

The footer now carries your phone number, your email address and a link to your Google listing. The old site's footer also had a street address, and we have left that out for the moment, because the heading above it did not match the address underneath.

This is what the old footer said:

• HR Gurus Locations
• Tasmania Office
• Level 14, 330 Collins Street, Melbourne Victoria 3000, Australia

A Tasmanian heading over a Melbourne address looks like something that went wrong rather than something you meant, so we have not copied it across.

There is also a reasonable case for leaving an address off the footer altogether. Your Google listing already carries the address, the opening hours and directions, it is linked from the footer, and it is what most people use to find a business. An address in the footer as well is not wrong, it is just a second place to keep up to date.

Update, 5 September. One thing to sort out before launch, and it affects the answer below: your Google listing still shows Williamstown North. The addresses we have from your current website are Level 14, 330 Collins Street, Melbourne and Rear, 600 Glenferrie Road, Hawthorn, and those are what the new Contact page uses. So the argument that the Google listing already covers it does not hold while the listing points somewhere else. Worth deciding which addresses are the real ones, getting the Google listing corrected, and then answering the footer question.

One thing on your site search

The magnifying glass in your header now works properly. Type a word into it and you get a real results page: everything on the site that matched, twelve to a page, with the rest a click away. It looks through your articles, your HR Advice pieces, the glossary, the service pages, the team profiles and the main pages — searching redundancy puts the glossary definition first, then the articles.

That is WordPress’s own search, and it is straightforward about what it does: it matches the words someone types against the words on the page. Four things it does not do:

• It does not know that terminate and termination are the same word.
• It does not forgive a typo. redundancey finds nothing at all.
• It does not rank a word in a heading above the same word buried in paragraph nine.
• It cannot read inside a PDF.

There is a tool that fixes all four, called SearchWP. It is US$199 a year, billed in US dollars and renewing annually, so it is a spending decision rather than a design one. We have not bought it and have not committed you to it.

What we would suggest: launch on the search you have, and look at this again after a month or two. Once the tracking goes live at launch, Google Analytics records what people actually type into that box. That list is the thing worth deciding on — it tells you whether the misses are the kind SearchWP fixes, or whether hardly anyone uses search in the first place. Either way the results page stays as it is: SearchWP changes how matches are found, not how they are shown, so nothing gets rebuilt if you buy it later.

Whether “Get HR help” is also your contact page

At the moment the site has one page for this: Get HR help, which is the enquiry form. Your old Contact address points at it, so anyone who arrives there lands on the form.

Your contact details today live in the footer of every page: the 1300 number, the info@ address, and a link to your Google listing. Nothing carries an office or postal address, an ABN, or the hours you answer the phone.

That is worth a second look, because a form page and a contact page are doing two different jobs. A form page is written to get someone to type their problem into a box. A contact page answers a different question — who are these people, where are they, and how do I reach a human? Some people will not fill in a form at all until they have seen that page.

It also matters to Google. Google pays people to review sites by hand against a written checklist, and one of the things they are told to look for is whether a business that gives advice makes it easy to find out who it is and how to contact it. For a business advising employers on people’s jobs, thin contact details count against you. A single page carrying the registered name, the phone number, the email address, an address, the ABN and the hours is the straightforward answer to that.

None of this is urgent and nothing is blocked by it. But it changes two things if you want it: a page for us to build, and where your old /contact/ address points — at the new page rather than at the form. It also overlaps with the footer question in section thirteen, so it is worth answering both together.

Update, 5 September. You asked for this directly while reviewing the staging site, so we have gone ahead and built it rather than wait: Get HR help is now the enquiry form on its own, and there is a new Contact page carrying the phone number, email address, office hours, ABN and both office addresses with a map for each. It is in the Explore list in the footer. Your old /contact/ address now opens that page instead of bouncing to the form. The question below is left here so you can still tell us if you would rather it worked another way.

What happens next

Nothing here holds us up — we're carrying on with the homepage and can drop any of these in afterwards. The illustrations are the only item we genuinely can't proceed without.