Documentation
Export Formats
ReframeUI exports tokens in seven formats. Choose the one that matches your toolchain and drop the output directly into your project.
DTCG
The W3C Design Tokens Community Group format. Uses $value and $type keys at each token leaf. Choose this for standards-compliant pipelines or any tool that reads W3C tokens directly.
{
"color": {
"brand": {
"$value": "#0066FF",
"$type": "color"
},
"surface": {
"$value": "#FFFFFF",
"$type": "color"
}
},
"spacing": {
"md": {
"$value": "16px",
"$type": "dimension"
}
}
}Style Dictionary
Amazon's token transform tool format. Tokens nest by category, with a value key at each leaf. Use this if your pipeline already runs Style Dictionary transforms.
{
"color": {
"brand": {
"value": "#0066FF"
},
"surface": {
"value": "#FFFFFF"
}
},
"spacing": {
"md": {
"value": "16px"
},
"lg": {
"value": "24px"
}
}
}Tailwind
The theme.extend object as JSON. Drop it into your Tailwind config to apply tokens across your utility classes.
{
"colors": {
"brand": "#0066FF",
"surface": "#FFFFFF"
},
"spacing": {
"md": "16px",
"lg": "24px"
},
"borderRadius": {
"sm": "4px",
"md": "8px"
}
}CSS Variables
A :root {} block of custom properties. Reference tokens with var(--token-name) in any CSS-in-JS setup or vanilla CSS project.
:root {
--color-brand: #0066FF;
--color-surface: #FFFFFF;
--spacing-md: 16px;
--spacing-lg: 24px;
--border-radius-sm: 4px;
--border-radius-md: 8px;
}Chakra UI
Nested theme JSON with colors, space, and fontSizes scales. Pass it to Chakra UI's theme customization to apply your tokens.
{
"colors": {
"brand": {
"500": "#0066FF",
"600": "#0052CC"
}
},
"space": {
"4": "16px",
"6": "24px"
},
"fontSizes": {
"sm": "14px",
"md": "16px"
}
}Ant Design
A flat map of camelCase Ant Design v5 token keys, such as colorPrimary and borderRadius. Pass it directly to your Ant Design v5 theme config.
{
"colorPrimary": "#0066FF",
"colorBgContainer": "#FFFFFF",
"colorText": "#1A1A1A",
"borderRadius": 8,
"fontSize": 14
}Figma Variables
JSON matching the Figma Variables REST API shape, with collections, modes, and variables. Use it to import tokens back into Figma or keep your Figma variables in sync.
{
"collections": [
{
"name": "Primitives",
"modes": ["Default"],
"variables": [
{
"name": "color/brand",
"resolvedType": "COLOR",
"valuesByMode": {
"Default": { "r": 0, "g": 0.4, "b": 1, "a": 1 }
}
},
{
"name": "spacing/md",
"resolvedType": "FLOAT",
"valuesByMode": {
"Default": 16
}
}
]
}
]
}Next steps
Bringing tokens in instead? See what source formats ReframeUI accepts.
Import Formats →