tokcss (TokenCss)

tokcss is a CLI that converts design tokens into clean, predictable CSS variables.

Design tokens are often authored as deeply nested JSON objects that reflect product structure, themes, platforms, or component contexts. While this structure is great for humans and design systems, it isn’t directly usable in CSS. tokcss bridges that gap by flattening token data into CSS variables that can be consumed anywhere—without a runtime, framework dependency, or custom build logic.

From Tokens:

{
  "DesignSystem": {
    "Global": {
      "0": "0px",
      ...
    }
  }
}

To CSS:

:root { 
  --DesignSystem-Global-0:0px;
  ...
}

Installation

npm i tokcss

Usage

//tokcss -p[ath] [folder/file]
tokcss -p ./files/
tokcss -p ./token.json