Design Tokens JSON Export

Export ChromUI themes as JSON design tokens. W3C Design Tokens format compatible with design tools and token processors. Includes colors, typography, spacing, shadows, and border radius.

Output Format

The JSON export follows the W3C Design Tokens format. Tokens are organized by category: colors, typography, spacing, shadows, and border radius. Each token includes a `$type` property indicating the token type (color, dimension, etc.) and a `$value` with the actual value.

Color tokens use hex values. Typography tokens include font families, sizes, line heights, and font weights. Spacing tokens use pixel or rem values. Shadow tokens include full shadow definitions. Border radius tokens use pixel values.

How to Apply

Use the JSON with design token processors like Style Dictionary, Theo, or Figma Tokens. Import into design tools (Figma, Sketch) using token plugins. Transform to CSS, iOS, Android, or other formats using token processors.

{
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#10b981"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "background": {
      "$type": "color",
      "$value": "#0f172a"
    }
  },
  "typography": {
    "font-family": {
      "heading": {
        "$type": "fontFamily",
        "$value": ["Inter", "sans-serif"]
      },
      "body": {
        "$type": "fontFamily",
        "$value": ["Inter", "sans-serif"]
      }
    },
    "font-size": {
      "base": {
        "$type": "dimension",
        "$value": "16px"
      },
      "sm": {
        "$type": "dimension",
        "$value": "14px"
      }
    }
  },
  "spacing": {
    "1": {
      "$type": "dimension",
      "$value": "4px"
    },
    "2": {
      "$type": "dimension",
      "$value": "8px"
    }
  }
}