> ## Documentation Index
> Fetch the complete documentation index at: https://docs.humic.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# JSON (W3C)

> Export design tokens in the W3C Design Tokens Community Group format.

The JSON export follows the [W3C Design Tokens Community Group](https://design-tokens.github.io/community-group/format/) specification. This makes your tokens compatible with tools like Style Dictionary, Figma Tokens, and other design token processors.

## Output format

```json theme={null}
{
  "color": {
    "brand": {
      "primary": {
        "$value": "#36AA08",
        "$type": "color",
        "$extensions": {
          "com.humic": {
            "dark": "#5DC731"
          }
        }
      }
    }
  },
  "spacing": {
    "page": {
      "gutter": {
        "$value": "16px",
        "$type": "dimension"
      }
    }
  },
  "font": {
    "size": {
      "body": {
        "$value": "16px",
        "$type": "fontSize"
      }
    },
    "weight": {
      "bold": {
        "$value": 700,
        "$type": "fontWeight"
      }
    },
    "family": {
      "sans": {
        "$value": "Inter",
        "$type": "fontFamily"
      }
    }
  }
}
```

## Token type mapping

Humic token types map to W3C types as follows:

| Humic type           | W3C `$type`     |
| -------------------- | --------------- |
| `color`              | `color`         |
| `spacing`            | `dimension`     |
| `radius`             | `dimension`     |
| `font.size`          | `fontSize`      |
| `font.weight`        | `fontWeight`    |
| `font.family`        | `fontFamily`    |
| `font.lineHeight`    | `lineHeight`    |
| `font.letterSpacing` | `letterSpacing` |
| `shadow`             | `shadow`        |
| `opacity`            | `number`        |
| `duration`           | `duration`      |
| `easing`             | `cubicBezier`   |
| `z-index`            | `number`        |
| `boolean`            | `boolean`       |

## Dark mode

Dark mode values are stored in the `$extensions.com.humic.dark` field. Only tokens with different dark values include this extension.

This approach keeps the W3C format valid while preserving dark mode information. You can use it in your token pipeline:

```javascript theme={null}
// Read the JSON export
const tokens = await fetch("https://humic.dev/api/v1/export/json", {
  headers: { Authorization: "Bearer sk_live_..." },
}).then((r) => r.json())

// Access a token's light and dark values
const primary = tokens.color.brand.primary
const lightValue = primary.$value                        // "#36AA08"
const darkValue = primary.$extensions?.["com.humic"]?.dark // "#5DC731"
```