# Generated Design Tokens file

**URL:** <https://community.penpot.app/t/generated-design-tokens-file/8680>\
**Category:** Help us improve Penpot\
**Tags:** design, tokens, design-tokens\
**Created:** [May 8, 2025, 7:54pm UTC](https://community.penpot.app/t/generated-design-tokens-file/8680 "2025-05-08T19:54:21Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![marekbrze](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/marekbrze/32/5252_2.png) [@marekbrze](https://community.penpot.app/u/marekbrze)\
**Post date:** [May 8, 2025, 7:54pm UTC](https://community.penpot.app/t/generated-design-tokens-file/8680/1 "2025-05-08T19:54:21Z")

</div>

I am trying to use downloaded tokens.json file with Style Dictionary v4 for generating CSS variables, but I encounter problem with referencing values. Penpot doesn’t reference full path for the value in Json .

What is generated by Penpot:

```auto
{
   "Global":{
      "red":{
         "$value":"rgb(252, 35, 35)",
         "$type":"color",
         "$description":""
      },
      "warning":{
         "$value":"{red}", <<<<<<<<<<<< That's the problem
         "$type":"color",
         "$description":""
      }
   },
   "$themes":[
      
   ],
   "$metadata":{
      "tokenSetOrder":[
         "Global"
      ],
      "activeThemes":[
         
      ],
      "activeSets":[
         "Global"
      ]
   }
}

```

The red color should be referenced `{Global.red}` to work.

It’s even described in the Design Tokens Format Module → [Design Tokens Format Module](https://tr.designtokens.org/format/#aliases-references)

" For a design token to reference another, its value _MUST_ be a string containing the period-separated (`.`) path to the token it’s referencing enclosed in curly brackets."

Maybe I am to new to the topic, but it seems that the path need to be included.

---

<div class="post-metadata">

**Author:** ![natacha](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/natacha/32/44_2.png) [@natacha](https://community.penpot.app/u/natacha)\
**Post date:** [May 9, 2025, 6:45am UTC](https://community.penpot.app/t/generated-design-tokens-file/8680/2 "2025-05-09T06:45:35Z")

</div>

Hey @marekbrze  
In this example, the `Global` key is the name of the set , not the name of the group, you can check it below, in the `$metadata` fields. This is why this is not included in the reference.

I’ve tried to export a penpot json with a similar example (but with groups) and it works as expected, the references include the full path:

```auto
{
    "Global": { <<<<< set name (not included in tokens paths)
        "color": { <<<<< group
            "red": { <<<<< token name
                "$value": "#fabada",
                "$type": "color",
                "$description": ""
            },
            "blue": {
                "$value": "blue",
                "$type": "color",
                "$description": ""
            },
            "reference": {
                "$value": "{color.red}", <<<<<< full path (group + name}
                "$type": "color",
                "$description": ""
            }
        }
    },
    "$themes": [],
    "$metadata": {
        "tokenSetOrder": [
            "Global"
        ],
        "activeThemes": [],
        "activeSets": [
            "Global"
        ]
    }
}

```

I hope this helps!

---

<div class="post-metadata">

**Author:** ![marekbrze](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/marekbrze/32/5252_2.png) [@marekbrze](https://community.penpot.app/u/marekbrze)\
**Post date:** [May 9, 2025, 7:43am UTC](https://community.penpot.app/t/generated-design-tokens-file/8680/3 "2025-05-09T07:43:21Z")

</div>

Thanks for the answer - I will have to check it once I am in front of the computer.

I wonder if in your case Style dictionary require once again to have the full path - so in this case `Global.color.red`. Especially when referencing values from different sets (primitive vs semantic tokens sets).

---

<div class="post-metadata">

**Author:** ![natacha](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/natacha/32/44_2.png) [@natacha](https://community.penpot.app/u/natacha)\
**Post date:** [May 9, 2025, 9:11am UTC](https://community.penpot.app/t/generated-design-tokens-file/8680/4 "2025-05-09T09:11:14Z")

</div>

No, it’s not required. Sets are simply a way to organize your design tokens into logical files, often by theme, platform, or different brands. You can think of them as folders or layers that help manage different versions of the **same tokens**.

However, sets do not appear in token reference names. This is intentional, because one of the key benefits of using sets is the ability to define different values for the **same token name** across multiple sets (e.g., `color.primary` might have a different value in a “light” and “dark” set). If set names were part of the references, this flexibility would be lost.

---

<div class="post-metadata">

**Author:** ![T3sT3ro](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/t3st3ro/32/9940_2.png) [@T3sT3ro](https://community.penpot.app/u/T3sT3ro)\
**Post date:** [March 14, 2026, 1:55pm UTC](https://community.penpot.app/t/generated-design-tokens-file/8680/5 "2026-03-14T13:55:37Z")

</div>

This discussion seems like the most appropriate place to ask about my problem:

I’m using a multi-file export to organize my tokens, splitting my ‘base’ set into granular files like `base/colors.json` and `base/spacing.json`. However, Penpot interprets these as distinct sets rather than a unified ‘base’ library. This creates UI friction, as I have to toggle multiple sets instead of viewing one cohesive category. I need to maintain separate files for version control and AI-readability (avoiding 3,000+ line files), but I want them to be aggregated into a single ‘base’ set within the Penpot UI. What is the recommended configuration to achieve a ‘split-source, unified-display’ workflow?

Example token files (only single keys for brevity of example):  
`base/colors.json:`

```auto
{
  "jungle": {
    "0": {
      "$value": "#ecfeb0",
      "$type": "color",
      "$description": "--jungle-0"
    }
  }
}

```

`base/fontSize.json`

```auto
{
  "0": {
    "$value": "8px",
    "$type": "fontSizes",
    "$description": "--font-size-00 (.5rem)"
  }
}

```

`$metadata.json`:

```auto
{
  "tokenSetOrder": [
    "base/fontWeight",
    "base/rotation",
    "base/lineHeight",
    "base/opacity",
    "base/colors",
    "base/textCase",
    "base/layer",
    "base/spacing",
    "base/shadow",
    "base/fontSize",
    "base/letterSpacing",
    "base/textDecoration",
    "base/borderRadius",
    "base/sizing",
    "base/fontFamily",
    "mode/dark",
    "mode/light",
    "semantic",
    "components"
  ],
  "activeThemes": [
    "/light"
  ],
  "activeSets": [
    "semantic",
    "mode/light",
    "themeLight",
    "themeDark",
    "components"
  ]
}

```

This is what it looks like:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/bf19b11c4d6e9ad14d620326dab96a7e593b5439.png)

Where I would rather have it displayed as a single “base”, similar to how the following semantic ones look like:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/b30cc99caa0e4350da1b38738ae265d721ab5778.png)