Skip to main content

Token Format Reference

Complete reference for the W3C Design Tokens format used by GitFig.

Basic Structure​

{
  "tokenName": {
    "$value": "<value>",
    "$type": "<type>",
    "$description": "<optional description>"
  }
}

Properties​

PropertyRequiredDescription
$valueYesThe token value
$typeYesType identifier
$descriptionNoHuman-readable description

Token Types​

Color​

{
  "$value": "#0066FF",
  "$type": "color"
}

Supported formats:

  • Hex: #RGB, #RRGGBB, #RRGGBBAA
  • RGB: rgb(r, g, b), rgba(r, g, b, a)
  • HSL: hsl(h, s%, l%), hsla(h, s%, l%, a)

Number / Dimension​

{
  "$value": 16,
  "$type": "number"
}

Or with units:

{
  "$value": "16px",
  "$type": "dimension"
}

String​

{
  "$value": "Inter",
  "$type": "string"
}

Boolean​

{
  "$value": true,
  "$type": "boolean"
}

Nesting / Groups​

{
  "colors": {
    "brand": {
      "primary": {
        "$value": "#0066FF",
        "$type": "color"
      }
    }
  }
}

Creates variable: colors/brand/primary

Complete Example​

{
  "colors": {
    "brand": {
      "primary": {
        "$value": "#0066FF",
        "$type": "color",
        "$description": "Primary brand color"
      },
      "secondary": {
        "$value": "#6B7280",
        "$type": "color"
      }
    },
    "text": {
      "primary": { "$value": "#111827", "$type": "color" },
      "secondary": { "$value": "#6B7280", "$type": "color" },
      "disabled": { "$value": "#9CA3AF", "$type": "color" }
    }
  },
  "spacing": {
    "xs": { "$value": 4, "$type": "number" },
    "sm": { "$value": 8, "$type": "number" },
    "md": { "$value": 16, "$type": "number" },
    "lg": { "$value": 24, "$type": "number" }
  },
  "typography": {
    "fontFamily": {
      "sans": { "$value": "Inter", "$type": "string" },
      "mono": { "$value": "JetBrains Mono", "$type": "string" }
    }
  }
}