Skip to main content
The JSON export follows the W3C Design Tokens Community Group specification. This makes your tokens compatible with tools like Style Dictionary, Figma Tokens, and other design token processors.

​
Output format

{
  "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 typeW3C $type
colorcolor
spacingdimension
radiusdimension
font.sizefontSize
font.weightfontWeight
font.familyfontFamily
font.lineHeightlineHeight
font.letterSpacingletterSpacing
shadowshadow
opacitynumber
durationduration
easingcubicBezier
z-indexnumber
booleanboolean

​
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: 
// 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"