Theme Craft
Make UX4G look like your department. Choose your brand colours and fonts, preview real components, then copy the generated CSS into your project — it overrides UX4G's defaults and themes light and dark mode together.
Start from a preset
Theme name
Colours
Your main brand colour. Drives buttons, links and focus rings.
Supporting accent for highlights and secondary actions.
A third accent, used sparingly for tags and charts.
Greys for page background, body text and borders. These touch more of the interface than any brand colour, so they are left alone unless you opt in.
Typography
Used for all interface and body text.
"Noto Sans", system-ui, sans-serif
Used for large headings.
"Noto Sans Display", "Noto Sans", sans-serif
Recommended. Most fonts here cover Latin only, so without this, Hindi and other Indian scripts fall back to whatever font the citizen's device happens to have.
Live preview
These are real UX4G components rendered in an isolated frame with your theme applied.
Accessibility check
UX4G uses different ramp steps in dark mode, so each pair is checked twice.
All checks pass WCAG AA in light and dark mode.
| Pair | Mode | Ratio | Result |
|---|---|---|---|
| Primary button text | Light | 8.33:1 | Pass |
| Primary button text | Dark | 6.87:1 | Pass |
| Body text | Light | 17.18:1 | Pass |
| Body text | Dark | 17.18:1 | Pass |
| Secondary text | Light | 9.93:1 | Pass |
| Secondary text | Dark | 14.23:1 | Pass |
| Link text | Light | 8.33:1 | Pass |
| Link text | Dark | 6.87:1 | Pass |
Your theme
/* ============================================================
* UX4G theme: My department theme
* Generated by UX4G Theme Craft.
*
* Load this AFTER the UX4G stylesheet so it overrides the defaults.
* Do not wrap it in @layer — unlayered CSS is what lets it win.
*
* Themes light and dark automatically: UX4G's dark tokens re-point to these
* same primitives, so there is nothing extra to add for dark mode.
* ============================================================ */
:root {
/* Primary */
--ux4g-color-primary-50: #F2EFFF;
--ux4g-color-primary-100: #DCD4FF;
--ux4g-color-primary-200: #C0B3FF;
--ux4g-color-primary-300: #A391FF;
--ux4g-color-primary-400: #8670FF;
--ux4g-color-primary-500: #6A4EFF;
--ux4g-color-primary-600: #4A2BC2;
--ux4g-color-primary-700: #3D239F;
--ux4g-color-primary-800: #301C7D;
--ux4g-color-primary-900: #24145C;
--ux4g-color-primary-950: #1A0E3D;
/* Secondary */
--ux4g-color-secondary-50: #FFF5EA;
--ux4g-color-secondary-100: #FFEBD6;
--ux4g-color-secondary-200: #FFD9AF;
--ux4g-color-secondary-300: #FFBE6F;
--ux4g-color-secondary-400: #E89C30;
--ux4g-color-secondary-500: #C47D00;
--ux4g-color-secondary-600: #A46800;
--ux4g-color-secondary-700: #764A00;
--ux4g-color-secondary-800: #4B2D00;
--ux4g-color-secondary-900: #281600;
--ux4g-color-secondary-950: #110700;
/* Tertiary */
--ux4g-color-tertiary-50: #F6EFFB;
--ux4g-color-tertiary-100: #E9DAF3;
--ux4g-color-tertiary-200: #D9BFEA;
--ux4g-color-tertiary-300: #C8A3E0;
--ux4g-color-tertiary-400: #B686D6;
--ux4g-color-tertiary-500: #A66ACC;
--ux4g-color-tertiary-600: #8E55B3;
--ux4g-color-tertiary-700: #75419A;
--ux4g-color-tertiary-800: #5D2F80;
--ux4g-color-tertiary-900: #462166;
--ux4g-color-tertiary-950: #32174A;
/* Neutral */
--ux4g-color-neutral-0: #FFFFFF;
--ux4g-color-neutral-50: #FAFAFA;
--ux4g-color-neutral-100: #F5F5F5;
--ux4g-color-neutral-200: #E5E5E5;
--ux4g-color-neutral-300: #D9D9D9;
--ux4g-color-neutral-400: #A1A1A1;
--ux4g-color-neutral-500: #737373;
--ux4g-color-neutral-600: #525252;
--ux4g-color-neutral-700: #404040;
--ux4g-color-neutral-800: #262626;
--ux4g-color-neutral-900: #171717;
--ux4g-color-neutral-950: #0A0A0A;
--ux4g-color-neutral-1000: #000000;
/* Typography */
--ux4g-font-family-base: "Noto Sans", system-ui, sans-serif;
--ux4g-font-family-display: "Noto Sans Display", "Noto Sans", sans-serif;
}
How to use it
Load this after the UX4G stylesheet. It themes light and dark mode together — there is nothing extra to add for dark.
npm
import 'ux4g-web-components/styles.css';
import './my-department-theme.css';CDN
<link rel="stylesheet" href="https://cdn.ux4g.gov.in/UX4G@3.0.18/index.css" />
<link rel="stylesheet" href="/my-department-theme.css" />