Skip to main content
GOVIndia
HomeTokensComponentsDocs

Design Tokens

The raw values every component is built from. Change a token, change the entire system. All values meet WCAG 2.1 AA contrast ratios.

Colours

Brand

Primary
#000000
Primary Hover
#1a1a1a
Accent
#0070f3
Accent Hover
#0366d6

Neutrals

White
#ffffff
Gray 50
#fafafa
Gray 100
#f5f5f5
Gray 200
#eaeaea
Gray 300
#dcdcdc
Gray 500
#666666
Gray 800
#1a1a1a
Gray 900
#000000

Semantic

Success
#0070f3
Warning
#666666
Error
#e00
Info
#0070f3

Typography

Inter font family. Clean, modern, highly readable.

Display — 3rem / 700 / 1.25
The quick brown fox
Heading 1 — 2.25rem / 600 / 1.25
The quick brown fox
Heading 2 — 1.5rem / 600 / 1.25
The quick brown fox
Heading 3 — 1.25rem / 600 / 1.25
The quick brown fox
Body Large — 1.125rem / 400 / 1.625
The quick brown fox jumps over the lazy dog
Body — 1rem / 400 / 1.625
The quick brown fox jumps over the lazy dog
Body Small — 0.875rem / 400 / 1.5
The quick brown fox jumps over the lazy dog
Caption — 0.75rem / 400 / 1.5
The quick brown fox jumps over the lazy dog

Spacing

8px grid system. Consistent rhythm across all components.

1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px

Border Radius

Subtle curves for a modern feel.

None
0px
Small
4px
Medium
8px
Large
12px
XL
16px
Full
9999px

Shadows

Layered, soft elevation for depth.

XS
SM
MD
LG