design tokens

Hey, could somebody please explain the advantages of laying out design tokens in this way:

having a folder with some tokens stored in json files, for example the structure may look like:
tokens
|
├── colours.json
|

with the layout looking something like:
{
  "colors": {
    "primary": "#181818",
    "secondary": "xyz",
    "accent": "xyz"
  }
}

to then use in css like:
.bg-primary {
  background-color: #181818;
}

i'm aware you'd need an external library to stitch this together however i don't quite understand the use for the json file when the class alone could be used? I see people such as andy bell use these sorts of methods. Is it that depending on the library you use, changing the json values change the css values resulting in some sort of design system? Any help understanding would be awesome, many thanks!
Was this page helpful?