---
url: "https://vueda.dev/v3/reference/theming/tokens.md"
title: "Theme tokens"
---

# Theme tokens

CSS custom properties shipped by `@vueda/theme/vueda-tailwind/base.css`. Tokens are grouped by purpose; values reflect both the light (`:root`) and dark (`.dark`) scopes.

## Groups

- [Base](/v3/reference/theming/tokens/base.md)
- [Color palette: light](/v3/reference/theming/tokens/color-palette-light.md)
- [Semantic radius tokens](/v3/reference/theming/tokens/semantic-radius-tokens.md)
- [Semantic shadow tokens](/v3/reference/theming/tokens/semantic-shadow-tokens.md)
- [Semantic spacing tokens](/v3/reference/theming/tokens/semantic-spacing-tokens.md)
- [Control sizing (VUEDA canon)](/v3/reference/theming/tokens/control-sizing-vueda-canon.md)
- [Specialized control sizes](/v3/reference/theming/tokens/specialized-control-sizes.md)
- [Sidebar](/v3/reference/theming/tokens/sidebar.md)
- [Typography](/v3/reference/theming/tokens/typography.md)
- [Motion](/v3/reference/theming/tokens/motion.md)
- [DPR-aware hairline + focus-ring widths](/v3/reference/theming/tokens/dpr-aware-hairline-focus-ring-widths.md)