Design System

Fecal Sludge Management Application

Typography

H1 - Source Serif Pro, Semibold (600), text-6xl (60px)

Heading One

H2 - Source Serif Pro, Semibold (600), text-5xl (48px)

Heading Two

H3 - Source Serif Pro, Semibold (600), text-4xl (36px)

Heading Three

H4 - Source Serif Pro, Semibold (600), text-3xl (30px)

Heading Four

Body - Inter, Regular (400), text-base (16px)

This is body text using Inter. Fecal sludge management (FSM) is a comprehensive approach to safely managing human waste from containment to treatment and reuse.

Colors

Text (Dark)

stone-900 (#1c1919)

Subheadings

stone-700 (#44403b)

Background

White (#ffffff)

Background Alt

#f7f0df

Accent

#FFCA0A

Components

Buttons

Border radius: rounded-lg (8px)

Badge Cards

1

Assess the containment system

Determine the type, condition, and accessibility of the existing containment system.
2

Schedule regular desludging

Plan for emptying every 3-5 years depending on usage and tank size.
3

Contact licensed service providers

Engage authorized desludging operators for safe and compliant emptying.

Stage Cards (Home Page)

Used on the home page in the 5-Stage Framework section

Containment
1

Containment

Identifying containment systems and toilet typologies

Conveyance
2

Conveyance

Emptying and transportation to treatment facilities

Treatment
3

Treatment

Retrofitting, co-treatment, and FSTP establishment

Number Badges

Alt Badge (for steps and secondary items)

1
w-7 h-7 sm:w-8 sm:h-8 bg-bg-alt

Large Alt Badge (for end products, key items)

1
w-8 h-8 sm:w-10 sm:h-10 bg-bg-alt

Resource Link Cards

New horizontal layout with thumbnail and underlined title

Resource thumbnail

Swachh Shauchalaya Resource Hub

LINK
Resource thumbnail

FSM Treatment Technologies

LINK

Stage Progress Bar

Used at the top of each stage page to show progress through the 5-stage framework. Displays all stages side-by-side with three visual states: completed (past), current (active), and upcoming (future).

Example: Stage 3 (Treatment) as current

Containment
Conveyance
Treatment
Reuse
Implementation

Mobile Responsiveness:

  • On mobile (<640px): "Stage X" labels are hidden to prevent overlap
  • Stage titles use smaller font size (0.65rem) on mobile
  • All 5 stages remain visible side-by-side across all screen sizes
  • Hover effects apply visual feedback (darkening/lightening text and progress bars)

Information Cards

Timeline Management

Ensure realistic timelines for each phase, accounting for approval processes, seasonal variations, and potential delays.

Stakeholder Coordination

Maintain regular communication with all stakeholders including government departments, contractors, and local communities.

Stage Navigation (Prev/Next)

Used at the bottom of stage pages for navigation between stages. Full-width component with gradient background.

← Containment Treatment →

Layout Patterns

Full-Width Image Wrapper

The full-width breakout pattern allows images to span the entire viewport width, even when inside containers with horizontal padding. This technique uses negative margins to "break out" of the parent container.

How It Works:

  • relative - Establishes positioning context
  • left-1/2 right-1/2 - Positions the element
  • -ml-[50vw] -mr-[50vw] - Negative margins extend 50% of viewport width on each side
  • w-screen - Makes container 100vw (full viewport width)
  • self-stretch - (Only for flex containers) Overrides parent's items-center alignment

Example 1: Inside Regular Section

Use this pattern when the parent is a regular section with padding.

Full-width example in regular section 
<section class="py-12 px-8">
  <div class="max-w-4xl mx-auto">
    <!-- Content with max-width -->
  </div>

  <!-- Full-width image breakout -->
  <div class="relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen">
    <img src="/path/to/image.png" alt="Description" class="w-full" />
  </div>
</section>

Example 2: Inside Flex Container with items-center

When the parent is a flex container with items-center, add self-stretch to override the centering.

Content centered by flex container

Full-width example in flex container 
<header class="flex flex-col items-center px-8">
  <div class="max-w-4xl text-center">
    <!-- Centered content -->
  </div>

  <!-- Full-width image breakout with self-stretch -->
  <div class="relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen self-stretch">
    <img src="/path/to/image.png" alt="Description" class="w-full" />
  </div>
</header>

Important Notes:

  • Check parent container: Always verify if the parent has flex and items-center
  • Use self-stretch only when needed: Add it only for flex containers, not regular sections
  • Works with any padding: This pattern works regardless of parent's horizontal padding
  • Mobile responsive: The breakout works consistently across all screen sizes

Gradient Background Cards

Used in FSM Value Chain section for visual progression. Cards have no gaps between them and span full width.

Containment

bg-accent/10

Conveyance

bg-accent/30

Treatment

bg-accent/50

Reuse

bg-accent/70

Key Points:

  • gap-0 - No gaps between cards for seamless gradient effect
  • grid-cols-4 - Four columns on large screens
  • Increasing opacity values (10%, 30%, 50%, 70%) create visual progression
  • Full-width breakout container for edge-to-edge display

Background Image Section

Section with background image and backdrop blur overlay. Used for "The Challenge" section.

The Challenge

India faces significant challenges in managing fecal sludge across both urban and rural areas due to inadequate collection systems, limited treatment infrastructure, and insufficient institutional capacity.

Key Structure:

  • relative overflow-hidden - Section container
  • absolute inset-0 z-0 - Background image layer
  • relative z-10 - Content layer (above background)
  • bg-white/40 backdrop-blur-md - Semi-transparent blur effect for readability

Content Patterns

Feature Cards with Icons

Policies & Guidelines

Comprehensive FSM policies and regulatory frameworks.

Service Provider Support

Resources for institutionalizing service providers.

List Items with Icons

  • Urban Local Bodies (ULBs) - Planning and implementing FSM systems
  • Engineers & Consultants - Designing FSM infrastructure
  • Policy Makers - Developing FSM strategies and regulations

Alert/Callout Boxes

Important Note: This is a callout box for highlighting important information or tips.

Usage:

bg-accent bg-opacity-10 border-l-4 border-accent

Glossary/Definition Pattern

F

FSM (Fecal Sludge Management)
The complete process of collecting, transporting, treating, and safely disposing or reusing Fecal sludge from on-site sanitation systems.
FSTP (Fecal Sludge Treatment Plant)
A facility specifically designed for treating Fecal sludge, typically using technologies like drying beds.

Stage Label Badge

Used at the top of stage pages to indicate progress

STAGE 1 OF 5

Containment

Split Card

A card with split layout: image on one side, title and bulleted list on the other. Used for toilet typologies and similar content.

Example toilet type

Twin Pit Toilets

  • Twin pits have two single pits
  • When one pit fills, the second pit is used
  • The full pit is allowed to rest for one year or more
  • Contents can be safely emptied manually

Component:

<SplitCard image="/path" title="Title" description={['item1', 'item2']} />

Closing Note Card

Used at the end of stage pages for summary notes. Full-width section with gradient background.

Gram Panchayats (GPs) and Urban Local Bodies (ULBs) shall use the above toilet typology while creating and maintaining the toilet database. This data is a critical prerequisite for the next stage of planning, as it provides essential information on the quantity and characteristics of fecal sludge requiring treatment.

Key Structure:

Hero Section

Home page hero section with logos, title, description, and CTA buttons. Uses rounded-full buttons and includes a full-width hero image below.

WASH Institute Swachh Bharat Mission

Fecal Sludge Management

Comprehensive guidance for implementing safe and sustainable Fecal sludge management across urban and rural India.

VIEW FRAMEWORK GET STARTED
FSM Value Chain Illustration

Key Structure: