Sunway Property

Overview

Sunway Property is a master community developer operating across Malaysia, Singapore, China, and the United Kingdom, building multigenerational neighborhoods rooted in trust and stability. The brand embodies 'Architectural Confidence'—a design philosophy that pairs bold, decisive primary red (#C10000) with clean, professional typography and warm, human-centered imagery. The aesthetic evokes permanence and reliability: strong vertical hierarchy, generous whitespace, and a carefully curated color palette that communicates both corporate authority and approachability. Users encounter a brand that feels established, trustworthy, and invested in their long-term wellbeing. The emotional response is one of security: 'This developer will be here for generations, and so will my community.'

Tone of voice: measured, confident, and deeply human. Sunway Property speaks in declarative statements ('You've found us and we'll be with you for generations') rather than hyperbole. Vocabulary emphasizes permanence, community, and trust—words like 'master developer,' 'generations,' 'with you,' and 'understand' recur throughout messaging. The brand avoids marketing clichés; instead, it grounds itself in the tangible reality of building places where families live, work, and grow. Example sentence in brand voice: 'Here at Sunway Property, we understand what it means to trust us as the Master Community Developer.'

Colors

The color system is anchored by a bold, assertive primary red (#C10000) used exclusively for call-to-action buttons, key links, and interactive focus states. This red is not decorative—it signals action and commitment. Secondary gray (#54595F) provides a professional, neutral counterpoint for body text, navigation, and supporting UI elements. Tertiary green (#3F7056) and its lighter variant (#61CE70) are reserved for accent highlights, success states, and secondary CTAs, adding warmth and approachability without competing with the primary red. The surface stack is anchored in pure white (#FFFFFF) for maximum clarity and trust; supporting surfaces use carefully calibrated grays (#F5F5F5, #E8E8E8, #D8D8D8) to create subtle depth without introducing color noise. On-surface text is a neutral c

Typography

The type system uses Montserrat exclusively across all scales—a geometric sans-serif that communicates modernity and precision while remaining warm and accessible. Display (60px, weight 700, line-height 68px, letter-spacing -0.04em) is reserved for hero headlines and brand statements, where its bold weight and tight tracking create visual impact. Headline-lg (40px, weight 600, line-height 48px) anchors section introductions; headline-md (28px, weight 600) breaks content into digestible chunks. Body-lg (18px, weight 400, line-height 28px) and body-md (16px, weight 400, line-height 24px) form the reading hierarchy, with consistent 28px and 24px line-heights respectively to ensure comfortable scanning. Label-md (14px, weight 600, letter-spacing 0.01em) is applied to button text, form labels,

Layout

The layout system uses a fixed 1140px container max-width (responsive to 1024px on tablet, 767px on mobile) with a 12-column grid and 24px gutters. This creates a predictable, professional rhythm that feels spacious without being wasteful. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for tight component padding, md (24px) for standard section separation and card padding, lg (40px) for major section breaks, and xl (64px) for hero/footer spacing. The hero section occupies 90vh with a dark overlay (rgba(0, 0, 0, 0.8)) and bottom padding of 5em (80px) to create breathing room above the fold. Body padding is consistently 0px to allow full-bleed backgrounds; internal content uses the container system to constrain width. Whitespace is generous but pur

Elevation & Depth

Depth is achieved through a restrained shadow system that prioritizes clarity over drama. Level 1 (Base/Surface): no shadow; elements sit flush on the white background. Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates a subtle lift, suggesting the card is 8px above the surface. Level 3 (Modals/Overlays/Hover states): box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2) increases depth perception, signaling prominence and focus. The hero section uses a linear gradient overlay (linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)) with 80% opacity to darken

Shapes

The shape philosophy is 'Geometric Warmth'—using rounded corners to soften the corporate aesthetic while maintaining geometric precision. Buttons use full rounding (border-radius: 9999px, or 50% on fixed-width elements) to create a friendly, approachable CTA that stands out from rectangular content containers. Cards and containers use lg rounding (1rem / 16px) for a balanced, modern appearance that feels contemporary without being trendy. Input fields use full rounding (border-radius: 25px, as observed in computed styles) to create a distinctive, premium input experience. List items and smalle

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#C10000) background with {colors.on-primary} (white) text, padding 20px 60px, height 48px, full rounding (border-radius: 9999px), and {typography.label-md} (14px, weight 600). On hover, transition to {colors.primary-fixed-dim} (#C10000 at 90% opacity) over 200ms. On active/pressed, reduce opacity to 80% and apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Button-secondary uses transparent background with {colors.on-surface} text, a 2px solid border in {colors.outline} (#8D8D8D), and the same padding/height/rounding as primary. On hover, fill the background with {colors.surface-container-high} (#E0E0E0) and change text to {colors.primary} (#C10000) to signal focus. Disabled buttons

Do's and Don'ts

**Do**

• Do use {colors.primary} (#C10000) exclusively for primary CTAs and interactive focus states—it is the brand's signature accent and must remain distinctive.
• Do apply generous whitespace (md/lg spacing) between sections to create visual breathing room and emphasize content hierarchy.
• Do use Montserrat at consistent weights (400 for body, 600 for labels, 700 for display) to maintain typographic clarity and brand consistency.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to all white text over photographic backgrounds to ensure legibility.
• Do use full rounding (border-radius: 9999px) on buttons and inputs to signal interactivity and approachability.
• Do transition interactive elements over 200ms using cubic-bezier(0.4, 0, 0.2, 1) for a polished, professional feel.

**Don't**

• Don't use secondary red (#F10E3F) or tertiary green (#61CE70) for primary CTAs—these are supporting accents only.
• Don't apply shadows to elements on white backgrounds unless they are elevated containers (cards, modals); flat elements should have no shadow.
• Don't use font families other than Montserrat; system fonts or serif typefaces break brand consistency.
• Don't apply letter-spacing to body text; use 0px letter-spacing for body-lg and body-md to maintain readability.
• Don't use gradients except for hero overlays; the system relies on solid colors and subtle shadows for depth.
• Don't reduce button padding below 20px horizontal or height below 48px; this maintains touch-target accessibility and brand presence.