Maxxan Realty

Overview

Maxxan Realty is a premium Malaysian property agency that transforms real estate expertise into a confident, accessible digital experience. The design system embodies 'Architectural Confidence'—a movement that pairs austere dark elegance (near-black surfaces at #0c0c0c) with a singular, commanding golden accent (#ffbf00) that signals prosperity, trust, and professional mastery. The brand serves affluent property buyers, renters, and refinancing clients who demand both sophistication and clarity. The UI evokes the feeling of stepping into a high-end office: composed, authoritative, yet warm and welcoming.

The voice is professional yet approachable—precise without being cold, confident without arrogance. Maxxan speaks in clear, action-oriented language that respects the user's time and intelligence. Example sentence in brand voice: 'Your property dreams deserve expertise—let's make 2025 the year you move forward.'

Colors

The color system centers on a high-contrast dark-light polarity that maximizes legibility and visual hierarchy. Primary (#ffbf00) is the brand's signature golden accent—deployed exclusively on CTAs, key links, focus states, and premium highlights. It appears sparingly but decisively, commanding attention without overwhelming. Secondary (#0089f7) provides a cool counterpoint for informational elements, status indicators, and secondary actions. Tertiary (#f78da7) is reserved for accent highlights and emotional moments (testimonials, success states). The surface stack is anchored in near-black (#0c0c0c for base surface, #000000 for container-lowest) with careful increments through #0f0f0f, #171717, #242424, and #2d2d2d to create subtle depth without introducing gray. On-surface text is pure w

Typography

The type system uses DM Sans exclusively—a geometric, contemporary typeface that conveys both professionalism and approachability. The hierarchy is built on weight contrast (400 for body, 500 for headings, 700 for labels) rather than size alone, creating visual rhythm without excess. Display (70px, 400 weight) anchors hero sections; Headline-lg (55px, 500 weight, -0.05em letter-spacing) commands attention on major sections; Headline-md (48px, 500 weight) structures content blocks. Body-lg (18px, 400 weight) is the default reading size with 25px line-height for comfortable scanning. Label-md (14px, 600 weight) is applied to buttons and interactive elements with 0.01em letter-spacing for crispness. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) to ensu

Layout

The layout uses a 12-column grid with a max-width of 1440px, maintaining a fluid-to-fixed approach that adapts gracefully from mobile to desktop. The gutter spacing is 24px (md spacing unit), creating consistent breathing room between columns. Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, establishing a clear visual rhythm. The container max-width of 1440px ensures content remains readable on ultra-wide displays without excessive line lengths. White-space is treated as a design element—generous margins around hero sections (40px–64px) create moments of visual rest, while tighter spacing (12px) within component groups maintains cohesion. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is applied consistently acr

Elevation & Depth

Depth is conveyed through a restrained shadow system that respects the dark aesthetic. Level 1 (Base): no shadow; surface sits flush against the background (#0c0c0c). Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), applied to cards, modals, and elevated containers. Level 3 (Prominent/Hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), used on hover states and high-priority overlays. Shadows are always black-based (never colored) to maintain the austere aesthetic. Focus states use a thin outline (2px solid {colors.primary}) rather than shadow, keeping the interface crisp. In

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and purposefully to soften hard edges while maintaining geometric clarity. Buttons and primary CTAs use lg radius (1rem / 16px) for a confident, modern appearance. Cards and containers use xl radius (1.5rem / 24px) to create approachable, premium surfaces. Input fields use DEFAULT radius (0.5rem / 8px) for a more technical, functional feel. Badges and small components use full radius (9999px) for a playful, badge-like quality. The rationale: larger radii (xl, full) are reserved for prominent, inviting surfaces

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#ffbf00) background with {colors.on-primary} (#0c0c0c) text, 12px font-size, 700 font-weight, 16px 25px padding, and lg radius (16px). On hover, the background transitions to {colors.primary-container} (#faca3d) over 150ms. Button-secondary uses a transparent background with a 2px solid {colors.primary} border and {colors.on-surface} text; on hover, the background fills with {colors.primary}. Button-ghost is transparent with {colors.on-surface} text; on hover, it gains a {colors.surface-container-high} background. All buttons use label-md typography (14px, 600 weight) except the primary CTA, which uses label-sm (12px, 700 weight) for visual emphasis.

Containers & Surfaces Cards use

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ffbf00) exclusively for primary CTAs, focus states, and brand-critical highlights—never dilute its impact through overuse.
• Do maintain the dark surface stack (#0c0c0c to #2d2d2d) as the foundation; avoid introducing light backgrounds or gray neutrals that conflict with the austere aesthetic.
• Do apply negative letter-spacing (-0.03em to -0.05em) to headlines (h1, h2, h3) to create premium visual weight and tighten composition.
• Do use DM Sans exclusively across all text; never substitute with system fonts or serif typefaces that undermine the contemporary brand voice.
• Do apply shadows consistently (Level 2: 0 4px 12px rgba(0,0,0,0.4), Level 3: 0 16px 40px rgba(0,0,0,0.5)) to create predictable depth hierarchy.

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or non-interactive elements—reserve it for moments of intentional emphasis and action.
• Don't introduce new accent colors beyond primary (#ffbf00), secondary (#0089f7), and tertiary (#f78da7); additional colors fragment the visual system.
• Don't apply rounded corners larger than xl (24px) to functional elements like inputs or small buttons; maintain geometric clarity through appropriate radius sizing.
• Don't use colored shadows or glows; all shadows must be black-based (rgba(0,0,0,x)) to preserve the austere, professional aesthetic.
• Don't exceed 150–200ms transition timing on interactive elements; faster feels jarring, slower feels sluggish and undermines the premium brand perception.