Export design decisions as W3C DTCG design tokens JSON. Import into Figma (Tokens Studio) or Penpot.
Export design decisions as W3C DTCG-compliant JSON tokens for Figma (Tokens Studio) or Penpot import.
/plugin marketplace add saadshahd/moo.md/plugin install design@moo.mdExport design system decisions as W3C DTCG-compliant design tokens JSON.
$ARGUMENTS
Context from directions or system workflow, or explicit token request.
Follow W3C Design Tokens Community Group format.
Required structure:
{
"$schema": "https://design-tokens.org/schema.json",
"color": { ... },
"typography": { ... },
"spacing": { ... }
}
mkdir -p tokens
Use Write tool to create tokens/design-tokens.json
Figma (via Tokens Studio):
Penpot:
Code (via Style Dictionary):
npm install -g style-dictionary
style-dictionary build
{
"color": {
"primary": {
"$type": "color",
"$value": "#0066FF",
"$description": "Primary brand color"
},
"primary-hover": {
"$type": "color",
"$value": "#0052CC"
},
"secondary": {
"$type": "color",
"$value": "#6B7280"
},
"background": {
"$type": "color",
"$value": "#FFFFFF"
},
"surface": {
"$type": "color",
"$value": "#F9FAFB"
},
"text": {
"$type": "color",
"$value": "#111827"
},
"text-muted": {
"$type": "color",
"$value": "#6B7280"
},
"error": {
"$type": "color",
"$value": "#DC2626"
},
"success": {
"$type": "color",
"$value": "#16A34A"
}
}
}
{
"typography": {
"font-family": {
"base": {
"$type": "fontFamily",
"$value": "Inter, system-ui, sans-serif"
},
"heading": {
"$type": "fontFamily",
"$value": "Inter, system-ui, sans-serif"
},
"mono": {
"$type": "fontFamily",
"$value": "JetBrains Mono, monospace"
}
},
"font-size": {
"xs": { "$type": "dimension", "$value": "12px" },
"sm": { "$type": "dimension", "$value": "14px" },
"base": { "$type": "dimension", "$value": "16px" },
"lg": { "$type": "dimension", "$value": "18px" },
"xl": { "$type": "dimension", "$value": "20px" },
"2xl": { "$type": "dimension", "$value": "24px" },
"3xl": { "$type": "dimension", "$value": "30px" },
"4xl": { "$type": "dimension", "$value": "36px" }
},
"font-weight": {
"normal": { "$type": "fontWeight", "$value": 400 },
"medium": { "$type": "fontWeight", "$value": 500 },
"semibold": { "$type": "fontWeight", "$value": 600 },
"bold": { "$type": "fontWeight", "$value": 700 }
},
"line-height": {
"tight": { "$type": "number", "$value": 1.25 },
"normal": { "$type": "number", "$value": 1.5 },
"relaxed": { "$type": "number", "$value": 1.75 }
}
}
}
{
"spacing": {
"0": { "$type": "dimension", "$value": "0px" },
"1": { "$type": "dimension", "$value": "4px" },
"2": { "$type": "dimension", "$value": "8px" },
"3": { "$type": "dimension", "$value": "12px" },
"4": { "$type": "dimension", "$value": "16px" },
"5": { "$type": "dimension", "$value": "20px" },
"6": { "$type": "dimension", "$value": "24px" },
"8": { "$type": "dimension", "$value": "32px" },
"10": { "$type": "dimension", "$value": "40px" },
"12": { "$type": "dimension", "$value": "48px" },
"16": { "$type": "dimension", "$value": "64px" }
}
}
{
"border": {
"radius": {
"none": { "$type": "dimension", "$value": "0px" },
"sm": { "$type": "dimension", "$value": "4px" },
"md": { "$type": "dimension", "$value": "8px" },
"lg": { "$type": "dimension", "$value": "12px" },
"full": { "$type": "dimension", "$value": "9999px" }
},
"width": {
"thin": { "$type": "dimension", "$value": "1px" },
"medium": { "$type": "dimension", "$value": "2px" }
}
}
}
{
"shadow": {
"sm": {
"$type": "shadow",
"$value": {
"color": "#0000001a",
"offsetX": "0px",
"offsetY": "1px",
"blur": "2px",
"spread": "0px"
}
},
"md": {
"$type": "shadow",
"$value": {
"color": "#0000001a",
"offsetX": "0px",
"offsetY": "4px",
"blur": "6px",
"spread": "-1px"
}
},
"lg": {
"$type": "shadow",
"$value": {
"color": "#0000001a",
"offsetX": "0px",
"offsetY": "10px",
"blur": "15px",
"spread": "-3px"
}
}
}
}
From a design system workflow:
{
"$schema": "https://design-tokens.org/schema.json",
"color": {
"primary": { "$type": "color", "$value": "#0066FF" },
"primary-hover": { "$type": "color", "$value": "#0052CC" },
"secondary": { "$type": "color", "$value": "#6B7280" },
"background": { "$type": "color", "$value": "#FFFFFF" },
"surface": { "$type": "color", "$value": "#F9FAFB" },
"text": { "$type": "color", "$value": "#111827" },
"text-muted": { "$type": "color", "$value": "#6B7280" },
"error": { "$type": "color", "$value": "#DC2626" },
"success": { "$type": "color", "$value": "#16A34A" }
},
"typography": {
"font-family": {
"base": { "$type": "fontFamily", "$value": "Inter, sans-serif" }
},
"font-size": {
"base": { "$type": "dimension", "$value": "16px" },
"lg": { "$type": "dimension", "$value": "18px" },
"xl": { "$type": "dimension", "$value": "20px" }
}
},
"spacing": {
"4": { "$type": "dimension", "$value": "16px" },
"6": { "$type": "dimension", "$value": "24px" },
"8": { "$type": "dimension", "$value": "32px" }
},
"border": {
"radius": {
"md": { "$type": "dimension", "$value": "8px" }
}
}
}