Indian flagGovernment of India
Skip to main content
National Emblem of IndiaUX4G
Core building blocks

Foundations

The shared visual language behind every UX4G component — color, typography, spacing, and structure, defined once and applied everywhere.

Color

F-01

Primary, semantic, and neutral palettes with contrast ratios and token names.

Ag123

Typography

F-02

Type scale, weights, and line heights.

Spacing & Layout

F-03

A base-4 spacing scale and responsive grid used across every component.

Elevation

F-04

Shadow levels that communicate hierarchy, depth, and focus.

Iconography

F-05

A consistent SVG icon set with sizing, spacing, and usage rules.

Primary
Accent
Success

Design Tokens

F-06

Every color, spacing, type, and radius value as a copyable CSS variable.

AA

Accessibility Guidelines

F-07

WCAG 2.1 AA criteria, keyboard maps, and screen-reader guidance.

Content Design System

F-08

Plain-language standards and multilingual content guidelines.

Developer resources

Looking for developer docs, API references, or code snippets?

Explore component APIs, prop tables, and copy-ready code snippets across React, Angular, Flutter, and Web Components — with live, interactive examples in Storybook.

Visit our Storybook