LoansJagat

Overview

LoansJagat is India's pioneering loan consolidation marketplace, designed to transform complex multi-loan financial management into a seamless, single-EMI experience. The platform serves aspirational Indian borrowers seeking clarity and control over their finances. The aesthetic is "Digital Fintech Minimalism"—a bold fusion of deep navy/black backgrounds (#0f172a, #0a0f1a) with vivid electric blue accents (#2681ff, #2f6bff) that evoke trust, technological sophistication, and forward momentum. The UI conveys precision and accessibility: every interaction feels purposeful, every data point digestible, every CTA unmissable.

The brand voice is confident yet approachable, speaking to users as financial partners rather than subjects. Tone: direct, optimistic, jargon-aware but never condescending. Vocabulary favors action verbs ("consolidate," "simplify," "settle") and outcome-focused language. Example sentence in brand voice: "Merge your ₹5 lakhs in scattered EMIs into one smart payment—and reclaim ₹12,000 monthly."

Colors

The color system centers on a high-contrast dark-mode-first palette optimized for fintech clarity and trust-building. Primary (#2681ff) is the signature electric blue used exclusively on CTAs, active states, and key interactive elements—it commands attention without aggression. Secondary (#2f6bff) and Tertiary (#0084ff) provide supporting accent layers for secondary actions and status indicators, maintaining visual hierarchy while avoiding monotony. The surface stack (surface #0f172a through surface-container-highest #2a3555) creates subtle depth through 8 distinct layers, enabling card hierarchies and modal elevation without relying on shadows alone. On-surface (#eeeeee) ensures 16:1 contrast ratio for accessibility on dark backgrounds. Error (#fb2c36) is reserved for validation failures

Typography

The type system uses Poppins exclusively, a geometric sans-serif that balances warmth with technical precision—ideal for fintech contexts. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and card titles, with negative letter-spacing (-0.02em, -0.01em respectively) tightening the visual rhythm. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) handle descriptive copy and form labels with generous line-height (1.5–1.75) for readability on dark backgrounds. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are reserved for UI labels, badges, and micro-copy. Instruction: apply text-sh

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centering content on desktop while maintaining full-bleed sections for hero gradients and background imagery. Spacing is semantic: lg (40px) separates major sections (hero, feature blocks, footer), md (24px) spaces cards and component groups, sm (12px) gaps internal component elements. The gutter (24px) applies to horizontal padding on all container edges, scaling to 16px on tablet and 12px on mobile. Container max-width (1280px) ensures readability without excessive line-length. White-space philosophy: generous vertical rhythm (1.5–2x line-height) between sections creates breathing room and guides visual scanning. Cards and modals use md (24px) internal padding; form inputs use sm (12px). The hero section spans full-wid

Elevation & Depth

Depth is conveyed through a layered shadow and background-color system rather than heavy drop-shadows. Level 1 (Base): surface (#0f172a) with no shadow, used for page background and lowest-layer content. Level 2 (Standard Card): surface-container (#141d35) with elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)), used for cards, dropdowns, and standard modals. Level 3 (Elevated/Modal): surface-container-high (#1f2a45) with elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)), used for prominent modals, popovers, and floating action elements. Primary buttons add a branded shadow: box-shadow 0 4px 12px rgba

Shapes

The shape philosophy is "Soft-Technical Precision"—rounded corners signal approachability and modernity while maintaining geometric clarity. Buttons and CTAs use full (9999px) border-radius, creating pill-shaped affordances that feel contemporary and clickable. Cards and containers use lg (1rem / 16px) for a subtle, professional curve that softens hard edges without appearing playful. Input fields use DEFAULT (0.5rem / 8px) for a tighter, more utilitarian appearance. Chips and badges use full (9999px) to emphasize their discrete, selectable nature. Rationale: full-radius buttons stand out as p

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use {colors.primary} (#2681ff) background, {colors.on-primary} (white) text, full border-radius, 12px 24px padding, and 48px height. On hover (button-primary-hover), background shifts to #1a5ae6 with shadow expansion (0 6px 16px rgba(38, 129, 255, 0.4)) and scale(1.02) transform over 200ms. On active (button-primary-active), scale reduces to 0.98 and background darkens to #0f4db8. Secondary buttons (button-secondary) use {colors.secondary} (#2f6bff), white text, full radius, 8px 20px padding, 40px height. Ghost buttons (button-ghost) are transparent with a 1px primary-colored border and primary text, used for tertiary actions. All buttons use {typography.label-md} (14px, 600 weight) for clea

Do's and Don'ts

**Do**

• Do use primary (#2681ff) exclusively on CTAs and interactive states—never on backgrounds or passive text.
• Do maintain 16:1 contrast ratio between on-surface (#eeeeee) and surface (#0f172a) for WCAG AA compliance.
• Do apply full (9999px) border-radius to all buttons to signal affordance and modernity.
• Do use md (24px) spacing between major sections and sm (12px) between component groups to establish clear visual hierarchy.
• Do apply transition-all duration-200 to button hover states (scale, shadow, color) for smooth, responsive feedback.
• Do use Poppins 600 weight for all interactive labels (buttons, form fields, links) to distinguish them from body text.

**Don't**

• Don't use near-black or near-white as primary; the signature electric blue (#2681ff) is the only acceptable primary accent.
• Don't apply shadows heavier than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12))—dark mode requires restraint.
• Don't mix border-radius values inconsistently; use full for buttons, lg for cards, DEFAULT for inputs—no arbitrary values.
• Don't place small text (label-sm) over gradient backgrounds without text-shadow 0 2px 4px rgba(0, 0, 0, 0.3).
• Don't use secondary (#2f6bff) or tertiary (#0084ff) for primary CTAs; reserve primary (#2681ff) for the most important action.
• Don't exceed 1280px container max-width on desktop; maintain readability and visual balance.