Kevin Powell - Community•8mo ago

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
|

tokens
|
├── colours.json
|

with the layout looking something like:

{
  "colors": {
    "primary": "#181818",
    "secondary": "xyz",
    "accent": "xyz"
  }
}

{
  "colors": {
    "primary": "#181818",
    "secondary": "xyz",
    "accent": "xyz"
  }
}

to then use in css like:

.bg-primary {
  background-color: #181818;
}

.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!

4 Replies

Kevin Powell•8mo ago

Usually those utility classes are generated from the JSON file

snxxwyyOP•8mo ago

Ah so it’s part of a config that adds them to an existing css file or creates a new css file?

Kevin Powell•8mo ago

probably depends on the config... I'm guessing it'll create one if none exists, or add to one if one exists (for say, colors, or whatever)

snxxwyyOP•8mo ago

Ah yeah that’s what I was imagining, thank you for the help.

Gaming

Programming

design tokens