Co-Op City @ Rawang — Five Design Concepts

Recommended

Nature Frame

Quiet luxury · Restrained · Conversion-led

Generous white space, sage, bone and soft gold, thin rules and aperture-mask image reveals. The most conversion-focused of the five, with a sticky enquiry rail and a mobile Call / Email / Enquire bar.

Signature interactionA radial location compass — the four amenities plotted at true distance on a square-root scale, so 290 m and 3.4 km both read clearly. Selecting one swings it to the top of the dial.

Open concept 05 →

The Cooperative Ledger

Swiss-precise · Institutional · Trustworthy

Paper white, ink black and one cooperative ochre. Tabular figures, hairline rules and index-card sections — leaning into the fact that a cooperative is collectively owned and state-backed.

Signature interactionA persistent numbered index rail (00–08) down the left edge that doubles as scroll progress and navigation, with figures that odometer-tick into place.

Open concept 01 →

Site Survey

Cartographic · Technical · Confident

Blueprint cyan on bone, mono type, survey crosshairs and coordinate ticks. Makes the masterplan — your strongest unused asset — the spine of the whole page.

Signature interactionOne continuous scroll-driven zoom from site scale (the 42.3-acre masterplan) through block scale to unit scale (the 750 sqft plan), so the page reads as a single camera move inward.

Open concept 02 →

Tropical Modern

Malaysian · Warm · Culturally rooted

Deep tropical green, terracotta and warm sand, with louvre and kisi-kisi screen motifs as dividers and edges. Differentiates hard from generic international property sites.

Signature interactionA sun-path slider that moves the page from 06:00 to 19:00 — imagery warmth, saturation, brightness and shadow direction all shift live, selling the climate and light of the place.

Open concept 03 →

Living Index

Bold · Editorial · Kinetic

Near-black and off-white with an electric lime accent, oversized uppercase type, a running marquee and horizontal scroll-snap tracks for the facilities.

Signature interactionA floating spec panel that follows you down the page and rewrites itself contextually — acreage, unit size, bedroom count, amenity distances — so the key numbers are never more than a glance away.

Open concept 04 →

What every concept shares

StructureThe same nine sections
Hero, Facilities, The Vision, Location, Floor Plans, News, Gallery, Associates, Contact — matching the live site's information architecture, with the WordPress theme's leftover demo content removed.
ContentMigrated verbatim
All copy comes from content/content.json, extracted from the live site. News thumbnails use project renders, since the live site's are theme placeholders.
BuildZero dependencies
Pure CSS and vanilla JavaScript — IntersectionObserver, scroll-snap, SVG. No frameworks, no build step. Google Fonts load over the network with system fallbacks.
Responsive360px to 1920px
Every concept reflows at 1920, 1440, 1280, 1024, 768, 600, 430, 390 and 360 — single-column on mobile, 44px minimum touch targets, sticky contact bar.
AccessibilityKeyboard and screen reader
Semantic landmarks, skip link, visible focus states, focus-trapped lightbox with Escape and arrow keys, labelled forms with inline validation, and full prefers-reduced-motion support.
PerformanceOptimised imagery
Every photograph ships as responsive WebP with srcset — 88% smaller than the originals. The 9.2 MB hero render now serves at roughly 448 KB, with originals archived in assets/raw/.