tokens.json: W3C Design Tokens from Any Website

When DesignDNA scans a website, one of the five files it produces is tokens.json. This isn't a bespoke format — it's a structured JSON file that follows the emerging W3C Design Token Community Group specification, making it compatible with an entire ecosystem of tooling.

What tokens.json Contains

tokens.json is a nested JSON structure where every design decision is expressed as a typed token. Each token has a $value and a $type:

{
  "color": {
    "primary": { "$value": "#6D3FFF", "$type": "color" },
    "background": { "$value": "#09090B", "$type": "color" },
    "foreground": { "$value": "#FAFAFA", "$type": "color" },
    "muted": { "$value": "#3F3F46", "$type": "color" },
    "destructive": { "$value": "#EF4444", "$type": "color" }
  },
  "spacing": {
    "1": { "$value": "4px", "$type": "dimension" },
    "2": { "$value": "8px", "$type": "dimension" },
    "4": { "$value": "16px", "$type": "dimension" },
    "8": { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px", "$type": "dimension" },
    "md": { "$value": "8px", "$type": "dimension" },
    "lg": { "$value": "16px", "$type": "dimension" },
    "pill": { "$value": "9999px", "$type": "dimension" }
  },
  "typography": {
    "display": {
      "fontFamily": { "$value": "Inter", "$type": "fontFamily" },
      "fontSize": { "$value": "48px", "$type": "dimension" },
      "fontWeight": { "$value": "700", "$type": "fontWeight" },
      "lineHeight": { "$value": "105%", "$type": "number" }
    }
  }
}

This structure is intentional. It enables tool interoperability: the same file that goes into Figma can also be consumed by your build pipeline, your Storybook instance, and your documentation generator.

Why W3C Standard Matters

The W3C Design Token Community Group is working to standardize how design tokens are expressed across tools. tokens.json follows this emerging spec, which means:

No vendor lock-in — your tokens aren't trapped in a proprietary tool format
Future compatibility — as tooling matures, W3C-compliant tokens will work everywhere
Cross-platform — the same token file drives CSS variables, JavaScript constants, iOS Swift values, and Android resource files

Using tokens.json in Figma via Tokens Studio

Tokens Studio (formerly "Figma Tokens") is the only plugin you should use to bring tokens.json into Figma. (For other plugins like Variables Pro or Tokenhaus, use your figma-export.json file instead).

Setup:

Install Tokens Studio for Figma from Figma Community (free tier available)
Open the plugin in your Figma file
Click "Load" → "JSON" or paste your tokens.json content directly
Token sets appear in the panel: colors, spacing, radius, typography, shadows
Click "Apply to document" to create Figma Styles from your tokens

Result: Every color becomes a local paint style. Every text style maps to a Figma text style. Every spacing value is a named token your designers can apply per-layer. When a token value changes, applying it in Tokens Studio updates every component that references it — in both directions, from design to code.

Tokens Studio also supports GitHub sync, meaning you can commit your tokens.json to your repository and have Figma stay in sync with your codebase automatically. This is the foundation of a genuine design-code pipeline.

What Gets Created in Figma

When you apply tokens.json through Tokens Studio:

Local color styles (paint styles panel) — one per color token
Local text styles — created from typography tokens
Spacing and radius — available as named references in Tokens Studio panel
Shadow tokens — applied as effect styles
GitHub sync — push token changes directly to your repository from Figma

Using tokens.json in Code

tokens.json is equally useful on the code side. Several tools can transform it into any format your stack needs:

Style Dictionary (Amazon) transforms tokens.json into CSS variables, Sass variables, JavaScript ES modules, iOS Swift, and Android XML — all from one source file.

Token Transformer (Tokens Studio) converts the format for Style Dictionary compatibility.

Direct import in JavaScript:

import tokens from './tokens.json';

// Use token values directly in JS/TS
const primaryColor = tokens.color.primary.$value; // "#6D3FFF"

tokens.json as the Single Source of Truth

The highest-value use of tokens.json is establishing it as the single source of truth for your entire design-to-development pipeline:

DesignDNA scan → tokens.json → GitHub
                                    ↓
                    Figma (via Tokens Studio) ↔ Codebase (via Style Dictionary)
                                    ↓
                            CSS variables / Tailwind / Swift / XML

Every time you rescan with DesignDNA, you get a fresh tokens.json that reflects your current production design. Commit it, and Tokens Studio syncs Figma. Style Dictionary rebuilds your CSS. Your design system stays in sync with reality.

Extracting tokens.json from Any Website

You don't need to build a design system from scratch to get a tokens.json. DesignDNA can reverse-engineer one from any live website.

Scan a competitor's site, your own production app, or a design inspiration source — you get a structured, W3C-compliant token file in seconds. That's a design system extraction that used to take a senior designer days of manual audit work.

Generate your tokens.json now →

Back to Blog