Dbim Brand Identity

Digital Brand Identity Manual (DBIM) v3

Overview

DBIM v3 (January 2025) is issued by the Digital Governance Division, MeitY, with NIC's Web Technology Division. It is the visual-identity rulebook for Government of India digital platforms: colours, icons, typography, logo, imagery, content, accessibility, search, performance — plus appendices for websites, forms, social media, mobile apps, CIO responsibilities and a compliance matrix.

This skill was built from the manual's own text — 177 pages, read from the official flipbook at dbimtoolkit.digifootprint.gov.in/dbim-flipbook/index.html. The manual is Government of India material and is not redistributed here; run scripts/fetch-dbim-manual.py to reconstruct dbim-v3-manual-full-text.txt locally, then grep it before asserting anything this skill doesn't cover.

Core principle: DBIM governs how it looks. GIGW 3.0 governs what must be on the page. UX4G gives you components. Only WCAG carries legal penalties in India.

Scope — who this actually binds

DBIM is written for Government of India platforms: central ministries, departments, attached organizations, authorities, PSUs, banks, institutes, regulatory bodies.

A state government or state corporation is not in scope. Following DBIM there is defensible and usually a good idea; claiming it is mandatory for a state entity is wrong. (See indian-gov-web-ui for the state-level picture.)

Colours

Primary palette — pick exactly one group

§2.1, verbatim requirements:

• Only one colour group must be selected from the primary palette
• It should best represent the organization's primary functions and objectives
• If the entity has an established brand colour, the group should complement it
• Colour usage must ensure accessibility
• The selected colour group is mandated for digital platforms only — not print
• Gradients of any two variants from the selected group are permitted

⚠️ The primary palette itself is Figure 1 — an image, so the group names and hex values are not in the manual's text layer. The authoritative list is the colour-plate picker in the DBIM Toolkit, which sits behind a government SSO login. Do not invent group names or hexes; if you need them, say they must be read off the Toolkit. 'Green' is the one group named in the text (as the Figure 2 gradient example).

The key colour of a group means its darkest shade. Two rules depend on this:

• Icons must be in the key colour or inclusive white (§3.7)
• The footer background must be the key colour of the selected group (compliance item 4)

Functional palette — fixed, verbatim from Table 1

Two things worth knowing:

• Body text is #150202, not #000000. Black is reserved for the State Emblem on light.
• The four status colours are exactly Bootstrap 5's success/warning/danger/primary. If you are on Bootstrap, they already match.
• The manual's text layer renders Deep Blue as #1DOA69 — that is an OCR artefact with a letter O. The value is #1D0A69.

Typography

Noto Sans is mandatory — and Noto Sans for all regional scripts (§4.2): Devanagari, Bengali, Gujarati, Gurmukhi, Kannada, Malayalam, Oriya, Tamil, Telugu.

Type scale — both tables are "must"

⚠️ DBIM's line height conflicts with WCAG — do not implement it literally

§4.3 iii, verbatim: "Line height should be 1.2 to 1.5 times the type size."

That floor is below what WCAG requires:

Following DBIM's 1.2 literally ships an accessibility violation, and on a regional-language site it also damages legibility in the primary language. Treat 1.2–1.5 as guidance for display headings; use 1.5 minimum for Latin body text and 1.7+ for Devanagari, applied by lang.

⚠️ Tailwind v4 note: text-base / text-sm etc. emit a line-height as well as a font-size, and utilities outrank @layer base — so a size utility on Devanagari content silently overrides the leading you set. Re-assert it at utility rank.

Application rules (§4.1.1)

• Body text must be left-aligned.
• Tables: text left-aligned, numbers right-aligned, column names centre-aligned.
• All-capital text must not be used for long sentences or paragraphs.
• Use real text, never images of text (WCAG 2.1 §1.4.5, GIGW 3.0 §5.2.16).
• Compliance item 13 also bars Hinglish in capital case.

Logo — the State Emblem and the four lockups

The State Emblem has two inseparable elements: Ashoka Stambh and "Satyameva Jayate". It must come from authorized sources, keep its ratio, and never be separated or manipulated.

Authorization is governed by The State Emblem of India (Regulation of Use) Rules, 2007 (MHA). Which lockup you use follows from whether you are authorized:

Logo usage (§5.5): accurate logos only · never scaled disproportionately · JPEG/JPG, PNG, SVG or WEBP only · under 100 KB.

Colour variation: on a white background, use the black State Emblem; on dark, use inclusive white.

Header anatomy (§5.4)

Two content types:

Fixed — engagement bar (search) · user controls (skip to main content, language selection, accessibility controls) · global navigation menu.

Dynamic — organization name via the correct lockup (name switches to Hindi/other language on selection) · co-branding section, maximum 2 logos · Login/Register where there is a post-login workflow.

Three header variants map 1:1 onto the lockups:

Footer (§5.6)

Must contain: Website Policy (terms of use, privacy, hyperlink, copyright) · Sitemap (at least 2 levels) · Related Links · Help (FAQs, screen reader access, accessibility help, site certificates) · Feedback · Last Updated On (the real content-update date of that page).

May also contain: Archives.

And per the compliance matrix: footer background = key colour of the selected group.

Icons (§3)

• Sizes: 24×24, 32×32, 48×48, 64×64 px — and these include 2px of surrounding padding
• Formats: PNG, WEBP or SVG only
• Colour: key colour (darkest shade) of the selected group, or inclusive white
• Never disproportionately scaled, compressed or stretched
• On an image/banner, maintain contrast — e.g. a black overlay at 80% transparency, then a white icon over it
• Source them from the Visual Library in the DBIM Toolkit; custom icons only if the kit lacks one, and must match the established style. Organizations may crowdsource icon banks back into the library

Imagery (§6)

• Generate a ≤100 KB thumbnail for every high-res photo, and let users view/download the original
• Resize, don't scale down — and optimize before publishing
• Formats: WEBP (photos, gradients, transparency) · PNG (lossless, transparency) · JPEG/JPG (photos, no transparency)
• Alt text ≤ 140 characters, meaningful, never starting "image of" / "picture of" (longer allowed for informative images)
• No third-party watermarks; obtain usage rights; get permission from prominently featured individuals
• Headshots: white background, subject facing camera, 1:1 ratio, face covering 50% of the container. Photo on the left of the page → subject faces right or centre; photo on the right → faces left or centre. Neutral or slight natural smile

Banner dimensions (§7.4, Central Content Publishing System)

These belong to the CCPS section — they are the sizes for centrally published content pulled via the DBIM Toolkit API, not a general banner spec.

Accessibility (§8)

DBIM defers to GIGW 3.0 (guidelines.gov.in) and cites the RPwD Act 2016 and the Accessible India Campaign. It restates POUR (Perceivable, Operable, Understandable, Robust) at a summary level only.

One concrete, easily-missed rule from §8.1:

Banner text must not be part of the image — it must be overlaid as HTML text.

For the WCAG criteria that actually carry legal exposure in India, use indian-gov-web-ui. DBIM's accessibility chapter is not a substitute for a conformance audit.

The DBIM Toolkit is a workflow app, not the spec

dbimtoolkit.digifootprint.gov.in is often confused with the manual. It is a Next.js compliance-workflow application that walks a ministry through onboarding:

website registration → pick colour palette → identify ministry personas →
restructure content → curate icons & media → set up teams →
upload → assign roles → approve → security audit → website migration

It also hosts the Visual Library (functional icons, banner images, persona illustrations) and a dbim_compliance_checklist. The asset libraries require a government SSO login — you cannot pull icons or banners from it anonymously.

The actual manual is the flipbook at /dbim-flipbook/.

Compliance matrix (Appendix F)

Two checklists: F.1 generic (all government organizations) and F.2 for Ministries (ministries, departments, attached organizations). Sections cover colours, iconography, typography, logo, imagery, content, forms and mandatory content directives — each item cross-referenced to the DBIM section it enforces.

Restructured checklist (46 generic + 34 ministry items, each cited to its DBIM section) → compliance-matrix.md

A few that catch people out:

• Footer background must be the key colour of the selected group
• Icons must be PNG/SVG/WEBP at 24/32/48/64px
• Ministerial images and officer listings arranged by seniority
• Titles (Dr., Shri, Smt., Mr., Ms.) used uniformly
• Documents/presentations/brochures uploaded as accessible PDF — no editable formats
• Date format: day before month
• Content accuracy through a multi-level CMS workflow (at least 2 levels)
• Forms: instructions at the start · keyboard-friendly · mandatory fields marked * or "Required" alongside the label · labels must be clickable

Common mistakes

Related skills

• indian-gov-web-ui — GIGW 3.0 page requirements, WCAG legal exposure, Devanagari
• ux4g-design-system — the component library used to build DBIM-conformant UI
• gov-service-patterns — citizen service flows

Reference files

• compliance-matrix.md — Appendix F restructured as a working review checklist
• dbim-v3-manual-full-text.txt — the complete manual text, page-marked. Not bundled (Government of India material). Generate it once with:

  python3 scripts/fetch-dbim-manual.py
  

  Then grep it before asserting anything this skill doesn't cover.