Unified Design System

Shared component library for Rural LWM and FSM Guide. 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.

With 3 stages:

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 in both repos.

1

Operator Identification

Identify and enumerate existing desludging operators in the city. Map their service areas, vehicle types, and current practices.

2

Registration & Licensing

Establish a formal registration and licensing system for desludging operators. Define eligibility criteria, documentation requirements, and renewal processes.

Funding Scheme Variant

Using string badges for non-sequential cards like funding schemes (LWM 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.

Twin Pit Latrine

Suitable for areas with high water table

Low maintenance requirements

Not suitable for rocky terrain

Requires periodic emptying every 3-5 years

Capacity: 1-2 KLD per household

Septic Tank

Widely understood technology

Long service life (15-20 years)

Requires regular desludging

Must be connected to soak pit or drainage

Typical capacity: 2-5 KLD

SplitCard

Side-by-side image and bullet list. Useful for treatment methods, reuse applications, etc.

Biosolids Applications

Soil conditioner for agriculture and horticulture
Fuel briquettes for industrial and household use
Construction material (bricks, blocks) when mixed with cement
Compost blend for landscaping and nurseries

StageAccordion

Expandable stage overview cards. Click to see substeps. Used on homepages.

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

Deployment

Phased rollout plan
Real-time monitoring
Data validation

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 and Data Collection

Icon + Number

3

Planning for Adequate Vehicles

Icon + Label

Approach

Retrofitting

Label + Number

Approach 2

Co-Treatment at Existing STPs

Icon only (inline)

Establishment of New FSTP

Number only (inline)

1Identification of Underutilised STPs

Title only (no pill)

Systematic Coverage

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

All desludging operators must be registered and licensed by the Urban Local Body before providing services.

Important Note

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

ComparisonTable

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

Type	Capacity	Cost Range	Suitability
Twin Pit	1-2 KLD	Low	Rural households
Septic Tank	2-5 KLD	Medium	Peri-urban areas
DEWATS	20-500 KLD	High	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 Desludging Operations

Guidelines PDF

PDF

Tariff Schedule

XLS

Training Manual

PPT

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.