1. Executive Summary & Statutory Background
The Digital Brand Identity Manual (DBIM) is the official design framework established by the Ministry of Electronics and Information Technology (MeitY), Government of India, to standardize the user interface (UI), visual identity, and user experience (UX) across all Central Government ministries, state departments, apex statutory bodies, and autonomous public entities.
While the Guidelines for Indian Government Websites and Apps (GIGW 3.0) define the overarching governance, accessibility, security, and quality assurance benchmarks, the DBIM serves as the mandatory visual and architectural overlay. It enforces a standardized visual language so that Indian citizens, enterprise stakeholders, and international visitors experience a seamless, trustworthy, and predictable digital public infrastructure.
Policy & Standards Hierarchy
MeitY Digital India Initiative • GIGW 3.0 Quality Framework • W3C WCAG 2.1/2.2 Level AA • STQC Website Quality Certification
| Framework Dimension | DBIM Specification | GIGW 3.0 Cross-Reference |
|---|---|---|
| Statutory Authority | Ministry of Electronics and Information Technology (MeitY) | Clause 1.2 — Regulatory Scope and Applicability |
| Primary Purpose | Unified visual branding, typography, UI components, and design system | Chapter 6 — Design & User Experience Requirements |
| Accessibility Baseline | W3C WCAG 2.1 Level AA • Contrast Ratio ≥ 4.5:1 | Clause 5.1 — Digital Inclusivity & Assistive Tech |
| Certification Body | Standardization Testing and Quality Certification (STQC) | STQC Website Quality Certification Program |
| Component Toolkit | DBIM Design System (HTML/CSS, React, Figma UI Kits) | Available via dbimtoolkit.digifootprint.gov.in |
2. Standard DBIM Header Architecture
The DBIM header is designed with a strict visual hierarchy divided into two core layers: the Top Engagement & User Controls Bar and the Primary Brand & Navigation Zone.
Layer A: Top Engagement & Accessibility Bar
The top bar must be fixed at the extreme upper edge of every viewport and host universal assistive controls:
- Skip to Main Content: A mandatory keyboard bypass mechanism targeting
#main-content, visible on keyboardTabfocus. - Language Switcher: Direct toggle between English and Hindi, with scalable integration for the 22 Eighth Schedule languages (integrated with the Bhashini Digital India Language Initiative).
- Text Size Adjuster: Client-side font scaling controls providing A- (Decrease, 90%), A (Standard, 100%), and A+ (Increase, 110%).
- High Contrast Toggle: Reversible high-contrast mode switch (yellow-on-black or white-on-dark) meeting WCAG AAA requirements.
- Screen Reader Access: Clear indicator or link to screen-reader accessible portals.
Layer B: Brand Lockup & National Identity
The primary branding strip guarantees immediate government attribution and authenticity:
<!-- DBIM Standard Brand Lockup Pattern -->
<div class="dbim-header-brand d-flex align-items-center gap-3">
<img src="/assets/emblem/state-emblem-india.svg"
alt="State Emblem of India"
class="dbim-national-emblem"
height="60">
<div class="dbim-title-group">
<span class="dbim-ministry-name-hi" lang="hi">इलेक्ट्रॉनिकी और सूचना प्रौद्योगिकी मंत्रालय</span>
<span class="dbim-ministry-name-en">Ministry of Electronics and Information Technology</span>
<h1 class="dbim-portal-title fs-5 fw-bold mb-0 text-dark">National Cyber Resilience Portal</h1>
</div>
</div>
Layer C: Global Navigation & Search Integration
- Hierarchical Navigation: Level 1 (Primary Category), Level 2 (Section), and Level 3 (Action Page). Megamenu drawers must close on
Esckey and retain proper ARIA expanded states (aria-expanded="true/false"). - Global Search: Predictive search input with autocomplete, voice search capability, and minimum touch target size of 44×44 px.
- Mobile Hamburger Navigation: Off-canvas drawer sliding from the left, trapping keyboard focus when open and restoring focus upon closure.
3. Standard DBIM Footer Anatomy & Disclosures
The DBIM footer acts as the definitive statutory repository of government ownership, lineage, legal disclosures, and certification seals.
| Footer Zone | Mandatory Components | Audit Requirement |
|---|---|---|
| Zone 1: Essential Links |
|
All links must be active; zero 404 dead ends or placeholder hash (#) anchors permitted. |
| Zone 2: Lineage & Disclaimers |
Ownership Clause: "This website belongs to [Ministry/Department Name], Government of India. Designed, developed, and hosted by National Informatics Centre (NIC)." |
Exact statutory attribution matching administrative sanction orders. |
| Zone 3: Compliance Seals | STQC Certified GIGW 3.0 W3C WAI AA | Seals must link directly to official verification certificates with certificate issue and validity dates. |
| Zone 4: Operational Data | Last Updated: [DD/MM/YYYY] • Total Visitors: [Live Counter] | Date format must be DD-MM-YYYY; automatic timestamp updates on content releases. |
4. Design System: Colors, Typography & Micro-Interactions
A. Typography Hierarchy (Unicode & Multilingual)
DBIM mandates open-source, high-legibility Unicode fonts to ensure consistent rendering across all desktop and mobile operating systems:
- Latin / English:
Noto Sans,Inter, or system-native sans-serif stacks. - Devanagari / Indic Regional:
Noto Sans Devanagari,Noto Sans Tamil,Noto Sans Bengali, etc., guaranteeing zero glyph clipping on vowel signs (matras). - Monospace / Data:
JetBrains MonoorConsolasfor application numbers, PIN codes, hashes, and technical audit data.
B. Color & Contrast Guidelines
Primary Slate (#0f172a)
Secondary Charcoal (#334155)
Light Neutral (#f8fafc)
Mandatory Ratio: Normal body text must achieve a minimum contrast ratio of 4.5:1 against its background. Large headlines (≥ 18pt or 14pt bold) and active UI borders must maintain at least 3.0:1.
5. Comprehensive DBIM Audit Checklist (STQC Verification Matrix)
Use this 20-point actionable matrix before submitting any government website or citizen portal for STQC Website Quality Certification:
| # | Audit Category | Verification Checkpoint | Compliance Standard |
|---|---|---|---|
| 01 | National Emblem | State Emblem of India displayed on the left of the header lockup without distortion, stretching, or alteration. | Mandatory |
| 02 | Organization Lineage | Both Ministry and Department names displayed bilingual (Hindi in Devanagari script above English). | Mandatory |
| 03 | Skip Navigation | First focusable element on keyboard Tab is "Skip to Main Content" targeting #main-content. |
WCAG 2.4.1 |
| 04 | Accessibility Toolbar | Font size changers (A-, A, A+) and High-Contrast mode toggle functional across all templates. | Mandatory |
| 05 | Language Selection | Seamless switching between English and Hindi; Indic regional language support powered by Bhashini APIs. | Mandatory |
| 06 | Breadcrumb Trails | Every page deeper than the homepage provides a structured breadcrumb with schema.org/BreadcrumbList. |
WCAG 2.4.8 |
| 07 | Search Integration | Header hosts an active search bar that indexes all documents, circulars, tenders, and notifications. | Mandatory |
| 08 | Mobile Responsive | Viewport adapts gracefully between 320px and 2560px without horizontal scrollbars or touch overlap. | WCAG 1.4.10 |
| 09 | Touch Targets | All interactive buttons, icons, and links have minimum hit targets of 44×44 CSS pixels. | WCAG 2.5.5 |
| 10 | Color Contrast | All text content maintains a minimum contrast ratio of 4.5:1 (normal) and 3.0:1 (large headers). | WCAG 1.4.3 |
| 11 | Typography & Fonts | Noto Sans, Inter, or approved Unicode font stacks loaded with font-display: swap. | DBIM Standard |
| 12 | Footer Ownership | Explicit ownership statement designating administrative ministry and technical provider (NIC). | Mandatory |
| 13 | Mandatory Policies | Dedicated, active pages for Privacy Policy, Terms & Conditions, Copyright, and Hyperlinking Policy. | GIGW Clause 4.2 |
| 14 | Help & Grievances | Links to National Grievance Portal (CPGRAMS), citizen charters, and active contact desks. | Mandatory |
| 15 | Site Maps | Both a human-readable HTML sitemap and a machine-readable XML sitemap (/sitemap.xml). |
Mandatory |
| 16 | Last Updated Date | Clear timestamp stating the last content review date on every operational page. | Mandatory |
| 17 | Emergency Helplines | Public service portals feature the national emergency helpline strip (112, 108, 1090, 1098). | Citizen Standard |
| 18 | SSL / TLS Security | Enforced HTTPS over TLS 1.2 / TLS 1.3 with HSTS header enabled across all subdomains. | CERT-In VAPT |
| 19 | Zero Dead Links | Automated link crawl reveals zero 404 links, zero placeholder anchors (href="#"), and zero dummy text. |
Mandatory |
| 20 | STQC Certified Seal | Valid STQC Quality Certificate seal linked to verification certificate on STQC portal. | Certification |
6. Frequently Asked Questions (FAQs) on DBIM Compliance
GIGW 3.0 (Guidelines for Indian Government Websites and Apps) is the comprehensive policy standard governing accessibility, security (CERT-In safe-to-host audit), content quality, lifecycle governance, and mobile app compliance. DBIM (Digital Brand Identity Manual) is the specific visual and UI/UX design specification within GIGW. While GIGW defines what must be achieved functionally and legally, DBIM provides the standardized design components, header/footer anatomy, logo lockups, and typography rules showing how it must look visually.
DBIM compliance is mandatory for all Central Government Ministries, Departments, Subordinate Offices, State Government Portals, Union Territory Administrations, Public Sector Undertakings (PSUs), and autonomous government institutions operating on
.gov.in or .nic.in domains.
Developers can access the official guidelines, Figma design kits, CSS component libraries, and HTML/React snippets via the official portal at
dbimtoolkit.digifootprint.gov.in managed by MeitY and the National Informatics Centre (NIC).
No. While internal page layouts, thematic dashboards, and functional citizen utilities can be customized according to departmental requirements, the top engagement bar, brand lockup structure, and universal footer must strictly adhere to the DBIM architecture. Divergence will result in STQC certification audit failure.
The State Emblem of India must be positioned on the extreme left of the brand lockup. It must comply with the State Emblem of India (Prohibition of Improper Use) Act, 2005. It cannot be combined with unofficial logos, recolored in non-approved tints, scaled disproportionately, or used as a background watermark. The approved formats are high-resolution SVG or vector graphics with transparent backgrounds.
DBIM requires bilingual primary branding (Hindi and English) as default. For multilingual citizen services, portals must integrate with the Digital India Bhashini ecosystem to support translation into Eighth Schedule languages. All chosen webfonts must be open-source Unicode fonts (such as Noto Sans Indic variants) that avoid character corruption or missing glyphs.
The Standardization Testing and Quality Certification (STQC) Directorate under MeitY conducts third-party conformity assessments. STQC evaluates functional design, accessibility compliance (WCAG 2.1 AA), and adherence to DBIM visual standards before issuing the official Website Quality Certification, which is required prior to safe-to-host production rollout.
DBIM's strict prohibition of intrusive interstitials, floating popups over navigation, and cluttered banners directly aligns with the Better Ads Standards and Google Publisher Policies. Ad units must be cleanly isolated, explicitly labeled with "Advertisement", and separated from interactive navigation and user controls to prevent accidental clicks.
Advertisement
WE
WebOTG Standards Directorate
Chief Standards Architect
WebOTG provides benchmark reference documentation, automated matrix evaluators, and security test harnesses for government digital platforms, WQMS architectures, and STQC compliance frameworks.