# UX4G Design Tokens Design tokens are CSS custom properties that define the visual language of UX4G. Fetch a family below for the complete list of primitive and semantic values with exact CSS output. **Total primitive variables:** 361 **Total semantic variables:** 359 ## Token families - [Blur](tokens/blur.md) - [Border](tokens/border.md) - [Colors](tokens/colors.md) - [Interaction](tokens/interaction.md) - [Layout](tokens/layout.md) - [Object-fit](tokens/object-fit.md) - [Opacity](tokens/opacity.md) - [Overflow](tokens/overflow.md) - [Position](tokens/position.md) - [Radius](tokens/radius.md) - [Shadow](tokens/shadow.md) - [Spacing](tokens/spacing.md) - [Text-transform](tokens/text-transform.md) - [Typography](tokens/typography.md) - [Vertical-align](tokens/vertical-align.md) - [Visibility](tokens/visibility.md) - [Z-index](tokens/z-index.md) ## Global usage Use primitive tokens (`--ux4g-color-primary-500`) directly when you need a fixed value. Use semantic tokens (`--ux4g-background-primary`, `--ux4g-text-neutral-primary`) for theme-aware surfaces and text so dark mode works automatically. ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.