Design Tokens

Every visual value in Rasuke comes from tokens/tokens.json. That file — synced from the Figma file Rasuke agency_v1 (Variable collection with Light + Dark modes, plus local text styles) — 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/styles/abstracts/_tokens.generated.scss
            $tokens-static / $tokens-light / $tokens-dark / $breakpoints
       └─ src/styles/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 (predev / prebuild). Never edit it.

Figma source: Rasuke agency_v1 — file key Kz22sSE0ae1lVKqo2VzKpZ, Variable collection with light and dark modes plus local text styles.

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 identical in both modes:

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

Groups

Group	Examples
Color	`--color-surface-base`, `--color-text-primary`, `--color-accent-base`, `--color-border-base`, plus component groups (`footer`, `button`, `placeholder`, `backdrop`, `preloader`, `offcanvas`)
Font	`--font-family-sans`, `--font-size-h1` … `--font-size-tiny`, `--font-weight-bold`, `--font-tracking-display`
Space	`--space-1` (8px) … `--space-16` (128px), in 8px steps (1–8, 10, 12, 16)
Radius	`--radius-xs`, `--radius-md`, `--radius-lg`, `--radius-xl`, `--radius-pill`
Motion	`--motion-duration-` (preloader, offcanvas, header, cursor, accordion, digit-count, page transition…), `--motion-easing-`, cursor lag / trail, `--motion-zoom`, `--motion-lift`
Layout	Container max 1500px, gutter `{space.2}` / `{space.5}` on large screens, plus per-component geometry (headers 1–4, main nav, offcanvas, cursor, preloader, lightbox, showcases 1–6…) emitted as `--layout-…`

Type scale and breakpoints

Type steps with a fluidMin compile to clamp() interpolated between 375px and 1320px viewports. Line heights from the token file become --font-leading-*.
Breakpoints (sm 576, md 768, lg 1024, xl 1280) stay a Sass map ($breakpoints) because media queries cannot read custom properties. Use @include media-up(lg) { … }.

Using tokens in SCSS

@use "../../abstracts" as *;

.hero-2__title {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h1);
  line-height: var(--font-leading-h1);
  color: var(--color-text-primary);
  gap: var(--space-3);

  @include media-up(lg) {
    padding-block: var(--space-12);
  }
}

Values come from var(--…) — no hex, rgb(), or raw px in section SCSS except 1px / 2px hairlines. Geometry or duration that JavaScript also needs lives in layout.* or motion.* tokens so both read the same number.

See Typography and Colors for the public variable names.