The website, piece by piece
Rendered live by the same stylesheets the website links
Every specimen below is rendered by the production component classes - not a picture of the website, the website's own rules applied to sample content.
The same rules applied on complete pages can be reviewed on the demonstration site at au.cloudflare-harmoney.workers.dev.
The header and the footer carry a fuller specification than the components between them, because each is built twice - once in the content management system, once in the worker - and the two must come out the same. For those two, the specimen is followed by the contracts a developer needs: the element tree, the values that vary by market, the behaviour, the accessibility requirements, and what each implementation has to do differently.
Header
The header carries the brand mark, the navigation, one contact control and two calls to action. Everything in it is either a destination or an action; nothing in it is decorative.
Header · wide · brand mark · navigation with the investor disclosure · contact control · two calls to action
Open the Investor Centre disclosure above with the keyboard: tab to it, press Enter or Space, arrow or tab through the four links, press Escape to close. Focus returns to the trigger. The trigger is a button and not a link, because it has no destination of its own.
Header · compact · menu button and panel (panel held open for review)
Below 880px the bar carries the brand mark, the contact icon, the primary call to action and the menu button; the number and the secondary action ride in the panel, so both required elements remain reachable at every width. From 880px the inline navigation replaces the panel and the number joins the bar. The panel above is held open for review.
Contact control · both markets · the two numbers do not derive the same way
One anchor, not two: the icon is hidden from assistive technology and the number is the accessible name, so the control is a single tab stop announced as its own number. The displayed string always stays national - never render the international form to a customer.
Contact rule: the dialled value and the displayed value are two separate stored fields, and neither is computed from the other. There is no single transform that is correct for both markets: Australia keeps the leading 1 of a 1300 number, New Zealand drops the trunk 0 of an 0800 number. Deriving one from the other produces a well-formed number in the wrong country, which fails silently rather than loudly.
Header · structural contract
| Part | Element and class | Required | Notes |
|---|---|---|---|
| Root | <header class="hmy-site-header"> | Yes | Banner landmark. One per page. |
| Bar | .hmy-container.hmy-site-header__bar | Yes | Brand mark, navigation, actions. |
| Brand mark | a.hmy-logo | Yes | An anchor to the market home page. It carries the accessible name, so the marks inside it do not. |
| Mark · compact | svg.hmy-logo__mark.hmy-logo__mark--lettermark | Yes | The lettermark - the canon variant for constrained spaces. Shown below 880px. |
| Mark · wide | svg.hmy-logo__mark.hmy-logo__mark--primary | Yes | The primary mark, the logotype in its button shape. Shown from 880px. |
| Inline navigation | nav.hmy-site-nav | Yes | Hidden below 880px. Needs an accessible name. |
| Navigation link | a.hmy-site-nav__link | Yes | Repeats. The inline set is bound by width, not by importance. The bar holds the brand mark, the links, the contact control and two calls to action, and it has a finite amount of room; an item the register marks as not-inline stays primary and stays in the menu at every width, and is simply not rendered here. Which item yields is an editorial decision and belongs in the navigation register, so that changing it is a data edit rather than a stylesheet one. |
| Inline-link marker | a.hmy-site-nav__link--in-bar | Yes, in the panel | Carried by the panel's copy of every link that also appears inline, so the wide breakpoint can hide exactly those and leave the rest. |
| Disclosure | .hmy-nav-dropdown | Optional | A navigation link that owns a group of links. Repeatable. |
| Disclosure trigger | button.hmy-nav-dropdown__trigger | With disclosure | Button. Carries aria-expanded and aria-controls. |
| Disclosure panel | ul.hmy-nav-dropdown__panel | With disclosure | List of links. Its id is the trigger's aria-controls. |
| Actions | .hmy-site-header__actions | Yes | Contact control then calls to action, in priority order. |
| Contact control | a.hmy-phone | Yes | One anchor wrapping both parts. |
| Contact icon | span.hmy-phone__icon | Yes | aria-hidden="true". The brand phone icon at 24px. |
| Contact number | span.hmy-phone__number | Yes | The digits, never the phoneword. Suppressed in the bar below 560px, where only the icon and the tel: target remain; the panel instance always shows it. A phoneword form belongs in the footer, which is a column and has the room - in the bar it costs 268px of type beside a 24px icon, which is what pushed the New Zealand header 123px past its own container. |
| Primary action | a.hmy-btn | Yes | Exactly one per header. Keeps its words at every width - it is the primary action, and an unlabelled one is a guess. Its side padding tightens below 880px rather than its label shortening. |
| Secondary action | a.hmy-btn.hmy-btn--secondary.hmy-signin | Yes | Exactly one per header. Present at every width: below 880px it is the sign-in glyph alone, from there it is the word. |
| Secondary action glyph | span.hmy-signin__icon | Yes | aria-hidden="true". Shown only below 880px, so the control is never both glyph and word. |
| Secondary action label | span.hmy-signin__label | Yes | Hidden below 880px. The anchor carries the accessible name itself, so the control does not rename itself at a breakpoint - a control that loses its name when it loses its label is a control that fails exactly the people least able to recover from it. |
| Menu button | button.hmy-nav-toggle | Yes | Present at every width per the navigation canon. |
| Panel | .hmy-nav-panel | Yes | Stacked link set. .is-open reveals it. |
| Bar capacity | - | Constraint | Brand mark, navigation, contact control and both actions fit one line at 880px. A market whose navigation outgrows the line moves links into the panel; it does not shrink the actions or let them clip. The specimen above shows two links and one disclosure, which is the practical ceiling alongside a contact control and two pills. |
The live estate ships the contact control as two adjacent anchors to the same destination, wrapped in .cs-contact-btn > .icon-wrp plus .contant-wrp. Two links to one destination is a duplicate, not a variant, so this specification collapses them to one. The mapping is recorded below rather than the spelling carried forward.
| Content management system class | This specification |
|---|---|
| .cs-contact-btn | a.hmy-phone |
| .icon-wrp | span.hmy-phone__icon |
| .contant-wrp | span.hmy-phone__number |
| .hs-button | a.hmy-btn |
| .hs-sec-btn | a.hmy-btn.hmy-btn--secondary |
Header · data contract
Every value that varies by market, with its type and where it is stored. Nothing in this table is computed at render time.
| Value | Type | Australia | New Zealand |
|---|---|---|---|
| phone_e164 | Stored string | +611300042766 | +64800427666 |
| phone_display | Stored string | 1300 042 766 | 0800 427 666 (0800 HARMONEY) |
| Stored string | …@harmoney.com.au | …@harmoney.co.nz | |
| apply_url | Stored URL | secure.harmoney.com.au/?iam_screen_hint=signup | secure.harmoney.co.nz/?iam_screen_hint=signup |
| signin_url | Stored URL | secure.harmoney.com.au/?iam_screen_hint=signin | secure.harmoney.co.nz/?iam_screen_hint=signin |
| investor_host | Stored URL | investorhub.harmoney.com.au | investorhub.harmoney.com.au |
| nav_model | Structured list | Market navigation tree | Market navigation tree |
| statutory_set | Reference | Australian block set | New Zealand block set |
The investor host is deliberately the same for both markets. One listed parent, one investor hub. The New Zealand site linking to the .com.au host is correct and must not be "fixed" to .co.nz. All four investor links open in a new tab with rel="noopener".
The dialled value is stored, never derived. The link is the scheme plus phone_e164 exactly as stored. Prepending the country code to the displayed digits gives the right answer in Australia and a New Zealand number carrying a trunk zero. Stripping the leading digit first gives the right answer in New Zealand and turns the Australian number into a valid Australian fixed line. Both wrong forms parse. Neither throws. Storing the value is what makes the mismatch impossible rather than merely corrected, and it reduces the check to one assertion: the link equals the stored value, and its country code equals the market's.
Header · behaviour
| Behaviour | Rule |
|---|---|
| Navigation swap | Below 880px the panel carries every link and the inline navigation is hidden. From 880px the inline navigation shows and the panel drops the links that are now inline, keeping any the bar does not carry. The panel never repeats what the bar shows, and never becomes the only place an item is missing from - collapsing the whole group instead, which is what it used to do, strands a not-inline item with no route to it at any wide width. |
| Pointer targets | Every control in the bar answers to at least 44px in both directions. Where a control is drawn smaller - the contact icon is 24px - the target is an overlay centred on it, not padding: padding would widen the bar, and at the narrow width the bar has 8px spare, so buying the target in layout would push the header to two rows. Each overlay stays inside the 12px separating the controls, so no two targets overlap. |
| Contact number | Suppressed in the bar below 560px, shown from 560px, and always the digits. Always shown in the panel and the footer. |
| Actions at narrow widths | Both calls to action stay reachable without opening the menu. The primary keeps its label; the secondary becomes its glyph. Hiding both - which is what happens if each is required to carry words at every width - puts the two things a visitor most often arrives to do behind a menu they have to discover first. |
| Disclosure open | Enter, Space or click on the trigger. aria-expanded becomes true and the panel shows. |
| Disclosure close | The trigger again, Escape, a click outside, or opening another disclosure. Only one is open at a time. |
| Focus on close | Escape returns focus to the trigger. Closing by clicking away does not move focus. |
| Chevron | Rotates 180 degrees on the brand ease while open. Stilled under reduced motion. |
| Panel position | From 880px the disclosure panel floats over the page. Below it, the panel is in flow and pushes the stacked links down. |
Header · accessibility
| Requirement | Rule |
|---|---|
| Landmark | The root is <header>, giving the banner landmark. The navigation is a <nav> with an accessible name. |
| Brand mark name | The accessible name sits on the anchor (aria-label="Harmoney home") and both marks are aria-hidden. Both are present in the markup at every width and the breakpoint hides one, so naming the marks instead would announce the brand twice at one width and describe a hidden element at the other. |
| Contact name | The icon is aria-hidden, so the accessible name comes from the number text. The control must never be an icon with no text and no label. |
| Disclosure pattern | A button with aria-expanded and aria-controls, controlling a list of links. Not role="menu" or role="menuitem" - that is the application-menu pattern and this is site navigation. |
| State truthfulness | aria-expanded reflects the actual state at all times. A value that never changes is worse than no value: it tells assistive technology something false. |
| Trigger element | A disclosure trigger with no destination is a <button>. Never an anchor with an inert or scripted href. |
| Focus order | Brand mark, navigation links in order, disclosure trigger, its links when open, contact control, primary action, secondary action, menu button. |
| Focus visibility | Every interactive part shows a visible focus indicator. Focus is never removed without replacement. |
| One link per destination | Two adjacent links to the same destination are a duplicate tab stop and are announced twice. |
Header · implementation
| Target | What it needs |
|---|---|
| Content management system | The header contact is already a structured link field, so it needs repopulating rather than rebuilding. The template prefixes the telephone scheme only when the field's type is the phone type; an empty phone-typed field would still render the scheme. A header rendering no scheme at all therefore indicates the field's type has changed, not merely its value - which points the fix at the field rather than the template. The navigation module must emit a button trigger, not an inert anchor. |
| Worker | Reads the market content set and emits the tree above. The stored dialled value is used as-is. Add the stored fields to the market content files under the entity contact block; that is a signed-content change and belongs in its own release. |
| Both | The check is mechanical once the value is stored: the link equals the stored value and its country code equals the market's. It cannot be checked at all while the number lives only as display text. |
| Brand marks | Emit the two marks as a sprite once per page - a hidden <svg> holding a <symbol> per mark - then reference them with <use>. The header carries both and lets the breakpoint choose; the footer carries the primary mark only. Both marks appearing in the markup is a build assertion in the worker, not a convention, because a breakpoint-swapped mark is easy to drop by accident and impossible to notice at the width you are testing. |
Hero grid · eyebrow · lead · CTA pill (hover it)
Personal loans
Loans to start just about anything.
We are here to help you start now with personal loans, directly, discreetly, diligently.
3, 5 or 7
year loan terms
100%
online
Offer tiles · with the canonical tile icons
Loan terms3, 5 or 7 years
Repayment frequencyWeekly, fortnightly, monthly
Early repayment feeNone
Rate typeFixed
Product cards (hover the border)
Form fields · term and band pills · frequency results
Loan term
Weeklyhero result
Fortnightlyoption
Monthlyoption
FAQ · disclosure list (added 15 July 2026) · first item shown open
Most applications are completed online in minutes, and most loans are funded within 24 hours.
Sample closed item - the answer reveals on the brand ease.
Question rows hover Choral Red; links inside answers are Blue 100; the chevron rotates on the implemented ease. FAQ copy itself is governed in the product data tier - the specimen questions above are illustrative sample copy only.
Reviews carousel · list-scroll application (added 15 July 2026)
Sample review card - testimonial copy renders from the reviews data.Sample, AU
Sample review card - the track advances one card at a time.Sample, NZ
Sample review card - auto-advance stops on any interaction.Sample, AU
The static review grid remains the default treatment; the carousel serves space-constrained surfaces. It advances one card per step on the implemented ease, dwells five seconds between automatic advances, and never auto-advances for visitors who prefer reduced motion.
Footer
The footer is a regulated disclosure surface, and that changes what this guide is allowed to say about it. What follows specifies structure, hierarchy, spacing and type. It does not specify wording, and no disclosure wording appears anywhere in this section.
Wording rule: the statutory strings are compiled from the signed content set and have exactly one home. Typing one into this guide would create a second, uncontrolled copy of regulated text, and the two copies would eventually disagree. Every piece of disclosure text in the specimen below is therefore obviously synthetic placeholder, and it is marked as such so that nobody can lift it into production believing it approved. The structure is real; the words are not.
Footer · Australian variant · five link columns · contact · trust-mark slot · statutory block · colophon
Five columns, not four - the Legal column is easy to miss when counting from a screenshot. At the compact width the columns stack; at 640px they run two across; from 880px, five. The columns do not collapse behind a control, so nothing in this footer claims a state it does not have.
Prominence rule: where a disclosure block contains a sentence the regulator requires to be prominent, that sentence is its own element with its own class - never an unstyled run of text inside a longer paragraph. Prominence that exists only in the wording is not prominence. Which sentences this applies to, and the wording itself, come from the signed content set.
Footer · structural contract
| Part | Element and class | Required | Notes |
|---|---|---|---|
| Root | <footer class="hmy-site-footer"> | Yes | Content-info landmark. One per page. |
| Brand mark | a.hmy-logo.hmy-logo--footer | Yes | The primary mark at 28px, at every width - the footer does not swap variants. No --primary modifier, because there is nothing to switch it against. |
| Column grid | .hmy-site-footer__cols | Yes | One column, then two from 640px, then five from 880px. |
| Column | nav.hmy-footer-col | Yes, five | Each is a navigation region named by its own heading. |
| Column heading | .hmy-footer-col__heading | Yes | A heading element, never a link. Rendered here as a level-four heading so the specimen does not inject headings into this guide's outline; in production it is the level the page outline calls for. |
| Column list | ul.hmy-footer-col__list | Yes | List of links. No inert entries. |
| Contact block | .hmy-footer-contact | Yes | Heading, email, contact control. Same control as the header. |
| Signposts | .hmy-footer-signposts | Market | External guidance links. Present in New Zealand, absent in Australia. |
| Trust-mark slot | .hmy-trust-marks | Yes | Always present in the tree. Collapses to nothing when empty. |
| Trust mark | figure.hmy-trust-mark | Zero or more | Repeats. A figure, not a bare image: a certification that cannot state who certified what, and over which period, is not presentable. The image and its attribution are one unit. |
| Trust-mark artwork | .hmy-trust-mark img | Yes | Needs a real alternative text, and carries the same measured optical factor the award marks use - see the award-mark section below. A flat height would size the box rather than the badge. |
| Trust-mark attribution | .hmy-trust-mark figcaption | Yes | Names the certifying body and the period. Distinct in purpose from an award sub-line, which is a marketing line; this one is attribution. |
| Statutory block | .hmy-disclaimers | Yes | One container, in document order, in one column. Never split across columns. |
| Disclosure | p.hmy-disclaimer | Yes | Unnumbered block. |
| Numbered disclosures | ol.hmy-footnotes > li.hmy-footnote | Market | A real ordered list with real identifiers, so in-page markers can anchor to them. |
| Colophon | .hmy-footer-colophon | Yes | Last node in the footer. Always. |
| Link source | footer catalogue | Yes | Every column, heading and link comes from the footer catalogue. Renderers consume it; they do not invent links. Each entry additionally declares where it resolves - a page this system renders, an approved external host, or a page proxied from the existing estate - and an automated check fails the build on anything that resolves nowhere. That check exists because an unmatched path is not a visible failure here: it is proxied to the existing site, which answers its own not-found page with a success status, so a broken footer link looks exactly like a working one. |
Three structural rules that the live estate breaks, stated positively. Column headings are headings, not links with an inert destination. Numbered disclosures are an ordered list, not numbers typed into prose - typed numbering is how a sequence ends up running one to four with two further substantive blocks sitting outside it. Vertical rhythm is spacing, not empty paragraphs.
Footer · market variant
One component, two variants. They differ because the obligations differ, not because the design does. Flattening them into one component with swapped strings is the obvious move and it is the wrong one.
| Part | Australia | New Zealand |
|---|---|---|
| Link columns | Five | Five |
| Statutory block set | Australian set | New Zealand set |
| Numbered disclosures | Present | Present, and a different set. Corrected 2026-07-30: this row previously said absent. The signed content set carries numbered disclosures for both markets - seven for Australia, four for New Zealand - and the existing New Zealand estate renders them too. What is genuinely Australia-only is the next row. |
| Rate-comparison disclosures | Present | Absent - and the absence is deliberate. The New Zealand regime imposes no equivalent mandate. Do not add them for symmetry. |
| Authorisation statement | Names the Australian regulator and licences | Names the New Zealand register |
| External guidance signposts | None | Present, in their own region with their own heading rather than as a sixth column - these are routes out to independent help, not company pages, and a reader scanning the columns should not have to work out which of them leaves the site. Treated as market-specific, not as an inconsistency to flatten. Australia renders no block at all rather than an empty one. |
| Link columns, contents | Identical. Not an aspiration - the catalogue holds one shared, root-relative entry per link and needs no market exception in any column. That is possible because this system defines its own routes; the existing estate's divergence, where the same page is reached at a different address in each market and one market is not even consistent with itself, is inherited inconsistency rather than jurisdiction. The obligations differ; the information architecture does not. | |
| Investor destination | One listed parent, one investor hub, so both markets point at the same Australian host. This is deliberate and recorded in the register. It reads as a defect to anyone checking, which is why it is written down here. | |
| Contact values | Australian stored values | New Zealand stored values |
| Trust-mark slot | Same slot, same rules | Same slot, same rules |
Footer · trust-mark slot rules
| Rule | Value |
|---|---|
| Placement | After the contact block, before the statutory block. |
| Capacity | Zero, one or several. The footer must render correctly at each. |
| Empty state | Collapses entirely, spacing included. A footer that only looks right with a mark present has a dependency on an entitlement. |
| Maximum height | 48px, and it is a nominal - the height the badge reads at, not the height of its box. Each mark's measured optical factor is applied to it, exactly as for the award marks below, because equal box height is not equal badge size. Width is whatever the mark's own proportions give. |
| Clear space | One 24px step on every side, and between marks. |
| Alternative text | Describes what the mark certifies. Never the file name. |
| Dimensions | Both width and height declared, matching the mark's own proportions, so the footer does not shift as it loads. |
| Served size | Sized for the slot. A footer mark does not need a source measured in thousands of pixels, and must not declare that it occupies the full viewport width. |
| Attribution | Whether a mark must name its certifying body, and whether it may link out, is an open item - see section 14. |
| Entitlement | No mark enters this slot until entitlement is confirmed and recorded in the marks register. |
Open: the slot is specified and the footer is built around it. The security-compliance mark shown on the live estate is now carried in the register as displayed, on instruction, and it renders - but it is not cleared. Three pieces of evidence are outstanding: the mark is unverified, it cites no source, and no examination period is recorded. The third is the one that matters to a reader: an award is a fact about a past moment that stays true, whereas a certification is an opinion with an expiry, and one displayed without dates reads as current assurance. The badge artwork carries no date at all, which is why the alternative text states the attested start and says in terms that the end is not recorded. The gap is registered with a named owner and a due date rather than left silent. Section 14 carries the entitlement question and who closes it.
Footer · behaviour, accessibility and implementation
| Area | Rule |
|---|---|
| Reflow | One column, two from 640px, five from 880px. Reading order follows document order at every width: nothing is visually reordered past anything else. |
| Collapse | The columns do not collapse. If collapse is ever adopted, the heading gains a nested button carrying the state - and the state must then actually change. |
| Landmarks | The root is <footer>. Each column is a <nav> named by its own heading. |
| Heading semantics | Column headings are heading elements at the level the page outline calls for. A heading is not a link, and a link with an inert destination is not a heading. |
| Disclosure anchoring | Numbered disclosures carry identifiers so in-page markers elsewhere on the page can link to them. |
| Contrast | Statutory text is Harmoney Black on white and never drops below the canon minimum. It is the smallest type on the page and the most consequential. |
| Content management system | The footer is currently one unstructured rich-text field, which is why the displayed value and the destination can disagree and why legacy markup survives inside it. It needs structure introduced: separate fields for the contact values, a repeatable field for the trust marks, and a repeatable field for the disclosure blocks. This is the difference from the header, which already has structure and merely needs it repopulated. |
| Worker | Reads the market content set and emits the tree above, selecting the market's statutory block set by reference. The disclosure wording is never inlined in the template. |
Footer rule: the footer is Choral Red or White - never grey. Text on a red footer is always white. Because the footer carries statutory text at small sizes, the white footer with Harmoney Black text is the deployed treatment; a Choral Red band remains permitted for non-statutory content.
Award marks
A row of third-party award badges, presented on a homepage. This is a different component from the footer trust-mark slot above, in a different place, under a different register entry, and the two must not be merged. An award is a competitive result from a named body in a named year; a certification is a standing statement about the business. Flattening them into one "trust bar" loses the distinction that makes either of them checkable.
Every rule below is data before it is design. Which marks appear, in what order, with what words beside them and what words behind them, is decided in the awards register and rendered from it. Nothing on this page is a place to make an editorial choice about an award.
Artwork rule: a third-party mark is never redrawn, recoloured, reproportioned or lettered. The supplied file is normalised - identifiers scoped, fixed dimensions dropped, accessible metadata added - and the drawing itself is untouched. This is what makes the sizing rule below necessary rather than optional: if the artwork cannot be adjusted to sit consistently, the presentation has to do it instead.
Award marks · homepage · both markets · rendered by the production classes at the production container width
AU
Awards & recognition
NZ
Awards & recognition
The New Zealand sub-line is an asserted claimIt is shown here because the rule has to be legible against the case that produced it, not against an invented one. The register does not substantiate those words and records that it does not; they were supplied by the business, they carry a named approver and a dated instruction, and they are recorded as a live uncleared display with an owner and a date. See the sub-line rules below.
The marks are real, and read from the register at build time rather than copied here, so a stale badge cannot make this specimen demonstrate the defect it exists to correct. They are shown at the mobile nominal height; at 640px and again at 880px the nominal steps up, and every badge steps with it.
Award marks · structural contract
| Part | Element and class | Required | Notes |
|---|---|---|---|
| Root | <section class="hmy-awards"> | Yes | A section, not a bare div. The block is a labelled region an assistant can cite when asked what the business has won. |
| Heading | .hmy-awards__heading | Yes | Visible, not an aria-label. It matches the wording both live awards pages use. |
| Row | .hmy-award-marks | Yes | Flex, wrapping. Renders nothing when the register supplies nothing - the section is absent, not empty. |
| Mark | figure.hmy-award-mark | One or more | A figure, because the mark and its caption are one unit. Repeats. |
| Artwork | .hmy-award-mark img | Yes | An <img> pointing at the registered vector. Never inline <svg> on a page carrying more than one mark unless identifiers are scoped. |
| Dimensions | width / height | Yes | The artwork's own intrinsic values, so the browser reserves the correct aspect ratio and the row does not jolt as it loads. Not the rendered size. |
| Optical factor | style="--optical:n" | Yes | Per mark, measured, set inline because it is a property of that artwork. Defaults to 1 if absent. |
| Claim | .hmy-award-mark figcaption | Yes | Every mark states its claim in text beside the badge. Not a fallback for artwork that is too small - the marks are sized to be legible - but because a third-party badge should not be the only thing on the page asserting what was won. The register's description is the substantiated form of the claim; the artwork is a decoration that happens to agree with it. |
| Caption line | .hmy-award-mark__line | One or more | Each part of the caption is its own line: the register's description, then any qualifier, then any sub-line. Run together they read as a single sentence, which folds an asserted marketing claim into a substantiated description and gives two different kinds of statement one voice. The break is the join, made visible. |
| Alternative text | alt | Yes | Must state the outcome. Derived from the register, never hand-typed. |
The alt requirement is the one that looks redundant and is not. Every supplied mark has its text converted to outlines, so there is no readable word anywhere in the artwork: a sighted reader infers "WINNER" from the badge and a non-visual reader gets nothing. The marks do carry <title> and <desc>, generated from the register - but a browser does not expose an SVG's internal metadata when the file is loaded through <img src>. The host page's alt is the only thing announced. Both are carried; only one of them is reaching the page.
Award marks · optical normalisation
Marks are normalised on the badge, not on the box. Equal CSS height is not equal optical size. Each awarding body's artwork fills its own viewBox by a different amount, so a row set to one height renders badges at visibly different sizes - and the eye reads that as one badge being wrong, not as a rule being absent.
| Rule | Value |
|---|---|
| Method | Render the mark at a fixed height, take the vertical span of rows whose alpha exceeds the solid threshold, and divide by the render height. That fraction is the proportion of the box the badge proper occupies. The threshold excludes soft shadow falloff, which is the whole reason it is a threshold and not simply any non-transparent pixel. |
| Factor | The reciprocal of that fraction. Applied as height: calc(nominal * var(--optical, 1)), so the badge - not the box - lands on the nominal. |
| Provenance | Measured and stored alongside the measurements behind it. Never hand-typed. A hand-typed factor looks exactly like a measured one and is the failure this rule cannot otherwise detect. |
| Nominal height | 64px, 96px from 640px, 112px from 880px. Nominal, not rendered: the rendered box is the nominal times that mark's factor. |
| Gap | 16px, 24px from 640px, 32px from 880px. |
| Width | Always automatic. The artwork's aspect ratio is preserved without exception - one of the marks in use is not square. |
| Caption measure | 132px, 168px from 640px, applied to the caption and never to the figure. On the figure it caps the badge as well, and a badge wider than its column overflows its own figure. |
| Drop shadows | Left exactly as supplied. Stripping one would alter a third party's artwork, which is forbidden. Normalising on the badge means the shadow extends into the gap instead of being counted as part of the mark. Whether a supplied shadow may ever be removed is a question for the awarding body, not an internal decision - see section 14. |
| Legibility | A mark is never rendered below the size at which its own artwork can be read. That size is measured per mark and recorded in the register, because it is a property of the artwork and not of the design: what decides it is where an awarding body put the load-bearing words. One body puts the outcome and the year in the large centre, where they survive; another puts only its brand there and sets the award name, the category and the year as curved text around the rim, where they do not. At the narrow width the second kind was rendering as a recognisable brand above an illegible smudge - which is worse than showing nothing, because it carries the authority of a badge without any of its content. |
| Why not a readability factor | A per-mark size multiplier was considered for this and rejected. It would scale dense marks up, undoing precisely the consistency the optical factor exists to create, and the two would then have to be adjudicated against each other on every mark. The measured evidence also does not support it: stroke thinness ranks marks reliably but converts to an absolute minimum size badly, and the property that actually governs legibility is compositional rather than continuous. |
| Row capacity | Bounded by width, not by preference, and the layout yields before the mark does. Optical scaling widens the boxes, so at the narrow width a row of captioned marks cannot hold three - it needs 428px of the 327px available. The row therefore becomes a stack below the compact breakpoint, each badge paired with its own claim, and the nominal height is then set by the widest single mark rather than by their sum. That is what allows the mark to be legible at all; holding the row would have meant holding the marks small. |
| Nominal height | Computed per market from what that market's layout can hold, not chosen. A single hand-picked number is a number chosen for the most constrained market and then inflicted on the others - which is how one market's marks came to be sized by another market's mark count. |
This rule is invisible in review - a number in a data file and a calc() in a stylesheet, either of which reads as clutter to anyone who does not know why it is there. It is therefore held by an automated check rather than by this page: the check recomputes the geometry from the stylesheet and the register and fails on a factor that is not the measured reciprocal, on a nominal height that has lost its calc(), on a badge whose factor never reaches the markup, and on a row that no longer fits the narrow width.
Award marks · alignment
Flush left, per the setting rules in section 5. That rule needs one addition here, because on its own it is not sufficient to produce a flush-left row.
| Rule | Value |
|---|---|
| Reference edge | The first badge's own left edge sits on the text column - not the edge of the column that contains it. A figure centred within its own caption column satisfies every alignment check that inspects text, while the badge sits inset from the heading above it by half the difference between the badge and the column. That is a visible break in the flush-left edge, and it is what a rule saying only "flush left" permits. |
| Heading | Shares that same edge. |
| Sub-line | Shares that same edge, under its badge. Not centred in its column. The constrained-space exception in section 5 was considered for the caption column and rejected: an exception that produces a ragged left edge across a row defeats the rule it is an exception to. |
| Distribution | Marks pack from the left at a fixed gap. The row is not justified across the available width - with two marks that puts a phone's width between them, which reads as breakage rather than as balance. |
| Alignment within the row | Tops align. Badges of equal optical height align on any edge; badges of unequal aspect ratio do not, and the top is the edge the heading establishes. |
Award marks · sub-line rules
A sub-line is the optional line beneath a mark. It is the only string in this component the register does not necessarily author, which is exactly why it needs a rule: it is the place a claim can enter the page without passing anything.
| Rule | Value |
|---|---|
| Provenance | Every sub-line is either derived or asserted, and which one is recorded, not inferred. Derived means generated from register evidence and re-checked against it, so it cannot drift. Asserted means supplied by the business and passed through untouched. |
| Derived | Rebuilt from the register and compared on every validation run. A sub-line that no longer regenerates is a failure, not a warning. |
| Asserted | Permitted. It must name the role that approved it and cite a dated instruction record that exists. An asserted claim with no recorded instruction has no provenance at all - only an author nobody can name. |
| Unsubstantiated | An asserted sub-line the register's evidence does not support is additionally recorded as a live uncleared display, with an owner and a due date. It is not hidden and it is not forbidden. |
| Wording | Rendered verbatim. Presentation does not paraphrase, expand or tidy a claim string: at this length "won", "ranked", "recognised", "named" and "awarded" are five different assertions about the same fact, and only some of them are true. |
| Relationship to the qualifier | Different fields, different jobs. A qualifier corrects what the artwork overstates and is mandatory whenever the outcome is not a win. A sub-line adds words nobody is obliged to add. Where both are present the qualifier is rendered first, because a correction that follows an embellishment has already been read too late. |
| Accessible name | A sub-line never substitutes for the alternative text. The outcome reaches the accessibility tree through alt whether or not a sub-line exists. |
The rule permits the unsubstantiated case deliberately. A rule that forbade it would have been breached on the day it was written and then ignored, and an ignored rule pushes the claim somewhere no check looks - which is what had already happened. Permitting it, and requiring it to carry its provenance, is what keeps it visible.
Award marks · market variant
| Part | Australia | New Zealand |
|---|---|---|
| Marks featured | Three | Two |
| Ordering | By the register's explicit rank, ascending. Explicit rather than array order, because array order is not stable across a re-sign. Policy: outcome strength, then recency - a non-winner never takes first place. | |
| Sub-lines | None | One, asserted. Not a design difference. The marks each market has won differ, and so does what the business has chosen to say beside them. |
| Aspect ratios | Square | Not square. The Canstar lockup is taller than it is wide, which is why width is never declared in the stylesheet. |
| Heading | Identical. The component is one component. | |
Open: the register that governs this component is still in draft with no approver recorded, so nothing on this page is approved for display by anyone but the business. Four questions are unresolved and carry named owners in section 14: who approves an asserted sub-line; whether a supplied drop shadow may ever be removed; whether marks belong on product pages as well as homepages; and what the maximum mark count is once a fourth is proposed.
