Dbim Brand Identity

---
name: dbim-brand-identity
description: Use when applying the Government of India's Digital Brand Identity Manual (DBIM) v3 to a website, portal, form, mobile app or social media asset — colours, Noto Sans typography, State Emblem logo lockups, header/footer anatomy, imagery specs, content lifecycle and the compliance checklist. Triggers include "DBIM", "Digital Brand Identity Manual", dbimtoolkit.digifootprint.gov.in, "logo lockup", "State Emblem", GoI ministry/department site branding, or a compliance audit against DBIM.
---

# 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

| Name | Hex | Use |
|---|---|---|
| Linen | `#EBEAEA` | Background to highlight images; background for quotes/attention text; outlines to boxes and components |
| Inclusive (white) | `#FFFFFF` | Primary page background; headshot background; text and icons on dark; State Emblem on dark; cookie-consent banner background |
| Deep Earthy Brown | `#150202` | **Body text on light backgrounds** — not pure black |
| Black | `#000000` | State Emblem of India on light backgrounds |
| Deep Blue | `#1D0A69` | Identity colour of the Gov.In root website |
| Liberty Green | `#198754` | Status: success |
| Mustard Yellow | `#FFC107` | Status: warning |
| Coral Red | `#DC3545` | Status: error |
| Blue | `#0D6EFD` | Status: information; hyperlink colour, in addition to the selected group's key colour |
| Grey 01 / 02 / 03 | `#C6C6C6` / `#8E8E8E` / `#606060` | Functional greys |

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"

| Scale | Weights | Desktop | Mobile |
|---|---|---|---|
| Heading 1 | Bold / Semi Bold / Medium | **36px** | **24px** |
| Heading 2 | Bold / Semi Bold / Medium | **24px** | **20px** |
| Heading 3 / Subtitle | Bold / Semi Bold / Medium | **20px** | **16px** |
| Paragraph 1 | Bold / Regular | **16px** | **14px** |
| Paragraph 2 | Bold / Semi Bold / Regular | **14px** | **12px** |
| Small Text 1 | Semi Bold / Regular | **12px** | **10px** |

### ⚠️ 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**:

| Source | Requires |
|---|---|
| DBIM §4.3 iii | 1.2 – 1.5 × |
| **WCAG 1.4.12 Text Spacing (AA)** — adopted by GIGW 3.0 | text must stay readable at **≥ 1.5 ×** |
| Devanagari legibility | **≥ 1.7 ×** — matras and conjuncts collide below this |

**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:

| Lockup | Who uses it |
|---|---|
| **1** | Government of India (Bharat Sarkar). Bilingual — Hindi (भारत सरकार) + one other official language. *Style 1* centred (document covers); *Style 2* left-aligned right of the emblem (**website headers**, apps, social) |
| **2** | Central Ministries and Departments — emblem + "Government of India" + ministry/department name, single language |
| **3A** | Other government organizations **allowed** to use the State Emblem — emblem + org logo + name, single language. Tagline may sit below the name |
| **3B** | Organizations **not allowed** to use the State Emblem — org logo + name only |

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:

| Header | For | Uses | Extras |
|---|---|---|---|
| 1 | Central Ministries & Departments | Lockup 2 | search bar, co-branding logo slot, user controls, global nav |
| 2 | Other orgs **allowed** the Emblem | Lockup 3A | *highlighted* search bar, marquee-event logo slot, user controls, global nav, **profile icon** |
| 3 | Orgs **not allowed** the Emblem | Lockup 3B | *highlighted* search bar, centrally-published marquee logos, user controls, global nav, **profile icon** |

## 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)

| Image type | Max size |
|---|---|
| Background images | 500 KB |
| Banners and header images | 500 KB |
| Thumbnail images | 100 KB |
| High-resolution photographs | 5 MB |

- 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)

| Banner type | Dimensions (px) |
|---|---|
| Full-width | **1800×338**, **1800×500**, **1800×600** |
| Short-width | **320×245**, **640×245** |
| Centrally-pushed posts | **960×245** |

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

| Mistake | Reality |
|---|---|
| "DBIM applies to our state portal" | DBIM is GoI-scoped. State entities: voluntary |
| Body text in `#000000` | Body text is Deep Earthy Brown `#150202`. Black is for the Emblem on light |
| Picking two primary colour groups | Exactly one. Gradients only between two variants *within* it |
| Inventing primary-palette hexes | The palette is an image; the Toolkit picker is authoritative and needs SSO |
| Using the Emblem without checking authorization | Governed by the MHA Rules 2007 — it decides lockup 3A vs 3B |
| Baking banner headlines into the JPEG | §8.1 requires banner text as overlaid HTML |
| A fabricated "Last Updated" date | It must reflect real content update for that page |
| Treating the Toolkit as the manual | Toolkit = onboarding workflow; manual = the flipbook |
| More than 2 co-branding logos in the header | Maximum 2; others go in a dedicated logo section |

## 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:
  ```bash
  python3 scripts/fetch-dbim-manual.py
  ```
  Then grep it before asserting anything this skill doesn't cover.