Indian Gov Web Ui

---
name: indian-gov-web-ui
description: Use when building or reviewing a UI for an Indian government website, portal, or admin panel — covers GIGW 3.0, DBIM v3.0, UX4G, and the WCAG criteria that are statutory in India. Triggers include gov.in sites, state government portals, PSU/महामंडळ sites, bilingual Hindi/Marathi/regional government content, and staff-facing admin panels for government content.
---

# Indian Government Web UI

## Overview

Indian government web UI is governed by three documents that do different jobs:

| Document | What it governs | Binding? |
|---|---|---|
| **GIGW 3.0** | *Required content and behaviour* — what must be on a page | **Mandatory** for Central + State government sites at any level. ⚠️ **Intranet applications are "recommended", not mandated** (see `gigw-requirements.md` Scope) — but that is not a WCAG exemption |
| **DBIM v3.0** | *Visual identity* — palette, type scale, header/footer/homepage anatomy | Written for **Government of India** platforms. **Voluntary** for a state government or state corporation |
| **UX4G** | *Component library* — v2 is a Bootstrap 5 fork, v3 is a rewrite | **Advisory only.** Binds solely when written into a procurement SoW/TOR. No official React package exists |

**Core principle:** GIGW tells you what must exist, DBIM tells you what it should look
like, UX4G gives you components. Only WCAG will get you fined.

### Which WCAG version are you actually building to?

Four different standards get cited in this space. Resolve it explicitly at project start:

| Source | Says |
|---|---|
| **GIGW 3.0 §5.2** | WCAG **2.1** Level AA |
| ***Pragya Prasun* direction (ix)** | WCAG **2.0** Level AA |
| SC 2.5.7 (dragging) | WCAG **2.2** — *not in force in India* |
| Draft RPwD Rules 2026 | **IS 17802** Parts 1 & 2 |

**Recommended default: build to WCAG 2.1 AA.** It is what GIGW 3.0 adopts, it is a strict
superset of the 2.0 AA the court direction cites, and it is what IS 17802 is aligned to.
Treat 2.2-only criteria (like 2.5.7) as *good practice you should still follow*, not as
current legal exposure.

### ⚠️ The line-height trap — DBIM contradicts WCAG

- **DBIM §4** prescribes line height **1.2–1.5 ×** type size.
- **WCAG 1.4.12** (which GIGW adopts) requires text to remain readable at line height
  **≥ 1.5 ×**.
- **Devanagari** needs **≥ 1.7** — matras and conjuncts collide below that.

**Implementing DBIM's 1.2 floor literally ships a WCAG violation.** Use **1.5 minimum for
Latin body text and 1.7+ for Devanagari.** DBIM's lower bound is for display headings only.

## When to Use

- Building or restyling any `*.gov.in` / `*.nic.in` site, state portal, district site,
  ministry site, PSU or महामंडळ site
- Building a **staff-facing admin panel** for government content (the WCAG bar is the
  same — see `admin-patterns.md`)
- Bilingual or multilingual government content (Hindi / Marathi / regional)
- Reviewing an existing government site for compliance
- Someone cites "GIGW", "DBIM", "UX4G", "S3WaaS", or "STQC certification"

**Not for:** commercial sites, or non-Indian government sites (use GOV.UK / USWDS).

## The five things people get wrong

1. **GIGW 3.0 does NOT require breadcrumbs.** Zero occurrences in the official PDF. It
   requires "link to the homepage" + "link to the parent section" (§5.1.18). Breadcrumbs
   are a *convention that satisfies that*, not a mandate. Don't cite GIGW for breadcrumbs.
2. **GIGW 3.0 does NOT mandate an `अ- अ अ+` accessibility toolbar.** What is mandated is
   WCAG **1.4.4 Resize text to 200%**. The visible widget is a de-facto Indian convention
   (and DBIM does list "accessibility controls" as a header user-control). Build it because
   every peer site has it, not because GIGW says so.
3. **DBIM is Government-of-India-scoped.** §1.2 says "the Government of India's digital
   platforms"; its lineage examples are Central Ministry / Central Department / GoI PSU. A
   *state* corporation is not covered. Following it is defensible; claiming it is mandatory
   is wrong.
4. **DBIM's "Green" group is a deep teal `#0F5757`**, not a leaf green. People pick it
   expecting green.
5. **An admin panel is not exempt from WCAG.** See `admin-patterns.md` — SC 3.3.4 applies
   squarely to any UI that edits or deletes stored data.

## Quick Reference

### GIGW 3.0 — the homepage minimum (§5.1.18, verbatim list)

Organisation name · State Emblem/logo · About · links to all major modules · links to all
citizen services · Contact us · Feedback · **link to india.gov.in** · Search/Sitemap ·
Terms & conditions.

**Every other page:** self-explanatory title · link to homepage · link to parent section ·
**ownership** · link to Contact us.

Full list of GIGW clauses → `gigw-requirements.md`

### DBIM v3.0 — type scale (desktop / mobile)

**H1 36/24 · H2 24/20 · H3 20/16 · Body ("Paragraph 1") 16/14 · Small ("Paragraph 2")
14/12 · Caption 12/10.**

Noto Sans is **mandatory**, including Noto Sans Devanagari. Body text `#150202` (Deep
Earthy Brown), **not** pure black. Line height: see the trap above — **1.5 min Latin,
1.7+ Devanagari**, not DBIM's 1.2 floor.

Full scale table, palette hexes, iconography, header/footer/homepage anatomy →
`dbim-visual-spec.md` **(that file is the single source of truth for these values)**

### UX4G — see the `ux4g-design-system` skill

Full token API, the 52 components, install paths and interop hazards now live in the
dedicated **`ux4g-design-system`** skill, built from the shipped CSS rather than from docs.
Only the facts you need at *this* level are kept here:

- **Two incompatible systems are live.** v2.0.8 is a **Bootstrap 5 fork** with unprefixed
  classes (`.btn`, `.card`) that **will collide**; v3.0.18 is a complete rewrite, namespaced
  `.ux4g-*`. Establish which one someone means before discussing it.
- **UX4G's own `llms-full.txt` documents token names that do not exist.** 19 of 24 are
  fictional (`--ux4g-space-md`, `--ux4g-shadow-sm`, `--ux4g-color-primary`, …). CSS custom
  properties fail silently. Never copy a token name from their AI docs.
- **v3 has a bare, unscoped `:focus {}`** in `components/button.css:46` that restyles focus
  page-wide, and a `:where(*)` reset that zeroes margin/padding/border/outline on every
  element. Do not drop it into an existing app unaudited.
- **npm `ux4g-web-components@1.0.2` ships v3** — that is a packaging version, not the
  design-system version. Its CSS is one **8,000,505-byte** file. `ux4g-react`,
  `@hopline/ux4g-react`, `ux4g-ui` are **third-party impostors**; no official React package
  exists.

Structural scales worth matching even if you don't install it:
spacing `--ux4g-space-1…16` = **2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 120, 360px** ·
radius 0, 2, 4, 8, 12, 16, 24, 999px · breakpoints **576 / 768 / 992 / 1200 / 1400** ·
containers **540 / 720 / 960 / 1140 / 1320px** · gutter **12px** ·
z-index dropdown 1000 → toast 1090.

### UX4G is advisory — it carries no legal force

From UX4G's own FAQ, verbatim: *"Does using the Design System make my site WCAG/GIGW
compliant automatically? **No.** … A final accessibility and quality audit is required."*
Its procurement answer confirms the mechanism: it binds **only** when a department writes
it into the SoW/TOR. So UX4G is a **procurement** question, not a WCAG-exposure one.

### The UX4G accessibility widget — check which build you are getting

Two different builds are live, and they behave differently. **Verified 30 Jul 2026:**

| | `tools/accessibility-widget.js` | `accessibility-v3.28/accessibility-widget.js` |
|---|---|---|
| Size / version | ~71 KB, v2.22.0 | ~239 KB, 1.163.341 |
| TTS language | **Hardcoded — no `navigator.language`, no `getVoices()`** | Uses `navigator.language` **and** `getVoices()` |
| Indian languages | none | **only `hi` / `hi-IN`** |

`ux4g.gov.in` itself now loads the **v3.28** build.

1. **The language defect is fixed in v3.28, but only for Hindi.** It resolves voices
   properly, yet `hi`/`hi-IN` are the only Indian language codes in the file. On a Marathi,
   Tamil or Bengali site there is still no matching voice — verify behaviour before
   promising screen-reading in a regional language. The older `tools/` build has no
   language detection at all; don't cite its defect against the current one.
2. **Dyslexia mode ships a Latin-only font** — no Devanagari coverage.

It is also a **runtime third-party CDN dependency**, which sits awkwardly against
India-hosting/CERT-In posture and needs a CSP allowance. Self-host it for production.

### The section stack that reads as "a government portal"

Verified across india.gov.in, mygov.in, maharashtra.gov.in, tribal.maharashtra.gov.in,
tribal.nic.in, nashik.gov.in:

```
utility strip   — skip links, screen-reader page, अ- अ अ+, contrast, language, search
header          — emblem left · bilingual two-line title · india.gov.in/Digital India right
nav bar         — horizontal, dropdowns, active item underlined
carousel        — full-bleed photographic (DBIM: 1800×338 / ×500 / ×600)
ticker          — "latest" marquee OR a ~10-item list with More…
leadership      — portrait row. NON-OPTIONAL in this genre
icon tile grid  — flat icon-above-label, 8–29 tiles
statistics      — big numbers (national portals overlap a white card onto the hero)
photo gallery
footer          — policies · Last Updated (real date) · content-owned-by · developed-by
```

**Leadership ladder:** CM → Dy CM → Dy CM → Minister → MoS → Secretary. A corporation
appends Chairman → MD.

### Marathi UI strings

**Established on real Maharashtra government sites — reuse these verbatim, don't invent:**

| English | Marathi | Seen on |
|---|---|---|
| Skip to navigation | `दिशादर्शकाकडे जा` | tribal.maharashtra.gov.in |
| Skip to content | `विषयाकडे जा` | tribal.maharashtra.gov.in |
| Font size controls | `अ- अ अ+` (5 steps: `अ--` `अ-` `अ` `अ+` `अ++`) | tribal.maharashtra.gov.in |
| High contrast | `प्रखर दृश्य` | tribal.maharashtra.gov.in |
| Low/normal contrast | `सौम्य दृश्य` | tribal.maharashtra.gov.in |
| Last updated | `शेवटचे अद्ययावत` / `शेवटचे पुनरावलोकन` | maharashtra.gov.in |
| Visitor count | `दर्शक सारांश` | maharashtra.gov.in |
| Latest news | `ताज्या बातम्या` / `नवीन बातम्या` | tribal.maharashtra.gov.in |
| Photo gallery | `छायाचित्र दालन` | tribal.maharashtra.gov.in |

**Admin/form strings — no established government source found. These are reasonable
translations; get them reviewed by a Marathi speaker before shipping:**

| English | Marathi |
|---|---|
| Error: *(visually-hidden prefix)* | `त्रुटी:` |
| There is a problem *(error summary heading)* | `एक अडचण आहे` |
| Save | `जतन करा` |
| Discard | `बदल रद्द करा` |
| Unsaved changes | `जतन न केलेले बदल` |
| Leave page | `पान सोडा` |
| Saved | `जतन केले` |
| Publish | `प्रकाशित करा` |
| Preview | `पूर्वावलोकन` |
| Opens in a new window | `नवीन विंडोमध्ये उघडते` |

⚠️ Never machine-translate statutory or constitutional text. Translating an interface
label is fine; translating a legal definition or a scheme's eligibility rule is not.

## The WCAG criteria that actually bite in India

| SC | Level | Why it matters here |
|---|---|---|
| **1.4.3** Contrast | AA | 4.5:1 text. The most-failed criterion on Indian gov sites. |
| **1.4.4** Resize text 200% | AA | The real requirement behind the `अ- अ अ+` widget. |
| **1.4.10** Reflow | AA | **A fixed bottom save bar can fail this at 400% zoom** — apply W3C technique C34. |
| **3.3.1 / 3.3.3** Error id + suggestion | A / AA | Use the GOV.UK error-summary pattern. |
| **3.3.4** Error Prevention (Legal, Financial, **Data**) | AA | Covers any UI that "modifies or deletes user-controllable data" — **your admin panel**. Needs Reversible **or** Checked **or** Confirmed. |
| **4.1.3** Status Messages | AA | A "Saved" toast must be `role="status"`; errors `role="alert"`. |
| **2.5.7** Dragging | AA — **WCAG 2.2 only, NOT in force in India** | Drag-to-reorder needs a non-drag alternative. Ship up/down buttons anyway: **SC 2.1.1 Keyboard (A) does apply**, and they cost nothing. |

**Legal context (verify before citing):**
- ***Pragya Prasun v. Union of India*, 2025 INSC 599** (30 Apr 2025) — the direction that
  mandates compliance is **(ix)**, which cites **WCAG 2.0 Level AA** and Rule 15 expressly.
  Direction (xiii) is the guideline-framing direction. Don't swap them.
- **CCPD, Feb 2025** — ~155 institutions fined ₹10,000 each *suo motu* under s.89 RPwD for
  inaccessible websites; 96 repeat offenders escalated to ₹50,000. Widely corroborated in
  secondary sources; **the primary order is hard to retrieve — don't name specific
  institutions without it.**
- **Draft RPwD (Amendment) Rules 2026** — S.O. 3962(E), 16 Jul 2026. Would mandate
  **IS 17802 Parts 1 & 2** and a machine-readable **Accessibility Conformance Report**
  re-tested every 2 years. **Draft — verify against the Gazette before relying on it.**

## Devanagari gotchas

- **Line height ≥ 1.7 for Devanagari body text.** Matras and conjuncts collide at Latin
  line heights. This is legibility, not taste.
- **Character counters and `maxlength` must count grapheme clusters** via
  `Intl.Segmenter`, not `String.length`. `क्ष्म` is one visual character and several code
  points; naive truncation produces nonsense.
- **Never machine-translate statutory or constitutional text.** Translating a verified
  fact is fine; inventing one is not. Where no source translation exists, say so visibly
  rather than generating one.
- Set `lang` correctly — `lang="mr"` on Marathi content. Every state site examined ships
  `lang="en-IN"` on Marathi pages. Do not copy that.

## Common Mistakes

| Mistake | Reality |
|---|---|
| "GIGW requires breadcrumbs" | It doesn't. It requires links to home + parent. |
| "DBIM is mandatory for us" | Only if you are a GoI body. State entities: voluntary. |
| "Import UX4G for compliance" | Their own FAQ says it does **not** confer WCAG/GIGW compliance. The npm CSS is one 8 MB file, and it ships a page-wide `:focus` override and a global reset. |
| Copying `--ux4g-*` names from UX4G's `llms.txt` | 19 of 24 documented token names don't exist in the shipped CSS. They fail silently. Use `ux4g-design-system`. |
| "Admin panels don't need WCAG" | SC 3.3.4 targets data-editing UIs specifically. No exemption exists. |
| Fabricating a visitor counter | Genre convention, but a made-up number on a government site is indefensible. maharashtra.gov.in links `दर्शक सारांश` with **no number** — copy that if you have no data. |
| Copying peer sites' defects | maharashtra.gov.in ships 4.66 MB of base64 images and `lang="en-IN"` on Marathi; tribal.nic.in gives 7 carousel slides the identical alt text. These are failures, not conventions. |
| Emoji as icons | DBIM constrains icons to 24/32/48/64px in PNG/SVG/WEBP. Use a real icon set. |

## Related skills

This skill is the **umbrella**: it answers "what must be on the page" and "what will get us
fined". Three companion skills go deeper, each built from downloaded primary sources:

| Skill | Use it when |
|---|---|
| **`ux4g-design-system`** | Implementing with UX4G — the real token API, 52 components, install paths, interop hazards |
| **`dbim-brand-identity`** | Applying GoI visual identity — colours, Noto Sans, State Emblem lockups, header/footer, compliance matrix. Carries the full 177-page DBIM v3 manual text |
| **`gov-service-patterns`** | Designing a citizen service flow — 78 patterns, 209 screen states, incl. the failure/lockout/expiry states teams forget |

Routing rule: **content and legal → here · look → `dbim-brand-identity` · code →
`ux4g-design-system` · flow → `gov-service-patterns`.**

## Reference files

- `gigw-requirements.md` — GIGW 3.0 clause-by-clause, with verbatim quotes
- `dbim-visual-spec.md` — DBIM v3.0 palette, iconography, header/footer/homepage anatomy
- `admin-patterns.md` — admin/CMS patterns + the WCAG case for staff-facing tools