A design concept for Viksit Bharat @2047

Saathi 2.0 · Design system

The system behind Saathi — calm enough to trust with a pension, precise enough to feel world-class, and built for every script India reads.

Base
#FFFFFF
Scripts
Latin · Devanagari · Bengali · Tamil
Standard
Designed to WCAG 2.1 AA · GIGW 3.0 · UX4G

01 — Brand

Two arcs and a point.

Saffron and navy arcs are companionship and an open door; the green point is the citizen they hold. The tricolour, abstracted — no national emblem required.

साथीSaathi

Tiro Devanagari carries the wordmark — the one expressive face in an otherwise precise system.

The mark

Tricolour rule — saffron · chakra point · green. A 2px signal, never decoration.

Saathi AI — the orb

Idle

Aurora drifts, disc breathes

Listening

Ripples reach outward

Working

Arcs trace in and out

Responding

Arcs pulse with speech

02 — Colour

White first. Colour means something.

Palette logic follows UX4G, the Government of India design system. Each chip shows its contrast as text on white — every text pairing in the product is tested to WCAG 2.1 AA in code.

Chakra Navy

Primary action, links, focus, authority

1.1
navy-50#EEF2FC
1.3
navy-100#DDE5F8
1.7
navy-200#B9C8F0
4.1
navy-400#5577E0
6.2
navy-500#2F55D4
8.2
navy-600#1F43B8
11.0
navy-700#16338F
13.5
navy-800#10286F
16.1
navy-900#0A1C54

Saffron

Highlight and glow — text only at 700

1.1
saffron-50#FFF6EC
1.2
saffron-100#FFE8CF
1.6
saffron-300#FFBE7A
2.0
saffron-400#FFA24C
2.4
saffron-500#FF8A1F
5.0
saffron-700#B45309

India Green

Success, approved, verified

1.1
green-50#ECF8F0
1.2
green-100#D3F0DE
3.5
green-500#1E9E55
5.0
green-600#12803C
8.4
green-800#0B5A2A

Neutrals

White base, cool greys, ink

1.0
page#FFFFFF
1.1
surface#F7F8FA
1.1
surface-2#EEF0F4
1.2
line#E6E8EE
2.6
ink-4#9AA0AD
5.5
ink-3#626978
10.5
ink-2#3A3F4B
19.4
ink#0B0D14

Action

Apply now

white on navy-600 · 8.22:1

Attention

Due in 3 days

saffron-700 on saffron-50 · 4.70:1

Outcome

Approved

green-800 on green-50 · 7.67:1

03 — Typography

Four scripts. One voice.

Geist sets Latin with tight, confident tracking. Anek — by Ek Type, an Indian foundry — sets Indic headlines; Noto Sans, recommended by UX4G, carries Indic body text at a 1.8 line height.

Latin

Geist / Geist

One door to every service.

Tell Saathi what you need. It finds the right scheme, fills the form and keeps your receipt.

Devanagari · Hindi

Anek Devanagari / Noto Sans Devanagari

हर सरकारी सेवा का एक द्वार।

साथी को बताइए आपको क्या चाहिए। वह सही योजना खोजता है, फ़ॉर्म भरता है और रसीद संभाल कर रखता है।

Bengali · Bangla

Anek Bangla / Noto Sans Bengali

প্রতিটি সরকারি পরিষেবার একটি দরজা।

সাথীকে বলুন আপনার কী দরকার। সে সঠিক প্রকল্প খুঁজে দেয়, ফর্ম পূরণ করে এবং রসিদ রেখে দেয়।

Tamil

Anek Tamil / Noto Sans Tamil

ஒவ்வொரு அரசு சேவைக்கும் ஒரே கதவு.

உங்களுக்கு என்ன வேண்டும் என்று சாத்தியிடம் சொல்லுங்கள். சரியான திட்டத்தைக் கண்டு, படிவத்தை நிரப்பி, ரசீதைப் பாதுகாக்கும்.

Editorial accent — Instrument Serif

One door to every service.

Used for a single emotive word per headline, Latin only.

Data — Geist Mono

DigiLocker.fetch("birth_record") · 1.2s

Ref SAA-2026-457029

SLA 7 working days

display-2xl2047
display-xlViksit Bharat
h1Designed for every Indian
h2Trust in five seconds
h3Your applications
titleBirth certificate
body-lStatus is sacred — always show where a thing is.
bodySubmitted to the Registrar, Kanpur Nagar.
labelAadhaar verified
captionUpdated 2 min ago

04 — Iconography

One family. Three weights.

Phosphor throughout: regular for interface chrome, duotone on tinted tiles for services and life moments, fill for the active tab. A consistent grammar a citizen learns once.

New baby
First job
Housing
Education
Health
Farming
Business
Identity
Certificates
Money
Taxes & bills
Land
Transport
Welfare
Accessibility
Verified

Sizes

05 — Imagery

No stock photos. No maps.

Saathi's imagery is generated in code: kolam linework from the dot grids drawn at Indian thresholds every morning and guilloche from the security print on our currency — always on pure white. Distinctive, weightless, and impossible to get wrong on a border.

Sikku kolam · woven

Pulli kolam · diamond

Kolam · drawn live

Guilloche on identity

Saathi ID Verified

Rakesh Verma

XXXX XXXX 6721

Kolam texture on white

Texture, never a tint

06 — Motion

Fast where you act. Slow where you feel.

Interface motion stays under 300ms with strong ease-out and interruptible springs. Storytelling motion is allowed to breathe. Everything collapses to gentle fades for people who prefer reduced motion.

Word reveal · space-split, safe for Indic conjuncts

Aadhaar numbers generated (approx.)

Scheduled languages

Viksit Bharat

Tokens

tap
spring 0.25s · bounce 0Press feedback
ui
spring 0.35s · bounce 0.08Menus, cards
layout
spring 0.5s · bounce 0.14Shared-element morphs
cinematic
0.9s · cubic-bezier(0.16,1,0.3,1)Scroll stories

Stagger · 40ms

Pinned scroll scene · keep scrolling

useScroll → useTransform

0%

07 — Components

Pressable, legible, honest.

Every control answers a touch within a frame. Status is always said in words, never colour alone.

Buttons

Badges

Aadhaar verifiedIn reviewDue in 3 daysDocument unclearFor youDesign target