Realloans style guide
Internal, noindex. The living visual contract for the up- design system.
Design system
Colour and type
Brand blue kept. The four Aug-13 roles map to existing GP Global Colors: primary #0d64d6 (–accent-3), hover #094a9e (–accent-2), navy #07377a (–accent), footer #06132e (–contrast-2). Headings Inter 800 navy, body Inter, sentence case. Buttons are pill, white on blue, 5.5:1 AA.
Tokens – Customizer Global Colors
Tokens
Every record is built only from these. Change one in the Customizer and the whole site follows.
--accent-3#0D64D6
Primary, CTA, links, icons
--accent-2#094A9E
Hover
--accent#07377A
Navy headings, dark bands
--contrast-2#06132E
Footer, deep navy
--base#E6EFFA
Tint band
--base-2#F2F7FA
Hairline, alt band
--base-3#FFFFFF
Surface, cards
Home hero – up-cover
Compare finance options with Realloans
A full-bleed cover hero: image, dark veil, white text. Primary plus an on-dark outline.
Sticky section nav – up-subnav
Section nav
On long pillar pages this bar sticks to the top as you scroll. Tabs jump to section anchors and the current one is marked is-active. The tabs scroll in one row on mobile. The Enquire now / Talk to a broker CTAs stay hidden until the bar sticks, so they do not double up with the hero buttons, and they are hidden entirely on mobile. Scroll-spy, smooth scroll and the anchor offset live in a site-wide wp_footer element, not in page content.
Loan page recipes – one treatment per section
Loan page section recipes
Every loan type (personal, home, business, commercial) is built from these sections in this order, with the same treatment each time. Only the copy changes per loan type. The how-to-apply steps and the mid-page CTA keep one design across all of them.
CTA targets are standard across loan pages: Enquire now goes to /enquiry/ (the tracked Fluent Form, id 7, that fires the generate_lead conversion), Talk to a broker is the phone link, and /contact/ stays the general contact page. Every live internal and external link is preserved with its anchor text, and the link-integrity gate blocks any push that drops one.
| Section | Treatment | Rule |
|---|---|---|
| Hero | up-hero (two-column) | H1 + one standfirst line + Enquire now / Talk to a broker |
| Section nav | up-subnav | Sticky; tabs scroll one row on mobile; CTAs reveal once stuck, hidden on mobile |
| Types of loan | up-who–4 cards | H3 + description + a Best-for line, no icon |
| Interest rates | up-rates in up-tscroll | Indicative-rate table, scrolls on small screens |
| Who can apply / what affects rate | up-ticks | Check-bullet list |
| Documents | up-docs | Two-column points |
| What you can use it for | up-who icon cards | One line icon per card |
| How to apply | up-process | Left-rail numbered steps; one shared design across every loan type, copy differs |
| Why choose Realloans | up-who–4 | Always four cards, one desktop row, 2×2 tablet, stacked phone; merge extras to four |
| Mid-page CTA | up-ctasplit | Image + navy panel, the same on every page |
| FAQ | up-faqwrap + FAQPage JSON-LD | Accordion; keep the schema block |
Icon library – single-weight line icons
Icon library
Line icons on a soft tile, coloured by the record, one per card across the site.
Cards – up-who (4 across)
Why choose Realloans
-
Specialist brokers
MFAA/FBAA accredited advisers who arrange, not lend.
-
45+ lenders compared
A wider panel means a better chance of approval and rate.
-
Free, lender-paid
Brokers are paid by the lender, not by you.
-
Clear, quick support
We coordinate the application and keep you posted to settlement.
Steps – up-steps
How it works
- 1
Talk to a broker
A quick call about your goals.
- 2
We compare
45+ lenders, right fit.
- 3
Apply
We package and submit.
- 4
Settle
Approval and settlement.
Checklist – up-ticks
What you can use it for
- First home purchase
- Refinance to a lower rate
- Investment property
- Debt consolidation
Two-column list – up-docs
Documents you may need
- Photo ID
- Two recent payslips
- Bank statements (3 months)
- Latest tax return
- Notice of assessment
- Existing loan statements
Chips – up-uses
Loan types
- Home loans
- Truck finance
- Business loans
- Commercial
- Low doc
- Refinance
Reviews – up-reviews (server-rendered)
What clients say
★★★★★
Got us approved when the bank said no.
Priya S.
★★★★★
Refinanced and saved on repayments.
Daniel R.
★★★★★
Sorted our truck finance fast.
Mark T.
Stats – up-stats
The numbers
- 45+ lenders on panel
- 4.6 Google rating
- 30+ years experience
- 100% free service
Accreditation – up-badges
Accredited
- MFAA member
- FBAA member
- AFCA member
- Credit Rep 544708
Feature strip – up-featurestrip
- No obligation
- No credit impact to enquire
- Call back within 2 hours
Broker vs bank – up-cmp
Broker vs bank
A broker (Realloans)
- 45+ lenders
- Works for you
- Free service
One bank
- Its own products only
- Works for the bank
- You do the legwork
Rate table – up-rates
Indicative rates
| Product | Rate p.a. | Comparison rate |
|---|---|---|
| Variable home loan | 6.14% | 6.21% |
| Fixed 2yr | 6.29% | 6.44% |
Indicative only. Rates change; comparison rate is a legal requirement, not the rate you get.
FAQ – up-faqwrap
Questions
Is the service really free?
Yes. Brokers are paid a commission by the lender, not by you.
Will enquiring affect my credit?
No. A first chat does not touch your credit file.
Compliance callout – up-callout
General advice only
Indicative only on every rate, fee, LVR and turnaround. This page is general information, not personal credit advice.
Talk to a Realloans broker
Get my free quoteProduct grid, image + tertiary link – up-who
Loans we offer
-
Home loans
Buy, build or refinance with 45+ lenders compared.
Learn more -
Car loans
New, used, low doc and bad-credit options.
Learn more -
Business loans
Cashflow, equipment and growth finance.
Learn more
Service grid, icon + tertiary link – up-who
What we finance
-
Home loans
First home, refinance, investment, low doc.
Learn more -
Car loans
New, used, novated, bad credit.
Learn more -
Business loans
Working capital and growth.
Learn more -
Commercial property
Buy or refinance premises.
Learn more -
Truck finance
Prime movers to light rigid.
Learn more -
Private lending
Short-term and specialist.
Learn more
Numbered process – up-process
Loan process
How to apply
Applying through a broker is simple and does not touch your credit until you formally proceed.
- 1
Fact find and soft credit check
We learn your situation and run a soft check with no footprint. Within hours you know your borrowing power and likely rate range.
- 2
Lender matching and application
We compare 45+ lenders on rate, fees and turnaround, then prepare and lodge your application in each lender’s format.
- 3
Approval and settlement
You review and e-sign. Funds usually reach your nominated account within 24 to 48 hours of settlement.
Broker profile – up-author
Meet your broker
Sukhjeet Singh
Finance Broker
15+ years arranging home, business and asset finance across Australia.
MFAA member. TOTA Pty Ltd, Credit Representative 544708 under ACL 384704.
Q and A content section (dominant pattern)
Who can apply for a personal loan?
The site’s most common section is a question heading followed by a short list. Page copy pours straight in.
- 18+ and an Australian citizen or permanent resident
- Regular income you can evidence
- A transaction account in your name
- No undischarged bankruptcy
Lender strip – up-logos
Some of the lenders we compare
Blog cards – up-articles
From the blog
-
12 Sep 2026
5 situations where a mortgage broker helps
When a bank stalls, a broker moves it. Five real cases.
Read more -
-
Section catalog – the real Realloans contract
Section catalog
Every section the live site actually uses, from the page walk, mapped to an up- record. Status: rendered Above, proven in Records, built at Pilot, or Held for the cull pass.
| Site section | up- record(s) | Status |
|---|---|---|
| Image hero + trust bar | up-hero | Records |
| Page hero + breadcrumb | up-phero | Records |
| Feature strip | up-featurestrip | Above |
| Section header (kicker + H2) | up-kicker + up-section__headline | Above |
| Why-choose card grid | up-who | Above |
| Product / loan grid (img + CTA) | up-who | Above |
| Broker / author profile | up-author | Above |
| Numbered process (How to apply) | up-process | Above |
| Steps 4-up | up-steps | Above |
| Feature / requirement list | up-docs | Above |
| Q and A + list | up-section__headline + up-ticks | Above |
| Types / uses chips | up-uses | Above |
| Feature / rate table | up-tscroll + up-rates | Above |
| Broker vs bank | up-cmp | Above |
| Reviews | up-reviews | Above |
| Stats band | up-stats | Above |
| Accreditation badges | up-badges | Above |
| Lender / logo strip | up-logos | Above |
| Prose explainer | up-section__text | Above |
| FAQ accordion | up-faqwrap | Above |
| Compliance callout | up-callout | Above |
| CTA band | up-redband | Above |
| Related loans / area links | up-rel | Above |
| Blog / article cards | up-articles | Above |
| Contact form + trust sidebar | up- + Fluent Forms | Pilot |
| Calculator | Samrat embed | Pilot |
| Legal / terms | up-legal | Records |
| Truck doorway leaf | consolidate, do not re-skin | Held |
Blog article template
Blog articles
Design specification, September 2026. Compact title, category, author and date; existing featured image; desktop contents sidebar and a comfortable reading column. On phone, the contents list collapses above the article.
| Block | Recipe |
|---|---|
| Header and reading layout | Proposed shared up-post-header, up-post-layout and up-post-body; not installed yet. |
| Contents | Proposed up-post-toc; real heading anchors, keyboard access and visible active state. |
| Callouts and tables | Reuse up-callout / up-legal and up-rates / up-tscroll where suitable. |
| Author, CTA and related articles | Reuse up-author, existing button/CTA recipes and up-articles. Verify author details; approve new copy separately. |
| Comments | Constrain to reading width; preserve functionality. |
| Verification | Preserve copy and links; one H1; test 1280, 768 and 390px; save before/after screenshots. |
No per-post records or inline CSS. Use Customizer tokens and GenerateBlocks. The local private-lending mockup is the visual reference; it is not a published template.