Housing.com

Overview

Housing.com is India's most trusted real estate marketplace, embodying a 'Digital Confidence' aesthetic that blends vibrant energy with professional clarity. The brand serves buyers, sellers, renters, and investors seeking verified properties and developer partnerships across India's dynamic housing market. The visual language combines a bold purple accent (#5e23dc) with warm, approachable neutrals and a clean, modern interface that conveys trustworthiness and accessibility. The UI evokes a sense of discovery and empowerment—users feel guided through complex property searches by intuitive navigation, rich imagery, and transparent information architecture.

Housing.com's voice is conversational yet authoritative: direct, helpful, and grounded in data. The brand avoids hype and jargon, instead using clear, action-oriented language that respects the user's intelligence and time. Tone examples: 'Find your next home with 7K+ verified listings added daily' (confident, specific), 'Explore top living options with us' (inviting, not pushy). The vocabulary emphasizes trust ('verified', 'trusted'), choice ('explore', 'discover'), and agency ('your next', 'your investment'). Personality: approachable expert—knowledgeable without being condescending, energetic without being frivolous.

Colors

The color system is anchored by a signature purple primary (#5e23dc), which appears on all call-to-action buttons, active states, and brand-critical interactive elements. This purple is vibrant yet professional, conveying both innovation and reliability—essential for a financial decision platform. The primary container (#f0ecff) provides a soft, accessible tint for secondary actions and hover states, maintaining visual hierarchy without overwhelming the interface. Secondary accent green (#1dd38f) is reserved for positive confirmations, success states, and trust indicators (e.g., 'verified' badges), creating a complementary energy that reinforces the brand's commitment to transparency. Tertiary blue (#4064ad) supports informational hierarchy and secondary navigation. The surface stack uses

Typography

The typography system uses Rubik as the primary typeface, a geometric sans-serif that balances approachability with modern professionalism. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements, commanding attention without aggression. Headline-lg (40px, 600 weight) is used for section titles like 'Housing's top picks', establishing clear information hierarchy. Headline-md (28px, 600 weight) breaks down subsections, while title-lg (20px, 600 weight) labels cards and component headers. Body-lg (18px, 400 weight, 28px line-height) is reserved for hero copy and prominent descriptions; body-md (16px, 400 weight, 24px line-height) is the standard paragraph text, set at 14.5px in computed styles for compact mobile rendering. Label-md (14px, 500 weight, 0.01em

Layout

The layout uses a 12-column grid system with a maximum container width of 1360px, maintaining consistent horizontal rhythm across desktop and tablet viewports. The page rhythm follows a 'modular stacking' approach: hero section (full-width, 488px height with gradient background), search bar overlay (positioned absolutely, 24px gutter from edges), content sections separated by lg spacing (40px vertical margin), and card grids using md spacing (24px) for gutters. The hero employs a 2-column layout with text on the left (50% width) and imagery on the right (50% width), creating visual balance and focus. Section containers use 24px horizontal padding (gutter) on desktop, reducing to 12px on tablet. White-space philosophy emphasizes breathing room: cards have 24px internal padding, section brea

Elevation & Depth

Depth is conveyed through a three-tier shadow system that creates subtle visual hierarchy without relying on color alone. Level 1 (Base/Flat): no shadow; used for inline text, badges, and flat UI elements. Level 2 (Standard Card): box-shadow: 0 1px 10px rgba(0,0,0,0.1), applied to all card components, property listings, and floating elements. This shadow is soft and diffuse, suggesting a card lifted 4-8px above the surface. Level 3 (Elevated/Modal): box-shadow: 0 24px 32px rgba(167,174,186,0.2), used for modals, dropdowns, and prominent overlays, suggesting elevation of 16-24px. On hover, card

Shapes

The shape system follows a 'Soft-Technical' philosophy: rounded corners are used strategically to soften the interface while maintaining a sense of order and precision. Buttons use lg radius (16px / 1rem), creating a pill-like appearance that feels friendly and clickable without sacrificing professional appearance. Cards use xl radius (24px / 1.5rem), establishing a distinct container boundary and creating visual separation from the background. Input fields use full radius (9999px / border-radius: 100%), creating a capsule shape that signals 'search' and 'input' through familiar UI patterns. T

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#5e23dc) background with {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 500 weight), 12px vertical and 24px horizontal padding, and {rounded.lg} (16px radius). Height is fixed at 44px to meet touch target guidelines (minimum 48px, but 44px is acceptable with adequate spacing). On hover, button-primary transitions to #723fe0 with a 0 4px 14px rgba(94,35,220,0.15) shadow over 200ms ease. On active/pressed, the background darkens to #5b2cd6 and the shadow increases to 0 8px 24px rgba(94,35,220,0.25). Button-secondary uses a transparent background with a 1px solid border at {colors.primary}, maintaining the same text color and padding. On hover, the backgroun

Do's and Don'ts

**Do**

• Do use {colors.primary} (#5e23dc) exclusively for primary CTAs, active states, and brand-critical interactions—never dilute it with secondary uses.
• Do apply {elevation.sm} (0 1px 10px rgba(0,0,0,0.1)) to all cards and floating elements to establish consistent depth hierarchy.
• Do use {rounded.full} (100% border-radius) for search inputs and capsule-shaped elements to signal 'search' and 'input' through familiar patterns.
• Do maintain {spacing.md} (24px) as the default gutter between cards and sections; use {spacing.lg} (40px) only for major section breaks.
• Do set body text to {typography.body-md} (16px, 400 weight, #222222) on white backgrounds for WCAG AAA contrast compliance.
• Do use {colors.secondary} (#1dd38f) exclusively for positive confirmations, success states, and 'verified' badges—never for primary actions.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.
• Do use Rubik font exclusively; never substitute with system fonts or serif typefaces.

**Don't**

• Don't use near-black (#191919) or near-white (#faf9f5) as primary colors; reserve them for backgrounds and text only.
• Don't apply shadows darker than rgba(0,0,0,0.2) or larger than 0 24px 32px; excessive shadows create visual clutter.
• Don't mix rounded radii arbitrarily; stick to the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 16px, xl: 24px, full: 100%).
• Don't use {colors.primary} (#5e23dc) for body text or backgrounds; it's reserved for interactive elements and accents only.
• Don't apply letter-spacing greater than 0.1em or less than -0.04em; extreme tracking reduces readability.
• Don't use more than 3 font weights in a single view; stick to 400 (body), 500 (labels), 600 (headlines), 700 (display).
• Don't apply text-shadows to body text; use them only on small labels (label-sm) over complex backgrounds.
• Don't use opacity-based overlays darker than rgba(0,0,0,0.3) on hero images; text legibility must be maintained.