What is the difference between this and /tokens?

The /tokens tool exports a flat W3C DTCG file. Token Studio adds the three-tier architecture (primitive → semantic → component) plus seven extra export formats.

How are semantic names suggested?

Each color is bucketed by OKLCH lightness, chroma and hue into one of nine roles (action.primary, surface.raised, feedback.error, …). The rationale is shown next to every suggestion.

3-tier tokens

Author tokens with primitive · semantic · component tiers

Eight export formats: DTCG, Style Dictionary, Tailwind v4, shadcn, SCSS, CSS, Swift, Kotlin.

Palette (comma-separated hex)

5 colors

1. Primitive

Raw tonal scales (50–950) per palette color.

color.c1

color.c2

color.c3

color.c4

color.c5

2. Semantic

Auto-suggested role per color.

action-tertiary·lighter chromatic, tertiary or hover state

feedback-info·saturated blue, conventional info semantics

action-tertiary·lighter chromatic, tertiary or hover state

feedback-success·saturated green, conventional success semantics

feedback-warning·saturated yellow/amber, conventional warning

3. Component

Refs from semantic to UI parts.

button.background→ action.primary

button.text→ surface.default

card.background→ surface.default

card.text→ text.primary

Export

{
  "color": {
    "c1": {
      "50": {
        "$value": "#ebe7ff",
        "$type": "color"
      },
      "100": {
        "$value": "#d5cbff",
        "$type": "color"
      },
      "200": {
        "$value": "#bfafff",
        "$type": "color"
      },
      "300": {
        "$value": "#a993ff",
        "$type": "color"
      },
      "400": {
        "$value": "#9278ff",
        "$type": "color"
      },
      "500": {
        "$value": "#7c5cff",
        "$type": "color"
      },
      "600": {
        "$value": "#674cd4",
        "$type": "color"
      },
      "700": {
        "$value": "#523da8",
        "$type": "color"
      },
      "800": {
        "$value": "#3d2d7d",
        "$type": "color"
      },
      "900": {
        "$value": "#281d52",
        "$type": "color"
      },
      "950": {
        "$value": "#130e26",
        "$type": "color"
      }
    },
    "c2": {
      "50": {
        "$value": "#d9f9ff",
        "$type": "color"
      },
      "100": {
        "$value": "#adf1ff",
        "$type": "color"
      },
      "200": {
        "$value": "#82eaff",
        "$type": "color"
      },
      "300": {
        "$value": "#57e3ff",
        "$type": "color"
      },
      "400": {
        "$value": "#2bdbff",
        "$type": "color"
      },
      "500": {
        "$value": "#00d4ff",
        "$type": "color"
      },
      "600": {
        "$value": "#00b0d4",
        "$type": "color"
      },
      "700": {
        "$value": "#008ca8",
        "$type": "color"
      },
      "800": {
        "$value": "#00687d",
        "$type": "color"
      },
      "900": {
        "$value": "#004452",
        "$type": "color"
      },
      "950": {
        "$value": "#002026",
        "$type": "color"
      }
    },
    "c3": {
      "50": {
        "$value": "#ffebf9",
        "$type": "color"
      },
      "100": {
        "$value": "#ffd4f3",
        "$type": "color"
      },
      "200": {
        "$value": "#ffbeec",
        "$type": "color"
      },
      "300": {
        "$value": "#ffa7e6",
        "$type": "color"
      },
      "400": {
        "$value": "#ff91df",
        "$type": "color"
      },
      "500": {
        "$value": "#ff7ad9",
        "$type": "color"
      },
      "600": {
        "$value": "#d465b4",
        "$type": "color"
      },
      "700": {
        "$value": "#a8518f",
        "$type": "color"
      },
      "800": {
        "$value": "#7d3c6a",
        "$type": "color"
      },
      "900": {
        "$value": "#522745",
        "$type": "color"
      },
      "950": {
        "$value": "#261221",
        "$type": "color"
      }
    },
    "c4": {
      "50": {
        "$value": "#d9fbe7",
        "$type": "color"
      },
      "100": {
        "$value": "#aff7cd",
        "$type": "color"
      },
      "200": {
        "$value": "#84f3b2",
        "$type": "color"
      },
      "300": {
        "$value": "#59ef97",
        "$type": "color"
      },
      "400": {
        "$value": "#2feb7d",
        "$type": "color"
      },
      "500": {
        "$value": "#04e762",
        "$type": "color"
      },
      "600": {
        "$value": "#03c051",
        "$type": "color"
      },
      "700": {
        "$value": "#039841",
        "$type": "color"
      },
      "800": {
        "$value": "#027130",
        "$type": "color"
      },
      "900": {
        "$value": "#014a1f",
        "$type": "color"
      },
      "950": {
        "$value": "#01230f",
        "$type": "color"
      }
    },
    "c5": {
      "50": {
        "$value": "#fff8e8",
        "$type": "color"
      },
      "100": {
        "$value": "#fff0ce",
        "$type": "color"
      },
      "200": {
        "$value": "#ffe8b4",
        "$type": "color"
      },
      "300": {
        "$value": "#ffe19a",
        "$type": "color"
      },
      "400": {
        "$value": "#ffd980",
        "$type": "color"
      },
      "500": {
        "$value": "#ffd166",
        "$type": "color"
      },
      "600": {
        "$value": "#d4ad55",
        "$type": "color"
      },
      "700": {
        "$value": "#a88a43",
        "$type": "color"
      },
      "800": {
        "$value": "#7d6632",
        "$type": "color"
      },
      "900": {
        "$value": "#524321",
        "$type": "color"
      },
      "950": {
        "$value": "#261f0f",
        "$type": "color"
      }
    }
  },
  "action": {
    "tertiary": {
      "$value": "{color.c1.500}",
      "$type": "color"
    },
    "primary": {
      "$value": "{color.c1.500}",
      "$type": "color"
    }
  },
  "feedback": {
    "info": {
      "$value": "{color.c2.500}",
      "$type": "color"
    },
    "success": {
      "$value": "{color.c4.500}",
      "$type": "color"
    },
    "warning": {
      "$value": "{color.c5.500}",
      "$type": "color"
    }
  },
  "text": {
    "primary": {
      "$value": "{color.c1.900}",
      "$type": "color"
    }
  },
  "surface": {
    "default": {
      "$value": "{color.c1.50}",
      "$type": "color"
    }
  },
  "button": {
    "background": {
      "$value": "{action.primary}",
      "$type": "color"
    },
    "text": {
      "$value": "{surface.default}",
      "$type": "color"
    }
  },
  "card": {
    "background": {
      "$value": "{surface.default}",
      "$type": "color"
    },
    "text": {
      "$value": "{text.primary}",
      "$type": "color"
    }
  }
}

2. Semantic

Auto-suggested role per color.

action-tertiary·lighter chromatic, tertiary or hover state

feedback-info·saturated blue, conventional info semantics

action-tertiary·lighter chromatic, tertiary or hover state

feedback-success·saturated green, conventional success semantics

feedback-warning·saturated yellow/amber, conventional warning

{ "color": { "c1": { "50": { "$value": "#ebe7ff", "$type": "color" }, "100": { "$value": "#d5cbff", "$type": "color" }, "200": { "$value": "#bfafff", "$type": "color" }, "300": { "$value": "#a993ff", "$type": "color" }, "400": { "$value": "#9278ff", "$type": "color" }, "500": { "$value": "#7c5cff", "$type": "color" }, "600": { "$value": "#674cd4", "$type": "color" }, "700": { "$value": "#523da8", "$type": "color" }, "800": { "$value": "#3d2d7d", "$type": "color" }, "900": { "$value": "#281d52", "$type": "color" }, "950": { "$value": "#130e26", "$type": "color" } }, "c2": { "50": { "$value": "#d9f9ff", "$type": "color" }, "100": { "$value": "#adf1ff", "$type": "color" }, "200": { "$value": "#82eaff", "$type": "color" }, "300": { "$value": "#57e3ff", "$type": "color" }, "400": { "$value": "#2bdbff", "$type": "color" }, "500": { "$value": "#00d4ff", "$type": "color" }, "600": { "$value": "#00b0d4", "$type": "color" }, "700": { "$value": "#008ca8", "$type": "color" }, "800": { "$value": "#00687d", "$type": "color" }, "900": { "$value": "#004452", "$type": "color" }, "950": { "$value": "#002026", "$type": "color" } }, "c3": { "50": { "$value": "#ffebf9", "$type": "color" }, "100": { "$value": "#ffd4f3", "$type": "color" }, "200": { "$value": "#ffbeec", "$type": "color" }, "300": { "$value": "#ffa7e6", "$type": "color" }, "400": { "$value": "#ff91df", "$type": "color" }, "500": { "$value": "#ff7ad9", "$type": "color" }, "600": { "$value": "#d465b4", "$type": "color" }, "700": { "$value": "#a8518f", "$type": "color" }, "800": { "$value": "#7d3c6a", "$type": "color" }, "900": { "$value": "#522745", "$type": "color" }, "950": { "$value": "#261221", "$type": "color" } }, "c4": { "50": { "$value": "#d9fbe7", "$type": "color" }, "100": { "$value": "#aff7cd", "$type": "color" }, "200": { "$value": "#84f3b2", "$type": "color" }, "300": { "$value": "#59ef97", "$type": "color" }, "400": { "$value": "#2feb7d", "$type": "color" }, "500": { "$value": "#04e762", "$type": "color" }, "600": { "$value": "#03c051", "$type": "color" }, "700": { "$value": "#039841", "$type": "color" }, "800": { "$value": "#027130", "$type": "color" }, "900": { "$value": "#014a1f", "$type": "color" }, "950": { "$value": "#01230f", "$type": "color" } }, "c5": { "50": { "$value": "#fff8e8", "$type": "color" }, "100": { "$value": "#fff0ce", "$type": "color" }, "200": { "$value": "#ffe8b4", "$type": "color" }, "300": { "$value": "#ffe19a", "$type": "color" }, "400": { "$value": "#ffd980", "$type": "color" }, "500": { "$value": "#ffd166", "$type": "color" }, "600": { "$value": "#d4ad55", "$type": "color" }, "700": { "$value": "#a88a43", "$type": "color" }, "800": { "$value": "#7d6632", "$type": "color" }, "900": { "$value": "#524321", "$type": "color" }, "950": { "$value": "#261f0f", "$type": "color" } } }, "action": { "tertiary": { "$value": "{color.c1.500}", "$type": "color" }, "primary": { "$value": "{color.c1.500}", "$type": "color" } }, "feedback": { "info": { "$value": "{color.c2.500}", "$type": "color" }, "success": { "$value": "{color.c4.500}", "$type": "color" }, "warning": { "$value": "{color.c5.500}", "$type": "color" } }, "text": { "primary": { "$value": "{color.c1.900}", "$type": "color" } }, "surface": { "default": { "$value": "{color.c1.50}", "$type": "color" } }, "button": { "background": { "$value": "{action.primary}", "$type": "color" }, "text": { "$value": "{surface.default}", "$type": "color" } }, "card": { "background": { "$value": "{surface.default}", "$type": "color" }, "text": { "$value": "{text.primary}", "$type": "color" } } }