Design System

Component library for Rural LWM. All components are props-driven and support variable numbers of stages, items, and content.

Design Tokens

Layout

max-w-4xl (896px / 56rem)

All content containers use max-w-4xl mx-auto — this applies to the top bar, mega menu, breadcrumb, progress bar, stage headers, main content, stage navigation, and footer.

Horizontal padding is px-4 sm:px-8 on sections.

Typography

Heading — Source Serif Pro (serif)

Heading 1

Heading 2

Heading 3

Heading 4

Body — Inter (sans-serif)

Body Large — The quick brown fox jumps over the lazy dog.

Body Base — The quick brown fox jumps over the lazy dog.

Body Small — The quick brown fox jumps over the lazy dog.

Body XS — The quick brown fox jumps over the lazy dog.

Colors

Accent

#ffca0a

Background Alt

#f7f0df

Text Primary

#000000

Text Secondary

#374151

Buttons

Primary Button Secondary Button Step 1 Step Button

Navigation

TopBar is live at the top of this page. Hover over "Stages" to see the MegaMenu.

Breadcrumb

StageProgressBar

Supports any number of stages. Current stage = 3 in this example.

Budget & Implementation

StageNavigation

Table of Contents (TOC)

Sidebar navigation for stage pages. Supports level 2 sub-items. Three variants available.

Default

Bordered

Filled

Usage:

<TOC steps={steps} />                    {/* default */}
<TOC steps={steps} variant="bordered" />   {/* bordered with dividers */}
<TOC steps={steps} variant="filled" />     {/* filled background with accent numbers */}

{/* Level 2 items via children: */}
steps={[{ number: 1, title: "...", children: [{ title: "Sub-item", slug: "sub-item" }] }]}

Cards

BadgeCard

Numbered step cards with HTML description. Used for process steps.

1

Baseline & Data Collection

Collect baseline data on existing water supply, drainage, and sanitation infrastructure across the target villages.

2

Strategy Formulation

Formulate a technical strategy based on baseline findings. Define appropriate GWM typologies and implementation priorities.

Funding Scheme Variant

Using string badges for non-sequential cards like funding schemes (Stage 5).

₹

MGNREGA

Mahatma Gandhi National Rural Employment Guarantee Act — provides funding for labor-intensive infrastructure works.

₹

SBM(G)

Swachh Bharat Mission (Grameen) — dedicated funding for rural sanitation including liquid waste management.

₹

15th Finance Commission

Grants to local governments that can be utilized for sanitation infrastructure.

DetailCard

Image + categorized feature list. Icons indicate good/bad/action/info. Supports stacked and split layouts.

Soak Pit

Low cost and easy to construct

Suitable for individual households

Not suitable for high water table areas

Requires periodic maintenance

Typical capacity: 500-1000 LPD

Leach Pit

Simple construction with local materials

Effective for low greywater volumes

Limited capacity for large households

Requires periodic desludging

Typical capacity: 1-2 KLD

SplitCard

Side-by-side image and bullet list. Useful for GWM typologies and applications.

Kitchen Garden Reuse

Treated greywater directed to household kitchen gardens
Supports vegetable cultivation and nutrition security
Reduces freshwater demand for irrigation
Applicable at individual household level

StageAccordion

Expandable stage overview cards. Click to see substeps. Used on the homepage.

01

Develop LWM Plan & Technical Strategy

Formulate state-level liquid waste management plans based on baseline data and technical assessment.

+

Baseline Assessment

Existing infrastructure mapping
Population & growth projections
Current waste generation data

Strategy Formulation

Technology options analysis
Cost-benefit assessment
Implementation roadmap

View Full Details

02

Survey Tool Development & Household Survey

Design and deploy digital survey tools for comprehensive household-level data collection.

+

App Development

Custom survey form design
GPS integration
Offline capability

Training

Master trainer workshop
Field enumerator training
Quality protocols

View Full Details

Content Components

SectionHeading

Section heading with a pill containing any combination of icon, number, and label. All pill elements are optional — when only one is present it renders inline; when none are present, the pill is omitted. Use tag="h3" to render as h3 instead of h2.

Icon + Label + Number

Step 1

Baseline & Data Collection

Icon + Number

2

Strategy Formulation

Icon + Label

Typology

Soak Pit

Label + Number

Step 3

VAP Generation

Icon only (inline)

Engagement with State Mission

Number only (inline)

1Survey App Development

Title only (no pill)

Implementation Complete

Usage:

<SectionHeading title="..." icon="fa-solid fa-..." number=1 label="Step" />
<SectionHeading title="..." icon="fa-solid fa-..." tag="h3" />

Callout

Highlighted box for key takeaways or important notes. Customizable label.

Key takeaway

The Village Action Plan should be prepared in consultation with the Gram Panchayat and local community representatives.

Important Note

All GWM structures must comply with SBM(G) Phase II guidelines for Liquid Waste Management in rural areas.

ComparisonTable

Scrollable comparison table with sticky first column. Supports images, colored cells, and custom styling.

Type	Capacity	Cost Range	Suitability
Soak Pit	500 LPD	Low	Individual households
Leach Pit	1-2 KLD	Low	Cluster of households
Waste Stabilization Pond	10-50 KLD	Medium	Community scale

List Styling

Standard unordered list pattern used across all stage pages.

Household water usage and disposal practices
Presence and condition of open drains, ponds, or soakage structures
Sources of water supply (piped, handpump, borewell) and consumption rates
Local practices and attitudes towards reusing or disposing wastewater

Standard class:

list-disc pl-6 text-gray-700 mb-4 space-y-1

ResourceBox

Container for downloadable documents, YouTube videos, and image resources. Videos render before document cards.

Introduction to Rural LWM

SBM(G) Phase II Guidelines

PDF

GWM Standard Drawings

PDF

Survey Data Template

XLS

Forms & CTAs

FloatingButton + HelpForm

The yellow "Get Help" button is visible at the bottom-right of this page. Click it to open the help form modal. Both the button label and form fields are configurable via props.