Design Tokens

All visual values in Norio come from norio-html-dev/tokens/tokens.json. That file is the only place you add or change a color, type step, space, radius, motion, container, or breakpoint.

---

Pipeline

    
tokens/tokens.json
        │  npm run tokens   (scripts/build-tokens.mjs)
        ▼
src/assets/scss/abstracts/_tokens.generated.scss
        │  $tokens-static / $tokens-light / $tokens-dark / $breakpoints
        ▼
abstracts/_css-vars.scss
        │  :root  +  [data-color-scheme="dark"]  +  prefers-color-scheme
        ▼
var(--color-…) / var(--space-…) / var(--font-size-…)
    

• The compiler exits non-zero on unresolved aliases and duplicate names.
• _tokens.generated.scss is overwritten on every dev / build. Never edit it.
• SCSS must not contain hex, rgb(), or px except 1px / 2px hairlines.

Aliases

Semantic tokens point at primitives with {group.token} syntax:

    
"surface": {
  "base": "{color.neutral.0}",
  "subtle": "{color.neutral.50}",
  "raised": "{color.neutral.100}",
  "inverse": "{color.neutral.950}"
}
    

Colors that change between modes declare both values:

    
"brand": {
  "1": { "light": "#000000", "dark": "#5B8CFF" },
  "2": { "light": "#000088", "dark": "#93B4FF" }
}
    

Groups

Type steps with a fluidMin compile to clamp() between two steps of the same ramp. See Typography and Colors.