Design Tokens

All visual values in Rasuke come from rasuke-html-dev/tokens/tokens.json. That file — synced from the Figma file Rasuke agency_v1 (Variable collection, Light + Dark modes, plus local text styles; file key Kz22sSE0ae1lVKqo2VzKpZ) — is the only place you add or change a color, type step, space, radius, motion timing, 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:

"accent": {
  "base": "{color.brand.1}"
}

Colors that change between modes declare both values:

"surface": {
  "base": { "light": "#FFFFFF", "dark": "#111111" },
  "subtle": { "light": "#F4F4F4", "dark": "#1B1B1B" }
},
"text": {
  "primary": { "light": "#111111", "dark": "#FCF7F3" }
}

The brand orange is the exception that proves the rule — it is identical in both modes:

"brand": {
  "1": { "light": "#FF6A3A", "dark": "#FF6A3A" }
}

Groups

Breakpoints are a Sass map ($breakpoints — media queries cannot read custom properties) consumed by @include media-up(lg). Type steps with a fluidMin compile to clamp() interpolated between 375px and 1320px viewports. See Typography and Colors.