JanVani

Overview

JanVani is India's civic engagement platform designed to empower citizens to report local issues and drive community improvement. The design system embodies "Civic Clarity"—a philosophy that combines the symbolic weight of India's tricolor (saffron, white, green) with a clean, accessible interface that prioritizes transparency and participation. The aesthetic is rooted in democratic accessibility: every element is designed to be understood at a glance, whether by a rural farmer or an urban professional, using the Indian government's official color palette and a hierarchy that emphasizes action over decoration.

The brand voice is authoritative yet approachable, civic-minded but never bureaucratic. JanVani speaks in clear, direct language that respects the user's time and intelligence. The tone avoids jargon, uses active verbs, and frames citizen action as the core of governance. Example sentence: "Report the pothole on your street—your voice drives real change in your community."

Colors

The color system is rooted in India's national identity and civic responsibility. Primary (#138808) is the deep forest green representing growth, sustainability, and the environmental focus of civic improvement—it appears on all call-to-action buttons, active states, and success indicators. Secondary (#FF9933) is the saffron from the Indian flag, used for urgent actions, highlights, and secondary CTAs to create visual energy without overwhelming the interface. Tertiary (#0A1A4F) is a navy blue representing authority and stability, used in headers, badges, and data visualization to convey trust.

The surface stack is built on a light, accessible foundation: surface (#ffffff) is pure white for maximum readability, surface-container-low (#f1f5f9) provides subtle depth for grouped content, and

Typography

The type system pairs Merriweather serif for headlines (display, headline-lg, headline-md) with Inter sans-serif for body and UI text, creating a hierarchy that signals importance while maintaining legibility. Display (56px, 800 weight, -0.02em letter-spacing) is reserved for hero headlines like "Report Local Civic Issues," commanding attention with its serif weight and generous line-height (64px). Headline-lg (40px, 700 weight) is used for section titles like "District Performance Snapshot," while headline-md (32px, 700 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and important descriptive text, with 0.02em letter-spacing to aid readability. Body-md (16px, 400 weight, 24px line-height) is the default for form labels a

Layout

The layout uses a 12-column grid with a max-width of 1280px, allowing for flexible responsive design from mobile (single column) to desktop (multi-column). The page rhythm is built on a 24px gutter (md spacing) between sections, with 40px (lg spacing) used for major section breaks like the hero to the performance snapshot. Container padding is consistently {spacing.gutter} (24px) on desktop, reducing to {spacing.md} (24px) on tablet and {spacing.sm} (12px) on mobile to preserve screen real estate. The hero section uses a full-width background with centered content, creating a visual anchor before the main content. Cards are laid out in a 2-column grid on desktop (using 6 columns each) with 24px gap, collapsing to single column on tablet and mobile. White-space is generous but purposeful: 4

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop shadows. The elevation system uses three levels: sm (0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15)) for cards and default UI elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers. The header uses a 0.9 opacity white background with backdrop-filter: blur(8px) to create a frosted-glass effect that separates it from scrolling content without harsh shadows. Cards use a 1px border in outline-v

Shapes

The shape philosophy is "Civic Softness"—rounded corners that feel approachable and modern without sacrificing clarity or authority. Buttons use full (50px) border-radius to create pill-shaped CTAs that feel inviting and clickable, with padding of 12px 32px to ensure adequate touch targets (minimum 48px height). Cards use lg (16px) border-radius for a subtle roundness that distinguishes them from the background without appearing cartoonish. Input fields use full (50px) border-radius to match buttons, creating a cohesive interaction model where all interactive elements have consistent curvature

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses secondary color (#FF9933) with white text, full border-radius (50px), and 12px 32px padding to create a 48px tall pill button. On hover, the background transitions to #e68a00 (darker saffron) with a 200ms ease-in-out transition, providing clear feedback. Button-secondary uses a transparent background with a 2px primary-colored border and primary text, allowing for secondary actions without visual competition. Button-tertiary uses primary color (#138808) for actions that are important but not the main CTA. All buttons use label-md typography (14px, 600 weight) with 0.01em letter-spacing for clarity.

Containers & Surfaces Cards are the primary content container, using surface (#ffffff

Do's and Don'ts

**Do**

• Do use primary (#138808) for all main call-to-action buttons and success states—it's the brand's civic action color and signals citizen empowerment.
• Do pair Merriweather serif headlines with Inter sans-serif body text to create a hierarchy that feels authoritative yet approachable.
• Do apply full (50px) border-radius to buttons and inputs to create a cohesive, inviting interaction model across all interactive elements.
• Do use the 4px top border on performance cards (green for success, red for needs improvement) to add semantic meaning without relying on shadow alone.
• Do maintain at least 24px gutter spacing between major sections and 12px spacing between related items to prevent cognitive overload.
• Do apply the sm elevation shadow (0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15)) to all cards for subtle depth without harshness.

**Don't**

• Don't use pure black (#000000) for text—use on-surface (#0f172a) instead to reduce eye strain on long reading sessions.
• Don't apply border-radius to the 4px top border on performance cards; keep it sharp to create visual contrast with the rounded card corners.
• Don't use primary and secondary colors together in the same button or component—they compete for attention and dilute the civic message.
• Don't exceed 40px (lg spacing) for section gutters on desktop; larger gaps create disconnection and reduce scanability.
• Don't apply shadows larger than md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to standard cards—it creates visual noise and reduces the hierarchy of truly elevated elements.
• Don't use system fonts like system-ui or Arial; always specify Inter for body text and Merriweather for headlines to maintain brand consistency.