Design tokens
Semantic variables that power RefineUI — color, type, space, motion, and stacking.
Tokens are the single source for visual values. @refineui/tokens maps Foundation scales to CSS variables and Tailwind utilities. Components and product UI should reference semantic names, not palette hex or raw px.
Categories
Section titled “Categories”| Category | Use for |
|---|---|
| Color | Surfaces, text, borders, brand, status |
| Typography | Text roles (headingMd, bodyMd, …) |
| Spacing | Gaps, padding, margins |
| Sizing | Control heights, icons, layout steps |
| Radius | Corner radii |
| Border | Stroke widths |
| Elevation | Shadows / depth |
| Opacity | Disabled wash, overlay helpers |
| Motion | Duration, easing, press scale |
| Z-index | Overlay stacking |
- Prefer semantic aliases (
backgroundSurface,sizeMedium,fast) over Foundation primitives in product code. - If a value is missing, update Foundation first, then
packages/tokens— do not invent a one-off. - Import
@refineui/react/refineui.cssonce so control hover / focus motion stays consistent.