How Nakshora 2.0 exposes its scales — spacing, colors, radii — as a single source of truth, including the CSS custom properties on :root.

The idea#

A token is a named decision: "spacing step 4 = 1rem", "blue 500 = #3b82f6". When every utility reads from the token scale, consistency is automatic — two developers cannot invent two different paddings. Nakshora exposes the whole scale as CSS custom properties, so your custom CSS speaks the same language.

In practice#

example
html
.my-banner {
  background: var(--color-blue-500);
  padding: var(--spacing-6);
}

Common mistakes#

  • Hard-coding hex values that already exist in a palette
  • Creating near-duplicate tokens ("#3b82f6" vs "blue-500")
  • Overriding tokens globally when a local class would do

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.