Documentation · the design
The ten sheets these screens were built from, rendered once from the design canvas and kept here as the record. The mark, the button family and the six surfaces come first; the eight screens after them are the prototype itself, which is where they are best tried. A department copies from the developer page; the argument for all of it is the direction. Drawn at desktop width — on a phone the sheets scroll sideways.
Meri Pehchaan 2.0 · concept redesign
One button, four tiers, and a citizen who can always see who has access.
Ten sheets, from the mark to the authenticator. Built on the government's own component library and its shipped tokens — purple #4a2bc2 structural, neutral for everything else, status hues for status only, radius 8, 44 and 48px targets, and the twelve languages the library's own switcher ships.
The mark — specification प्रतीक चिन्ह — विनिर्देश
Pehchaan Chakra · single colour · one continuous strokeTier required
None — the mark is pre-authentication furniture.
If the hub is down
Mark stays; it is a static SVG served with the relying page.
Who has access
Mark links to Who has access wherever it sits in a header.
Final
Pehchaan Chakra
A ring of ticks carrying the chakra's rhythm, and a fingerprint whorl that runs out of the centre, turns, and finishes at 12 o'clock where the twelfth tick would have been. Core and ring are one unbroken line.
- Why it is the mark: with colour prohibited, the nationality signal has to be geometric. Chakra rhythm plus a fingerprint is the only combination that carries both identity and nation, and drawing them as one stroke is what makes it a mark rather than an assembly.
- Legal: ticks, not spokes. No navy wheel, no emblem, no flag, no tricolour. Never describe it as the Ashoka Chakra.
- The two rejected directions — a Devanagari मे monogram and three arcs — are recorded in
PROMPTS.mdwith the reasoning. They are not part of the system.
Construction
The mark is drawn on a 24-unit canvas so it maps 1:1 onto the Material Symbols grid the component library already uses.
Measurements
All values in canvas units. One unit = 1/24 of the mark's height.
Clear space
The measure is x, the length of one tick — 2 units, or 1/12 of the mark's height. Keep 3x clear on all four sides. Nothing sets inside it: no rule, no wordmark, no edge of a card.
Inside a button the rule is tighter and fixed by the component: mark 20px, then 8px to the label, then the button's own 16px padding.
Minimum sizes
16px is the floor. Below it the whorl's ridges close up and the ring becomes a grey circle — use the wordmark on its own instead.
20px — inside a 48px button. This is the size the mark was drawn for.
16px — favicon and the tier chip. Absolute minimum.
24px — default in UI, matching the Material Symbols optical size.
Colour
The mark is single colour and inherits currentColor. There is no second-colour version, no tricolour version and no gradient version to fall back on — the four uses below are the whole set.
Lockups
Three lockups, no others. The gap between mark and wordmark is 4x — a third of the mark's height — at every size. The mark's box centres on the wordmark's line: its outer circle stands a little above the cap height, which is what makes the two read as the same size. The mock wordmark is MeriPehchān, with the macron.
Misuse
Six ways the mark stops being the mark. The first is the one that matters legally as well as visually.
DON'TRecolour it
Single colour, and only purple, neutral or the surface’s inverse. A status hue turns the mark into a status.
DON'TStretch it
Scale proportionally. The tick rhythm and the whorl only hold on a square canvas.
DON'TRotate it
The tail sits at 12 o’clock. Turning it breaks the one axis the mark is built on.
DON'TAdd effects
No shadow, no glow, no bevel, no gradient. The library's shadows are for surfaces, not for marks.
DON'TPlace it on low contrast
The mark needs 3:1 against its background. Purple on purple is decoration, not a mark.
DON'TEnclose it
No ring, badge or container around it. The mark already has a ring — a second one fights it.
The button बटन
3 variants × 7 states × EN/HI · md and lgTier required
Set by the relying service, never by the button. Copy stays the same at every tier.
If the hub is down
DEGRADED state: button disabled, note reads “Meri Pehchaan is busy — use OTP below.”
Who has access
Never named on the button. Sub-IdPs and “Powered by” are prohibited here.
Primary — the first action in the form's action row
Primary
Outline — secondary surface
Outline
Neutral-dark — #171717 fill, for dark or photographic surfaces
On a dark surface
Large — 48px, the library's large control height
Twelve languages
the set the library's own language switcher shipsEvery button below is 320px wide — narrower than a 360px phone screen with its margins. With the brand name off the label the strings are short, so none of them wrap now; the width is kept because the labels around them still can. The mark, the 8px gap and the 16px padding never move. The height starts at the 48px minimum and grows with the line box: English sits at 48px, one Indic line at line-height 1.8 makes it 55px. Nothing here wraps to a second line, and if a longer verb ever did, the button would grow rather than clip. It never truncates.
These translations are drafts. They are here to prove the layout holds in twelve scripts, not to be shipped. Every string needs a native reviewer before it goes near a citizen, and the brand name in particular is a transliteration decision, not a translation one.
Live
Hover, press and tab to it. This is the shipped button, not a state swatch.
Copy rules
- Formula: the verb alone — Sign in · Continue · Verify · Authorise. The mark carries the brand, so the label does not repeat it. This departs from
docs/05§5.1, which sets<verb> with Meri Pehchaan; the trade is a shorter, calmer button against a weaker cross-portal cue, and it should be tested before it is settled. - Never: “Login with”, “Powered by”, or any sub-IdP name on the button.
- Never: the verb without the mark. With the name gone, the mark is the only thing distinguishing this from “Send OTP”.
- Never: mark without label. The mark alone is a chip, not a button.
- Always:
aria-labelmirrors the visible text; the mark isaria-hidden; loading setsaria-busy.
The six surfaces छह सतहें
Everywhere the mark appears that is not a button01 · Tier chip
Tiers are purple depth, never a second hue. The label always names the tier, so status is never colour-alone.
02 · Pehchaan-filled field
Marked so the citizen knows which values came from the hub and can still edit them.
Filled by Meri Pehchaan · मेरी पहचान से भरा गया · Change
03 · Approve on phone
Number matching, and what you see is what you sign.
Tap 42 on your phone to approve
अनुमति देने के लिए अपने फ़ोन पर 42 दबाएँ
Signing: EPFO · view passbook · valid 90 seconds
04 · Acting-for banner
A warning state, so it uses the library's warning orange — not a decorative tint. Nothing else on the page is orange.
Ramesh Kumar is acting for Aanya Sharma
रमेश कुमार, आन्या शर्मा की ओर से कार्य कर रहे हैं
CSC operator · Adhikrit · VLE-MH-2024-00387 · ends 14:40
05 · Ready badge
For relying services in the developer portal. Never used inside a form.
06 · Header lockup
Mark, wordmark, tier chip, and the link to who has access — the same four items on every screen.
Sign in — before and after साइन इन — पहले और बाद में
One block changes: the form actionsTier required
Shabda to enter; the service raises the tier only when the action needs it.
If the hub is down
Third frame: button disabled, legacy OTP form auto-expanded, nothing else moves.
Who has access
Linked from the footer of the card, before the citizen signs in — not only after.
360px
1280px
Consent and account-link सहमति और खाता-लिंक
What · why · who · until when · withdrawTier required
Pratyaksh to authorise a read of Aadhaar-sourced fields. Shabda can view the request but not grant it.
If the hub is down
The request is held, not failed: “EPFO will ask again when Meri Pehchaan is back.” Nothing is granted by default.
Who has access
Every grant made here appears in Who has access the moment it is given, with the same three lines.
Rules this screen enforces
- Never pre-ticked. The Authorise button stays disabled until the citizen ticks. Try it — the tick above is live.
- Four questions, always in this order: what will be read, why, who is asking, and until when. Each field names its source, so the citizen can see which of the three doors it came through.
- Withdrawal is designed, not buried. It tells the citizen what will break before they end it, and it is reachable from the consent screen itself, not only from settings.
- Linking is a claim about identity, not a data transfer. The copy says so, because the fear it answers is “are you moving my provident fund somewhere”.
The citizen dashboard नागरिक डैशबोर्ड
Card first · task list · no percentageTier required
Shabda gets in and sees the card and the task list. Each row states the tier it needs before it opens.
If the hub is down
The card, the task list and the last-known Applications state are cached and shown read-only. Nothing new can be granted.
Who has access
It is section four of the home, not a settings page three levels down. That placement is the argument.
The one decision on this screen
No 0–100 readiness score. The tier chip is the score, and a task list carries the rest.
Only gov.br shows a trust tier, and it shows it as a named ladder with one explicit next step rather than a meter. The behavioural evidence is consistent: percentage meters demotivate when progress is slow, and progress here is slow by design — raising a tier means visiting a centre or enrolling a device. A citizen stuck at 40% reads it as a verdict. A citizen with three named tasks reads it as a list.
Order of the home, and why
- The card first. Every mature system opens on the identity object — Singpass, gov.br, Korea, the new Aadhaar app. It is the thing the citizen came for and the thing they show to a clerk.
- Raise your level. GOV.UK task-list statuses: Completed, Incomplete, Cannot start yet. Each row says what it unlocks, because "enrol a passkey" is not a reason.
- Applications before Inbox. An open application has a deadline; a notice does not.
- Who has access is a named section, not a settings sub-page — the whole argument of 2.0 is that the citizen can see this without hunting.
- Security last, but Freeze is on the home screen. Recovery starts from panic, and panic does not navigate.
Status without colour
Every status on this screen is a word first. The colours below only reinforce it — desaturate the page and nothing is lost.
Delegation प्रत्यायोजन
Act for me, not as meTier required
The citizen must be Pratyaksh to mint a grant. The delegate signs in with their own identity at Adhikrit — never the citizen\u2019s.
If the hub is down
No new grants are minted. Live grants keep working until they expire, because killing them mid-claim would strand the citizen at a counter.
Who has access
Every grant is a row on Who has access from the second it is approved, with End now on it.
Ramesh Kumar is acting for you · EPFO Form 19 · until 11:00
grant MP-G-2026-0091 · VLE-MH-2024-00387 · every action logged as “Ramesh for Aanya under grant 0091”
Why this is the differentiator
- Today the operator uses the citizen's OTP. That is the actual practice at a lakh of service centres, and it means the citizen's credential leaves their hands. A grant replaces the shared OTP with a scoped, logged, expiring permission.
- The delegate signs in as themselves. The token carries who is acting and under which grant, so the log reads “Ramesh for Aanya”, not “Aanya”.
- Assisted mode is first-class. A citizen without a smartphone approves with a counter-issued one-time code plus Aadhaar face — the same grant object, a different approval channel.
- The banner is a warning, not a decoration. It uses the library's warning tokens because acting-for genuinely is a warning state, and it stays on screen for the whole session.
Loss and recovery हानि और पुनःप्राप्ति
Lose the device, never the identityTier required
Freeze needs no tier and no session. Recovery restores a tier rather than assuming one — R4 hands back Anumaan, and Pratyaksh only after the cooling period.
If the hub is down
Freeze is the one action that must never depend on the hub being healthy: it is served from a separate path, and the phone line is printed on the card.
Who has access
Every recovery event is written to the access log with its route, and the old devices and the nominee are told as it happens.
The recovery ladder
Any one route is enough. The prepared routes are instant; the unprepared ones cost time or a trip, which is the whole design — you are never locked out, but you cannot be rushed either.
What keeps recovery from becoming the attack
Rate limited
One recovery per 24 hours, whatever the route.
Cooled
R4 hands back a lower tier first and holds full access for a day.
Witnessed
R5 records the operator's own identity, so a counter recovery has a name on it.
Reversible
72 hours to undo a security change, and every change is announced on all channels.
Developer portal डेवलपर पोर्टल
One page a department has to readTier required
Adhikrit — an organisation officer signs in with their own identity and the department is an entity, not a login.
If the hub is down
Integration docs are static and cached. The sandbox reports the hub\u2019s status honestly rather than pretending.
Who has access
A department can see every scope it holds and every citizen who has revoked it, on the same screen it integrates from.
Button kit
The whole integration, on one screen. Copy it out of the page — there is no SDK.
<!-- 1. the stylesheet you already have -->
<link rel="stylesheet" href="…the stylesheet every department already loads…">
<link rel="stylesheet" href="https://cdn.meripehchaan.gov.in/2.0/mp.css">
<!-- 2. first action in your form actions, above the OR -->
<div class="ux4g-form-actions">
<button type="button"
class="ux4g-btn-lg ux4g-btn-meripehchaan"
aria-label="Sign in">
<svg class="ux4g-btn-icon" aria-hidden="true" width="20" height="20"
sc-camel-view-box="0 0 24 24"><use href="#mp-mark"/></svg>
Sign in
</button>
</div>First action, above the OR
The national option is listed first and is at least as prominent as any other. Your OTP form stays exactly where it is.
Restyle the button
No new fills, no rounded pill, no drop shadow, no department colour. It is the same object on every portal or it signals nothing.
Keep the mark at 20px or more
Inside a 48px button, with 8px to the label. Smaller and the whorl closes.
Name the doors
Never DigiLocker, e-Pramaan or JanParichay on the button. Which door the citizen came through is routing, not branding.
The authenticator प्रमाणक
Number matching · what you see is what you sign · offlineTier required
Enrolling the device is what makes a citizen Pratyaksh. Until then these screens do not exist for them and OTP carries the load.
If the hub is down
Push fails, so the code does the work. The TOTP screen is the hub-down path and it needs no network at all.
Who has access
Every approval made here appears in the access log within seconds, with the portal that asked and the device that answered.
Three defences, one screen each
Number matching beats fatigue
An Approve button gets pressed reflexively, and a caller can talk someone into pressing it. Choosing one of three numbers off a screen the caller cannot see breaks that script.
Signing shows the thing signed
The amount and the destination are rendered on the device holding the key. A compromised browser can change what it displays; it cannot change what the phone shows.
Offline is designed
Connectivity is stated, codes keep working without it, and pending actions retry on reconnect rather than failing silently.
Decisions recorded on these four sheets
- Mark: Direction A (Pehchaan Chakra) with Direction B as the ≤16px favicon. C rejected because it requires green, which the library reserves for success.
- Button family: solid / outline / dark, md 44px and lg 52px, seven states each. Degraded is a first-class state, not an error.
- Colour: purple and neutral only. The library's shipped stylesheet uses its saffron palette in zero components, so using it would look less like the government's own screens, not more. Status hues mean status: orange warns (acting-for), cyan informs (degraded), green confirms.
- Bilingual: both languages ship in the markup on every label; the toggle changes which one leads, so nothing is ever hidden from a screen reader.
- Sign in: BEFORE and AFTER differ by one block. The legacy OTP and Aadhaar routes are never removed, only collapsed — and they auto-expand when the hub is degraded.
Open: the class names in tokens/mp.css are written against the shipped CSS in the repo, which is not reachable from here — these sheets carry the values inline so they render standalone. Wiring them back onto the library's verified classes is the next step.
Take it with you
The written specification
Everything on these ten sheets, written out in the form the library uses for its own component contracts: the ten rules, the foundations, the mark’s locked geometry, every component and pattern, the assurance tiers, the accessibility contract, a compliance mapping to the government's web guidelines and the DPDP Act — and the five gaps we found in the library, offered back.