{
  "id": 14488385,
  "title": "Stop exporting JSON tokens and use CSS variables instead",
  "url": "https://urgent.news/2026/10/14/stop-exporting-json-tokens-and-use-css-variables-instead",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-10-14T16:30:41.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/alexandersstudi/stop-exporting-json-tokens-and-use-css-variables-instead-3c33"
  },
  "original_language": "en",
  "account": "A designer questioned whether a company should start exporting their brand tokens as JSON files, after reading about complex token pipelines. The reporter disagreed, as they realized their web team only needed simple hex codes for colors in a React application. They were tired of overcomplicated workflows and unnecessary build steps just to use colors.\n\nJSON token exporting often leads to writing scripts to flatten objects and map them to styling solutions like Tailwind or styled-components, adding complexity without much benefit. If a color breaks, it's hard to trace the issue back through the build script. CSS variables, however, are directly understood by the browser and offer a far simpler solution.\n\nCSS variables allow for inspecting values in Chrome DevTools, easy changes during design testing, and scoped styles to specific components. They excel in theming, enabling dark mode toggling with simple data attributes and no JavaScript required. Native apps also have no need for JSON tokens, as the browser handles heavy lifting for them.\n\nThe reporter's company stopped using JSON months ago, now pushing CSS variables directly from Figma to their repository. A pull request appears in GitHub with the raw CSS file, allowing developers to review visual changes and merge them easily. The reporter built Design System Sync to automate this process, eliminating the need for build scripts. They recommend checking out the tool at https://ds-sync.netlify.app?utm_source=devto&utm_medium=post&utm_campaign=bot or grabbing the Figma Community plugin.",
  "summary": "A designer tagged me in a Figma comment on Tuesday morning. They wanted to know if we could start exporting our brand tokens as deeply nested JSON files. They had just read an article about complex token pipelines. I just stared at my screen for a minute. We are a web team building a React application. We do not need a massive parsing engine just to read a blue hex code. This happens all the time…",
  "key_points": [
    "JSON token exporting adds unnecessary complexity to styling workflows",
    "CSS variables offer simpler, browser-understood styling solution",
    "Company stopped using JSON tokens, now uses CSS variables directly"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}