LIVZO

Overview

LIVZO is a premium paying guest accommodation platform serving students and working professionals across Ahmedabad. The brand embodies a 'Community-First Minimalism' aesthetic—clean, trustworthy, and human-centered—where the interface prioritizes clarity and warmth over visual complexity. The design language combines a vibrant forest-green primary (#00704a) with supporting accents (golden yellow #f5c518 for warmth, WhatsApp green #25d366 for familiarity) against a pristine white canvas, creating an approachable yet professional presence. The emotional response is one of safety, belonging, and modern comfort: users feel they're not renting a room, but joining a family. Voice: conversational yet authoritative, grounded in local Indian vernacular ('Yha PG Nahi, Pariwar Milega'—'This isn't just a PG, it's a family'), avoiding corporate jargon. Vocabulary emphasizes community ('family-like environment', 'homestyle meals', 'professional management'), safety ('safe, clean, comfortable'), and accessibility ('starting ₹7,000/month'). Example sentence in brand voice: 'Your room is ready—your family is waiting.'

Colors

The color system is rooted in trust and accessibility. Primary (#00704a, a deep forest green) is the signature accent used exclusively on call-to-action buttons ('Book Now', 'Check Availability'), active navigation states, and key interactive elements. This color signals safety and growth—appropriate for a housing platform. Secondary (#25d366, WhatsApp green) appears on supportive CTAs ('WhatsApp Now') and status indicators, leveraging cultural familiarity in India. Tertiary (#f5c518, warm golden yellow) is reserved for highlights, badges, and accent elements that draw attention without competing with primary actions. The surface stack uses a clean white (#ffffff) as the base, with subtle off-whites (#f9fafb, #f3f4f6) for container differentiation. On-surface text is a deep teal-green (#00

Typography

The type system uses Inter exclusively, a modern geometric sans-serif that communicates professionalism and approachability simultaneously. Display (69.6px, 700 weight, -0.04em tracking) is reserved for hero headlines and brand statements, commanding attention without aggression. Headline-lg (40px, 600 weight) anchors section titles and major content blocks. Body-md (16px, 400 weight, 24px line-height) is the workhorse for descriptive copy, optimized for readability at arm's length on mobile and desktop. Label-md (14px, 600 weight) is applied to all button text and form labels, ensuring interactive elements are scannable and distinct. A critical treatment: apply text-shadow 0 1px 2px rgba(0,0,0,0.1) to white display text overlaid on photographic backgrounds (as in the hero) to maintain leg

Layout

The layout follows a 12-column grid with a max-width of 1400px, allowing flexible content scaling from mobile (single column) to desktop (multi-column). The hero section uses a 50/50 split: left column for text (dark green background #00704a), right column for imagery, creating visual balance and narrative clarity. Container padding uses the gutter token (24px) on mobile, scaling to 40px (lg spacing) on tablet and desktop. Section separation employs 64px (xl spacing) vertically, creating rhythm without excessive white space. The grid is fluid on mobile (full-width with 24px side padding) and fixed on desktop, ensuring content never feels cramped or stretched. Cards and content blocks use 24px (md spacing) internal padding, with 12px (sm spacing) between nested elements. The spacing scale i

Elevation & Depth

Depth in LIVZO's design is achieved through subtle layering and soft shadows rather than dramatic depth effects. Level 1 (Base): the white surface (#ffffff) with no shadow, representing the primary content plane. Level 2 (Standard Cards): 0 4px 12px rgba(0,0,0,0.08)—a soft, diffuse shadow that lifts cards 4px above the base, used on property cards, testimonials, and form containers. Level 3 (Elevated/Modals): 0 16px 40px rgba(0,0,0,0.12)—a larger, more pronounced shadow indicating modal dialogs, sticky headers, and primary CTAs on hover. Interactive states add a subtle 200ms transition (transi

Shapes

The shape philosophy is 'Soft-Technical Pragmatism'—rounded corners are used strategically to soften the interface while maintaining professional clarity. Buttons use 1rem (16px) border-radius, creating a friendly, approachable feel without appearing playful or casual. Cards and containers use 0.75rem (12px), a middle ground that feels modern without excessive rounding. Form inputs use 0.5rem (8px), a tighter radius that signals precision and data entry. The full-radius token (9999px) is reserved for badges and pill-shaped elements (e.g., 'Girls PG' tag), creating visual distinction for catego

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#00704a) with white text, 8px vertical / 24px horizontal padding, and 1rem border-radius. On hover, the background shifts to #005a3a (a darker shade of the primary) with a soft box-shadow (0 4px 12px rgba(0, 112, 74, 0.2)) and a 200ms ease transition, creating tactile feedback. On active/pressed, the background becomes #003d27 with no shadow, signaling commitment. Button-secondary uses a white background with a 2px solid primary border, inverting the color scheme for secondary actions ('Our PGs', 'Learn More'). Button-ghost removes the background entirely, using only text color and a hover state that applies {colors.surface-container-low} background, ideal for navigation l

Do's and Don'ts

**Do**

• Do use {colors.primary} (#00704a) exclusively for primary CTAs and active states—never dilute it with secondary uses.
• Do apply 24px (md spacing) as the default padding inside cards and containers; use 12px (sm spacing) only for nested elements or form fields.
• Do maintain 4.5:1 contrast minimum on all text; test white text on #00704a backgrounds with a contrast checker.
• Do use Inter 600 weight for all button and label text; never use 400 weight for interactive elements.
• Do apply soft shadows (0 4px 12px rgba(0,0,0,0.08)) to cards and containers; never use hard, dark shadows (#000000 based).
• Do transition all interactive states over 200ms ease; never use instant state changes or jarring animations.

**Don't**

• Don't use secondary colors (#25d366, #f5c518) on primary CTAs; reserve them for supporting actions and accents only.
• Don't apply border-radius > 1.5rem to buttons or cards; excessive rounding reads as playful, not professional.
• Don't use system fonts (system-ui, -apple-system) in place of Inter; the typeface is core to brand identity.
• Don't layer multiple shadows or use box-shadow with blur > 40px; the aesthetic is clean and minimal, not dramatic.
• Don't apply text-shadow to body text or labels; reserve it for white display text over photographic backgrounds only.
• Don't use color alone to communicate state; always pair color changes with text labels, icons, or border changes for accessibility.