Foundations

Qeetrix is token-driven. Colour, type, corners, elevation and motion are design tokens, and components read the tokens instead of hard-coding values, so a change to a token reaches every component that uses it.

Where tokens live

File	What it has	Use it for
`@qeetrix/ui/styles.css`	The semantic tokens as `--qx-*` variables, mapped to Tailwind utilities	Apps: the one stylesheet you import
`@qeetrix/ui/qeetrix.css`	The same semantic variables, without Tailwind	Theming against the variables directly
`@qeetrix/ui/tokens.css`	Every token, including the primitive palette and scales	Design tooling that needs the raw ramps
`@qeetrix/ui/tokens.json`	Every token, resolved for each theme	Anything that isn't CSS

Semantic and primitive tokens

Components read only semantic tokens: roles with a meaning, such as surface.canvas or text.secondary. The primitive tokens behind them, the raw palette and scales, are not in styles.css, so a component can't come to depend on a palette value by accident.

Names

A variable follows its token's path: color.surface.canvas is --qx-color-surface-canvas. Many tokens also have a Tailwind utility, such as bg-canvas, shadow-hover or duration-fast; the tables on each page list them.