# 0004. Design token scope and no-raw-values rule

> Tokens cover color, spacing, typography, and motion only. The Vue UI has 711 raw px lines, radii 4/5/6/8/999px, font sizes 11/13px outside the scale,…

Source: https://kcq.nebutra.com/docs/architecture/adr/0004-design-token-scope


* Status: Proposed
* Date: 2026-10-09
* Deciders: tseka

Context [#context]

Tokens cover color, spacing, typography, and motion only. The Vue UI has 711 raw px lines, radii 4/5/6/8/999px, font sizes 11/13px outside the scale, 31 raw shadows, z-index 1–1010, and 34 raw colors that break light mode.

Decision [#decision]

* Add token groups: `radius`, `elevation` (shadow), `zIndex`, `opacity`, `breakpoint`, and a full type scale. Motion gets a duration/easing scale.
* Tokens are defined framework-agnostically and emitted as CSS variables, so they can be shared with nebutra-sailor, Electron, and mobile. Final location depends on the sailor audit.
* Presets (Pro/Exchange/Terminal/Zen/Quant) may override radius, density, and elevation as well as color.
* `packages/vue/src` must not contain raw hex/rgb colors or off-scale px for padding/margin/gap/radius/font-size/z-index. Enforced by stylelint in CI.
* Numeric UI uses `font-variant-numeric: tabular-nums` by default.

Consequences [#consequences]

* Large but mechanical migration across components.
* The renderer keeps reading `Theme` from core; see ADR 0005.