Back to home

Component Styleguide

mvp-scope Sprint 1 — full component library demonstrable and reviewed.

Default light theme — warm parchment backgrounds, cocoa text, gold accents.

Real-World Examples

Components in context — how they look in actual product scenarios. Switch themes above to see each variation.

Example: Enquiry Form

Real-world form usage

A typical buyer enquiry form as it would appear on a listing detail page. Shows labels, inputs, select, checkbox (consent), and submit button in context.

Request a Site Visit

Survey No. 142/A · Chevella · Rangareddy

Example: Listing Card in Context

Real-world card usage

How a listing card looks on the discovery page — image area, badges, title, price, risk score, and trust badge. The card uses --gradient-surface so luxury variations are visible.

✓ Verified
Featured

142/A · Chevella

Chevella · Rangareddy

₹68.5L₹15.2L/acre
4.5 acres
LandCleared Verified· 15 Jan 2026
✓ Verified
⚠ Road Impact

Commercial Plot · NH-65

Patancheru · Sangareddy

₹2.16 Cr₹18,000/sq yd
68 / 100
Risk: Moderate

Example: Content Section

Real-world layout usage

A typical section with eyebrow, heading, body copy, and a feature grid — as seen on the home page. This shows typography hierarchy, spacing, and card treatment in a real layout.

Platform Capabilities

Everything You Need to Buy With Confidence

Designed for institutional investors, real estate developers, and discerning land buyers. Every tool you need to verify, compare, and transact with certainty.

New

GIS & Satellite Intelligence

Bhuvan 2D survey overlays, lake FTL layers, and HMDA zoning — all togglable in one map.

New

AI Land Risk Scoring

6-dimension ML model producing an objective 0–100 risk score with plain-language summary.

New

Lake FTL & Buffer Check

FTL encroachment blocks listing permanently. Full buffer zone analysis on every parcel.

Example: Alerts & Notifications

Real-world status usage

How tags, badges, and icons combine to communicate status in real scenarios — success, warning, danger, and informational states.

Verification Complete
Passed

All 10 verification gates passed. Listing is now live with full verification badge.

Road Impact Detected
Attention

Proposed ORR radial road passes within 30m of the parcel boundary. Review before proceeding.

Lake FTL Encroachment
Blocked

Parcel overlaps with Full Tank Level buffer. Listing permanently blocked — no overrides allowed.

DPDPA Consent Recorded
Info

User consent logged with timestamp. Data will be auto-deleted 90 days after enquiry resolution.

Example: Stats Bar

Real-world metrics display

A stats bar as it appears on the home page — large numbers in Playfair, labels in Inter uppercase. The dark background uses bg-primary so it re-themes correctly.

2,418+Verified Listings
₹1,200CrLand Value Listed
12+Mandatory Checks
48hrPremium SLA

Component Library

All components in isolation — verify variants, states, and tokens.

Buttons

§7.1

Hover the primary button — in base themes it raises up; in luxury themes it shimmers instead.

Inputs

§7.4
On

Cards

§7.3, §7.7

Standard Listing Card

Magazine-style card with image gradient

Used in Listings grid and /discover preview cards.

Luxury Listing Card

Phase 5a — not yet built

Tags / Badges — all 7 variants

§7.2
Verified
Gold
Zone
Warn
Danger
Ghost
Forest

Modal

§6.3 layering

Stepper

§7.8

WizardStepper — 5-step at steps 1, 3, 5

Phase 3 — not yet built

Document Uploader

DocumentUploader — empty / uploading / uploaded / error / N/A

Phase 3 — not yet built

Map Polygon Markers

§9.5
A
Agricultural#16a34a
R
Residential#3b82f6
F
Farmlands#0d9488
C
Commercial#f59e0b
12
Cluster

Subscription Tier Card

§7.3

Free and Explorer tier cards

Phase 5b — not yet built

GIS Layer Toggle

Unlocked (toggleable)
Locked (Explorer tier)
Active

Trust Badge

§7.8
Compact
LandCleared Verified· 15 Jan 2026
Expanded

Expanded panel — renders on listing detail page (/listings/[id])

Phase 2 — not yet built

Land Type Labels

§9.5.1

Hover, focus, or tap each label to see its regulatory alias tooltip.

Typography

§3.3
The quick brown fox
display — Hero H1 (Playfair)
The quick brown fox
h1 — Section titles (Playfair)
The quick brown fox
h2 — Sub-sections (Playfair)
The quick brown fox
h3 — Card titles (Inter)
The quick brown fox
h4 — Small headings (Inter)
The quick brown fox
body — Paragraphs (Inter)
The quick brown fox
sm — Buttons, labels (Inter)
The quick brown fox
xs — Tags, eyebrow (Inter)
The quick brown fox
eyebrow — Overlines (Inter uppercase)

Colour Palette

§4
Parchment#F2EAD8--background
Ivory#FAF5EC--card
Stone#EDE5D0--popover
Sand#E8E0D0--muted
Ink#1A1000--foreground
Bronze#6A4A10--primary
Gold#B8922A--secondary
Gold Light#E8C96A--secondary (light)
Gold Wash#F5EDDA--accent
Cocoa#4A3208--primary (deep)
Deep Brown#3D2800--footer
Jade#22A062--success
Danger#8B1A14--destructive

Elevation

§6.1
shadow-xs
shadow-sm
shadow-md
shadow-lg
shadow-xl

Token Spot-Check (10 components)

§3.3

Verify each component's tokens match the design-language spec. Check the box when confirmed.

§7.1
§7.1
§7.2
§7.3
§7.4
§7.5
§7.6
§7.7
§7.8
§9.5.1