Indian Gov Web UI

Indian Government Web UI

Overview

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

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:

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:

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:

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

⚠️ 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

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

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:

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