Internal Reference · Not linked from the public site

Brand & UI System

Everything needed to extend the site consistently — logo usage, palette, type scale and the component library. This page is set to noindex. Swatches read the live Theme Options tokens, so they follow any change made in the admin.

1. Logo

The wordmark is the dominant component. The mark shows dispersed digital intent converging into a single qualified customer — deliberately avoiding dollar signs, handshakes, lightbulbs and bar charts.

PRIMARY — light backgrounds

Media Library — LeadProviders.jpg

REVERSE — dark backgrounds

Media Library — logo-reverse.svg

MARK / FAVICON / SOCIAL ICON

64px · 32px · 16px — Media Library, favicon.svg

CLEAR SPACE & MIN SIZE

Clear space on all sides = the height of the mark's outer radius (approx. 18px at 64px mark size).

Minimum widths: full lockup 160px · mark 16px.

DON'T

— Don't recolour the mark outside the palette.
— Don't stretch, rotate or add effects.
— Don't place the primary logo on a dark background; use the reverse.
— Don't separate ".com.au" from the wordmark.

2. Colour palette

Deep navy carries authority, electric blue drives action, and a single restrained amber accent keeps the palette from reading as another fintech clone. Amber is used sparingly — eyebrow rules, step numbers, one node in the logo, and placeholder markers.

Core

Navy 900 — Ink

#05122A

Navy 800 — Brand

#0B2545

Navy 700

#13355F

Navy 600

#17406E

Electric blue — action

Blue 600 — Primary

#1F6FEB

Blue 500 — Hover

#3D82F5

Blue 400 — On dark

#5B9BFF

Blue 050 — Tint

#EDF3FE

Accent & neutrals

Amber 500 — Accent

#FF8A3D

Amber 050

#FFF3EA

Slate 700 — Body

#3E4C5E

Slate 500 — Lede

#5C6B7F

Slate 400 — Muted

#7A879A

Grey 200 — Border

#E4E9F0

Grey 100 — Wash

#F4F6F9

White

#FFFFFF

Contrast

Slate 700 on white and white on Navy 800 both clear WCAG AA for body text. Blue 600 on white clears AA for large text and UI; when used for small body links keep it at 17px or above, which the base type scale does.

3. Typography system

Plus Jakarta Sans for headings gives the geometric confidence of a technology brand without the startup-y feel of a display face. Inter carries body copy. JetBrains Mono is used only for eyebrows, labels and specs — it signals "technical" without shouting. Sizes come from the Theme Options text tiers; families from the Font Library.

HEADINGS — Plus Jakarta Sans, 800 weight

Display / H1

.hex-h1 · fluid mobile → desktop from Theme Options · line-height 1.12 · weight 800

Section heading / H2

.hex-h2

Card heading / H3

.hex-h3

Sub-heading / H4

.hex-h4

BODY — Inter

Lede paragraph — .hex-lead, Slate 500.

Body paragraph — the body tier from Theme Options, Slate 700. Measure capped at 62ch using .measure.

LABELS — JetBrains Mono

Eyebrow label

01 — UNDERSTAND

.hex-meta · uppercase · 600 weight

4. UI components

Buttons

Primary Dark Ghost Primary small Text link with arrow

Pill radius · lift −2px on hover · full width under 640px

White (on dark) Ghost light (on dark)

Cards, tiles & steps

Standard card

Icon tile, heading, description and an optional footer link.

Learn more

02 — BUILD

Process step

Rule above, mono numeral in amber, heading and short description.

[X]%

Stat tile — always placeholder until verified

Feature row & pull quote

Feature row

Tick tile, heading and one line of supporting copy.

We scale what works.

Placeholder tokens

Every unverified figure, logo, quote or detail uses a visible amber placeholder so nothing false ships by accident. Write any [BRACKETED] value in a content file and it renders like this: [X]% [EMAIL] [ABN]

[CASE STUDY]

[CLIENT TESTIMONIAL]

[CLIENT LOGO]

Run the hexnity-placeholder-scan tool (or search /content for "[") to list every item needing real content.

Form fields

Text input *

Select Hint text sits beneath the field.

5. Layout & responsive

Token	Value	Notes
Container	1200px max, 24px gutter	Designed against a 1440px desktop reference. Tokens: `--hex-container-width`, `--hex-container-gutter`.
Section rhythm	clamp(64px → 116px)	Alternating white / grey wash / navy. Tokens: Section padding md/xl (standard), sm/lg (tight).
Radius	10 / 16 / 24 / 32px	Cards use 24px, CTA band 32px, buttons pill.
Breakpoint 1080	4-col → 2-col	Logo wall 5 → 3.
Breakpoint 900	Mobile nav, single-column splits	Hamburger menu, hero stacks with visual below.
Breakpoint 640	375 / 390 mobile reference	16px base, 20px gutter, full-width buttons, single-column grids.
Motion	Reveal on scroll, 0.6s	IntersectionObserver; fully disabled under `prefers-reduced-motion`.