# UX4G Design System — LLM System Guide Version: 3.0.18 Documentation URL: https://doc.ux4g.gov.in/web/?path=/story/getting-started-introduction--overview Generated: 2026-07-27T07:20:42.377Z ## What is UX4G? UX4G (User Experience for Government) is a government-grade design system that provides a shared visual language and production-ready UI building blocks for Indian public digital services. It is built as a CSS-first framework with minimal JavaScript behaviors, optimized for accessibility, consistency, and scalability across ministries, vendors, and service teams. ## System hierarchy 1. **Foundations / Tokens** — color, typography, spacing, radius, shadow, elevation, and semantic variables. 2. **Utilities** — atomic CSS helpers for layout, typography, spacing, display, flex, borders, backgrounds, etc. 3. **Components** — self-contained, accessible UI blocks such as buttons, inputs, navigation, tables, modals, etc. 4. **Patterns** — higher-order compositions that solve whole user journeys (application submission, status tracking, payment, etc.). 5. **Layout** — grid, container, and flex/grid layout systems. ## How to consume UX4G ### HTML / CDN (quickest) ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; function App() { return ( ); } ``` ### 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" ] } ``` ## Class naming conventions - All framework classes are prefixed with `ux4g-`. - Components: `ux4g-btn-primary`, `ux4g-input`, `ux4g-card`, `ux4g-navbar`, `ux4g-modal`, etc. - Utilities: `ux4g-d-flex`, `ux4g-jc-center`, `ux4g-ai-center`, `ux4g-gap-s`, `ux4g-p-m`, `ux4g-mb-l`, `ux4g-text-neutral-primary`, `ux4g-bg-primary`, etc. - Sizes are typically `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`. - Responsive breakpoints: mobile first; prefixes are `sm:`, `md:`, `lg:`, `xl:`. - Dark mode: set `data-theme="dark"` on `` or any ancestor. ## How to fetch detailed docs This file is a compact guide. For detailed component/pattern docs with code examples, fetch the specific `.md` file from `https://doc.ux4g.gov.in/web/llms/`.) ## Category index - [Getting Started](https://doc.ux4g.gov.in/web/llms/getting-started.md) — 2 items - [Tokens](https://doc.ux4g.gov.in/web/llms/tokens.md) — 1 items - [Utilities](https://doc.ux4g.gov.in/web/llms/utilities.md) — 22 items - [Layout](https://doc.ux4g.gov.in/web/llms/layout.md) — 3 items - [Components](https://doc.ux4g.gov.in/web/llms/components.md) — 52 items - [Patterns](https://doc.ux4g.gov.in/web/llms/patterns.md) — 57 items ## Accessibility target UX4G targets WCAG 2.1 Level AA. Components ship with keyboard support, visible focus indicators, adequate contrast ratios, and ARIA patterns where appropriate. Always test final implementations with real assistive technology and automated tools.