Off the plan
From $695,000
Park Lane Residences
Carlton, VIC 3053
2
2
1
78m²
Buttons
Four styles, two variants, three sizes. Pill radius, 8px icon gap, 120ms tonal transitions; hover and pressed shift tone, never scale.
Filled brand
Hover
Pressed
Outlined neutral
Transparent brand
Text neutral
Disabled
Large
Medium
Small
With icon
Assistive text
Markup
<button class="btn filled brand">Send enquiry</button>
<button class="btn outlined neutral">Save search</button>
<button class="btn transparent brand">View all</button>
<button class="btn text neutral">Cancel</button>
<button class="btn filled brand lg"><i class="ph ph-paper-plane-tilt"></i> Send enquiry</button>
<button class="btn filled brand" disabled>Send enquiry</button>Icon buttons
The button matrix, squared off to a single icon. Same styles, same states.
Filled
Outlined
Text
Small
Large
Inputs
Text, message and phone fields. 4px radius, 44px tall. Focus and error both go to a 2px border; focus brand, error negative.
Default
Hover
Focus
Error
That doesn't look like a complete email.
Disabled
Message
Phone
+61
We'll only use this to arrange a viewing.Markup
<div class="field">
<label>Email</label>
<input class="input" placeholder="name@email.com">
</div>
<!-- error state -->
<div class="field">
<label>Email</label>
<input class="input is-error" value="maya@">
<span class="err"><i class="ph ph-warning-circle"></i> That doesn't look like a complete email.</span>
</div>
<!-- phone with +61 prefix -->
<div class="phone"><span class="prefix">+61</span><input class="input" placeholder="400 000 000"></div>Selection controls
Checkboxes square at 4px, radios round. Selected fills brand; hover lifts the border to brand.
Checkbox
Hover
Selected
Disabled
Radio
Selected
Disabled
Chips & filters
Pill-shaped filters for results. Active inverts to near-black; the rest stay quiet until hovered.
Default
Hover
Active
Add
Sort
Badges
Status and metadata. Subtle surface plus a strong content token from the same hue, readable in light and dark.
NeutralOff the plan
BrandNew this week
Positive Selling now
WarningSelling fast
NegativeSold out
InformativeCompletion Q4 2026
Markup
<span class="badge positive"><i class="ph-fill ph-circle"></i> Selling now</span>
<span class="badge brand">New this week</span>
<span class="badge informative">Completion Q4 2026</span>Breadcrumbs
The trail back up. Current page is the only one weighted; the rest are quiet links.
Listing card
The core unit of the portal. 12px radius, lg shadow on hover, photography behind a badge and a shortlist heart. Try the heart.
The cover gradient is a procedural placeholder; swap it for warm, naturally-lit photography behind a 60% black overlay.
Overlays
Modals sit at 16px radius on a 2xl shadow over a blurred dark scrim. Toasts slide up from the bottom and retire themselves.