IndGov Frontend Toolkit

A public-sector-inspired UI toolkit for Indian government services.

This starter toolkit is built for:

• Indian heritage-informed visual identity
• High usability for low digital literacy contexts
• Multilingual interfaces across Indian scripts
• State-level theming without duplicating component code
• Progressive enhancement with lightweight JavaScript

What this includes

• Token-first CSS system: src/indgov.css
• Component file map for maintainability: docs/component-files.md
• State theme overrides: themes/states.css
• JS behavior initializer (initAll): src/indgov.js
• Working reference page: examples/index.html
• Adoption guides by stack/language: docs/adoption
• Dedicated starter folders per stack: projects
• Starter apps now use component/partial file separation for maintainability
• Reference mapping notes: docs/reference-mapping.md
• Publish-ready help portal pages: docs/help-portal
• Full per-component docs pages aligned to standardized component naming: docs/help-portal/components

Enhancements beyond the baseline

• Multiscript font stack for major Indian language families
• Logical CSS properties (margin-inline, padding-block) to improve layout portability
• Direction auto-detection helper (data-igds-auto-dir) for Urdu/Arabic contexts
• Theme contract based on CSS variables for safe branding overrides
• Mobile-friendly navigation and dismissible alert patterns out of the box

Install

npm install @govin/indgov-frontend

Or copy src/ and themes/ directly into your service repository.

Quick start (plain HTML)

<link rel="stylesheet" href="/node_modules/@govin/indgov-frontend/src/indgov.css" />
<link rel="stylesheet" href="/node_modules/@govin/indgov-frontend/themes/states.css" />

<script src="/node_modules/@govin/indgov-frontend/src/indgov.js"></script>
<script>
  IndGovFrontend.initAll();
</script>

Theme contract

Override these variables at app or state scope:

• --igds-color-primary
• --igds-color-primary-hover
• --igds-color-secondary
• --igds-color-link
• --igds-color-link-hover
• --igds-heritage-saffron
• --igds-heritage-green

Example:

[data-igds-state="maharashtra"] {
  --igds-color-primary: #243c8f;
  --igds-color-primary-hover: #1c3073;
  --igds-color-secondary: #7a2f1f;
  --igds-color-link: #1f3275;
  --igds-color-link-hover: #152250;
  --igds-heritage-saffron: #f39b3d;
  --igds-heritage-green: #246b3f;
}

Multilingual guidance

• Always set page lang correctly (en, hi, ta, bn, mr, etc.)
• For mixed-language content, set lang at phrase level
• Use concise service copy and avoid administrative jargon
• Keep action labels under 3 words where possible
• Validate forms in the same language used for input labels
• Self-host required Noto Sans language families for consistent rendering in kiosk and low-connectivity environments

Adoption guides

• Plain HTML / server-rendered
• React
• Vue
• Angular
• Django
• Ruby on Rails
• ASP.NET Core
• Spring Boot (Thymeleaf)
• Laravel

Run local example

npm run start
# open http://localhost:4173/examples/

Run help portal preview

• Home: http://localhost:4173/docs/help-portal/
• Components docs: http://localhost:4173/docs/help-portal/components.html
• Styles docs: http://localhost:4173/docs/help-portal/styles.html
• Adoption docs: http://localhost:4173/docs/help-portal/adoption.html
• Patterns docs: http://localhost:4173/docs/help-portal/patterns.html
• Accessibility docs: http://localhost:4173/docs/help-portal/accessibility.html

Run accessibility audit

npm run a11y:audit

This static audit now scans:

• help portal and examples (.html)
• framework starter templates (.html, .cshtml, .erb, .blade.php, .vue)

Run browser accessibility tests

npm run a11y:e2e

Combined command:

npm run a11y:all

a11y:e2e uses npx to fetch Playwright + axe packages on demand.