Hellomello · Design Kit · v1.0 · May 2026

Components, built around the brand.

The UI primitives that bring the Hellomello identity into product surfaces — buttons, forms, cards, alerts, navigation and marketing patterns. Every token here maps to the brand bible.

SYSTEM Hellomello UI VERSION 1.0 LAST UPDATED 2026-05-28

Contents

  1. Tokens
  2. Buttons
  3. Badges & tags
  4. Cards
  5. Forms
  6. Alerts & toasts
  7. Navigation
  8. Data & status
  9. Marketing patterns
01 — Foundations

Tokens

Every component below resolves to these CSS variables. Override at the :root level only.

Color

--green#283718
--cream#FEFAE0
--terra#BC6C25
--terra-light#DDA15E
--lavender#BEB8EB
--sage#B2DCD0
--blue#2A78A0
--ink#283718
--muted#5C6849

Radius

sm · 4px
md · 8px
card · 14px
lg · 18px
xl · 24px
pill · ∞

Shadow

soft
card
pop

Spacing scale

space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
space-832px
space-1248px
space-1664px
02 — Actions

Buttons

Pill-shaped, League Spartan 700. Primary is dark green; secondary is terracotta for emphasis (e.g. "Check eligibility"). Use one primary per view.

Variants

View FAQs → 
<button class="btn btn-primary">Check eligibility</button>
<button class="btn btn-secondary">Book consultation</button>
<button class="btn btn-tertiary">Learn more</button>

Sizes

On dark

View FAQs →
03 — Indicators

Badges & tags

Mono-cased, pill-shaped. Reserve status colours for status; use brand-tinted badges for filters and categories.

Status

Approved Pending review Banned In progress Draft

Brand-tinted

Eligibility Sleep support Women's health AHPRA-registered Same-day dispatch
04 — Surfaces

Cards

Default cards sit on the cream paper; feature cards invert to dark green. Service cards use a coloured square icon from the brand palette.

Content cards

Guide

What to expect from your first consultation

A short walk-through of the eligibility check, the consultation itself, and what happens after.

Read article →
Featured

Telehealth built around you.

Australia-wide care from AHPRA-registered clinicians. 100% online, no GP referral needed.

Check eligibility →
FAQ

Is telehealth right for me?

Answers to the most common questions about the Hellomello model and what's covered.

View FAQs →

Service cards

SS

Sleep Quality Support

Our services may be helpful with issues relating to sleep.

Check eligibility
WB

Stress & Wellbeing Support

Our clinicians may support patients experiencing issues with stress and mental wellbeing.

Check eligibility
WH

Women's Health Support

Our clinicians may support patients experiencing issues relating to women's health.

Check eligibility
05 — Inputs

Forms

Quiet by default. Focus rings use terracotta. Always pair labels with helpful microcopy — never with urgency.

Text inputs

We'll only use this to confirm your booking.
+61
That date doesn't look quite right — mind double-checking?

Choice controls

Stepper

06 — Feedback

Alerts & toasts

Always warm and supportive — even when delivering bad news. Never use the alert pattern for urgency or pressure.

✓
You're all set

Your booking is confirmed for Thursday at 4:30pm. We'll send a reminder the day before.

!
One quick thing

We couldn't verify your Medicare details. No drama — you can skip this and finish later.

×
That didn't go through

Something went sideways on our end. Give it another try, or get in touch and we'll sort it.

i
Heads up

Eligibility is determined by an AHPRA-registered clinician during your consultation. Outcomes are patient-specific.

Toast

✓

Reminder sent. We'll text you 24 hours before your appointment.

08 — Data

Data & status

Stat tiles read in League Spartan 900. Tables stay quiet — no zebra striping; rely on the rule and a soft hover.

Stat tiles

50K+
Patients supported
Across Australia, all delivered 100% online.
4.7 ★
Average Google rating
From verified, non-clinical reviews.
Same day
Dispatch turnaround
Subject to eligibility and ordering cut-off.

Progress

Step 3 of 5 · You're 64% of the way there.

Table

BookingServiceClinicianStatusDate
#HM-10472Sleep Quality SupportDr. Riley K.ConfirmedThu 30 May, 4:30pm
#HM-10468Stress & Wellbeing SupportNP Sam L.PendingFri 31 May, 10:00am
#HM-10455Pain Management SupportDr. Hana M.In reviewSat 1 Jun, 2:15pm
#HM-10441Women's Health SupportDr. Mei C.CompletedMon 27 May, 9:00am
09 — Patterns

Marketing patterns

Compositions used across the marketing site — built only from the primitives above.

Hero

Telehealth built around you.

Feel-good healthcare from AHPRA-registered clinicians. 100% online, no GP referral needed, available anywhere in Australia.

Check your eligibility How it works
h

Trust bar

✓
AHPRA-registered clinicians
★
4.7 Google rating
↗
Same-day dispatch
⛨
Licensed and confidential

CTA band

Thinking about it? Take the next step.

The pre-screening questionnaire takes about 2 minutes. If eligible, we'll guide you through the rest.

Check eligibility

Footer

Feel-good healthcare. AHPRA-registered, 100% online, anywhere in Australia.

Services
Company
Help
© 2026 HELLOMELLO PTY LTD · AHPRA-REGISTERED CLINICIANS OUTCOMES ARE PATIENT-SPECIFIC · SUBJECT TO ELIGIBILITY