# Introduction Landing page for the UX4G Design System. Summarises the system mission, key metrics (50+ components, 1K+ tokens, 10+ patterns, AA accessibility), core strengths, and a library map linking to Components, Tokens, Utilities, and Patterns. **Category:** Getting Started **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/getting-started-introduction--introduction ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Introduction. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Overview — Overview HTML: ```html

Design System 3.0

Government-grade UI foundations for trusted public digital experiences.

UX4G gives product, design, and engineering teams one coherent system for building accessible, consistent, and scalable citizen-facing services.

Get Started Component Library
System overview

One platform for consistent public service journeys.

Start from shared tokens, move into reusable components, and document delivery paths in one place.

50+
Reusable components
1K+
Design tokens
10+
Patterns
AA
Accessibility target
Utilities Layouts, helpers, grids
Components Inputs, buttons, cards
Patterns Headers, footers, forms
Core strengths

Built for design systems that need to scale beyond one product team.

UX4G combines visual consistency, engineering pragmatism, and accessibility expectations into a single documentation experience.

Scalable Architecture

A structured system of foundations, patterns, and components that can scale across ministries, vendors, and service teams.

Accessible Components

Interaction patterns are designed for clarity, contrast, keyboard use, and dependable public-facing experiences.

Token-Driven Design

Color, typography, spacing, and elevation are governed through reusable tokens that keep every experience aligned.

Developer Friendly

Composable utilities, production-ready components, and Storybook documentation reduce friction from exploration to delivery.

Library map

Navigate the design system through the same categories shown in the Storybook sidebar.

Components, tokens, and utilities are organized to help teams move from exploration to implementation without losing context.

Components

Form controls, navigation, feedback, and layout primitives designed for real government workflows.

  • Production-ready UI building blocks
  • Interactive states documented in Storybook
  • Consistent anatomy across surfaces

Tokens

Core design decisions captured as reusable color, typography, spacing, and semantic values.

  • Brand and neutral palettes
  • Semantic mappings for surfaces and states
  • A shared source of truth for scale

Utilities

Layout, spacing, border, shadow, and background helpers that make composition fast and predictable.

  • Responsive grid utilities
  • Spacing and radius shortcuts
  • Surface and elevation helpers

Patterns

Reusable block-level compositions like headers, footers, and complex forms used across applications.

  • Pre-built structural blocks
  • Streamlined composition
  • Accelerated feature delivery
``` React: ```jsx import React from 'react'; const IntroductionExample1Demo = () => ( <>

UX4G Design System 3.0

Government-grade UI foundations for trusted public digital experiences.

UX4G gives product, design, and engineering teams one coherent system for building accessible, consistent, and scalable citizen-facing services.

Get Started Component Library
System overview

One platform for consistent public service journeys.

Start from shared tokens, move into reusable components, and document delivery paths in one place.

50+
Reusable components
1K+
Design tokens
10+
Patterns
AA
Accessibility target
Utilities Layouts, helpers, grids
Components Inputs, buttons, cards
Patterns Headers, footers, forms
Core strengths

Built for design systems that need to scale beyond one product team.

UX4G combines visual consistency, engineering pragmatism, and accessibility expectations into a single documentation experience.

account_tree

Scalable Architecture

A structured system of foundations, patterns, and components that can scale across ministries, vendors, and service teams.

accessibility_new

Accessible Components

Interaction patterns are designed for clarity, contrast, keyboard use, and dependable public-facing experiences.

palette

Token-Driven Design

Color, typography, spacing, and elevation are governed through reusable tokens that keep every experience aligned.

code

Developer Friendly

Composable utilities, production-ready components, and Storybook documentation reduce friction from exploration to delivery.

Library map

Navigate the design system through the same categories shown in the Storybook sidebar.

Components, tokens, and utilities are organized to help teams move from exploration to implementation without losing context.

widgets

Components

Form controls, navigation, feedback, and layout primitives designed for real government workflows.

  • Production-ready UI building blocks
  • Interactive states documented in Storybook
  • Consistent anatomy across surfaces
tune

Tokens

Core design decisions captured as reusable color, typography, spacing, and semantic values.

  • Brand and neutral palettes
  • Semantic mappings for surfaces and states
  • A shared source of truth for scale
view_quilt

Utilities

Layout, spacing, border, shadow, and background helpers that make composition fast and predictable.

  • Responsive grid utilities
  • Spacing and radius shortcuts
  • Surface and elevation helpers
dashboard_customize

Patterns

Reusable block-level compositions like headers, footers, and complex forms used across applications.

  • Pre-built structural blocks
  • Streamlined composition
  • Accelerated feature delivery
); export default IntroductionExample1Demo; ``` Angular: ```html

Design System 3.0

Government-grade UI foundations for trusted public digital experiences.

UX4G gives product, design, and engineering teams one coherent system for building accessible, consistent, and scalable citizen-facing services.

Get Started Component Library
System overview

One platform for consistent public service journeys.

Start from shared tokens, move into reusable components, and document delivery paths in one place.

50+
Reusable components
1K+
Design tokens
10+
Patterns
AA
Accessibility target
Utilities Layouts, helpers, grids
Components Inputs, buttons, cards
Patterns Headers, footers, forms
Core strengths

Built for design systems that need to scale beyond one product team.

UX4G combines visual consistency, engineering pragmatism, and accessibility expectations into a single documentation experience.

Scalable Architecture

A structured system of foundations, patterns, and components that can scale across ministries, vendors, and service teams.

Accessible Components

Interaction patterns are designed for clarity, contrast, keyboard use, and dependable public-facing experiences.

Token-Driven Design

Color, typography, spacing, and elevation are governed through reusable tokens that keep every experience aligned.

Developer Friendly

Composable utilities, production-ready components, and Storybook documentation reduce friction from exploration to delivery.

Library map

Navigate the design system through the same categories shown in the Storybook sidebar.

Components, tokens, and utilities are organized to help teams move from exploration to implementation without losing context.

Components

Form controls, navigation, feedback, and layout primitives designed for real government workflows.

  • Production-ready UI building blocks
  • Interactive states documented in Storybook
  • Consistent anatomy across surfaces

Tokens

Core design decisions captured as reusable color, typography, spacing, and semantic values.

  • Brand and neutral palettes
  • Semantic mappings for surfaces and states
  • A shared source of truth for scale

Utilities

Layout, spacing, border, shadow, and background helpers that make composition fast and predictable.

  • Responsive grid utilities
  • Spacing and radius shortcuts
  • Surface and elevation helpers

Patterns

Reusable block-level compositions like headers, footers, and complex forms used across applications.

  • Pre-built structural blocks
  • Streamlined composition
  • Accelerated feature delivery
``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.