# Tokens
Foundational color palette for UX4G Design System. This file presents the raw tokens in a visual, documentation-first format. Dynamic values are read directly from the CSS variables to ensure accuracy.
**Category:** Tokens
**Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--primary
## Variants documented in Storybook
- Primary: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--primary
- Secondary: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--secondary
- Tertiary: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--tertiary
- Neutral: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--neutral
- Success: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--success
- Error: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--error
- Info: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--info
- Warning: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--warning
- Blue: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--blue
- SkyBlue: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--skyblue
- Lime: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--lime
- Yellow: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--yellow
- Gold: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--gold
- Purple: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--purple
- Pink: https://doc.ux4g.gov.in/web/?path=/story/ux4g-tokens--pink
## 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"
]
}
```
## Usage
Copy the HTML/React/Angular tab from the Storybook canvas link above for the exact markup for each variant.
## 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.