A clean, minimalist system for Sri Lankan real estate
A near-monochrome palette, refined type and quiet components — built on Next.js and Tailwind CSS, with the property photography doing the talking.
Colors
A warm-neutral grey canvas with near-black ink, one restrained clay accent and semantic states. Color comes from the photography, not the chrome.
Ink
Text · near-blackSand
Neutral surface · warm greyClay
Accent · used sparinglySemantic
Typography
Hanken Grotesk — a refined, screen-optimized grotesque — carries headings and prices. Inter handles body copy and UI.
Display — Hanken Grotesk
Aa
Find your home
Featured properties
in the heart of Sri Lanka
Body & UI — Inter
Aa
Large — Discover houses, villas and land across the island.
Base — Upload photos and publish your listing in minutes, reaching buyers from Colombo to Jaffna.
Small — Land measured in perches · prices in LKR.
Radius
Generous, soft corners give the system its calm, modern character.
Elevation
Soft, neutral shadows keep depth quiet and refined.
shadow-softshadow-cardshadow-liftshadow-glowBadges
Compact status and category labels used across cards and filters.
Form controls
Calm, accessible inputs with clear focus states, hints and errors — the backbone of the create-listing flow.
Keep it short and specific.
Please enter a valid Sri Lankan number.
Tell buyers what makes it special.
Amenities — toggle pills
Surfaces
Four card treatments for layering content on the neutral canvas.
Default
variant="default"
Elevated
variant="elevated"
Outline
variant="outline"
Sand
variant="sand"
Listing card
The flagship composite component — image with a hover zoom, price, location and a quiet spec row, assembled from the primitives above.
