Every token as a --var: how to read and reuse Nakshora 2.0 tokens in custom CSS.

The idea#

Every token is mirrored onto :root as a custom property. That means your hand-written CSS, inline styles, canvas code and JS can all read the same design decisions — and you can retheme at runtime by redefining a handful of variables.

In practice#

example
html
.callout {
  border-left: 4px solid var(--color-blue-500);
  padding: var(--spacing-4);
}

Common mistakes#

  • Re-declaring palette hexes instead of using the variables
  • Expecting variables for arbitrary values (they are inlined, not tokenized)

Keep learning#

Next: concepts/design-tokens|Design tokens and utilities/index|the utilities reference put this concept to work. For the big picture, see getting-started/introduction|the introduction.