get_variables: Read CSS Custom Properties

Read all CSS custom properties defined on the DesignJS iframe :root — your design token values including colors, spacing, and typography scales.

The get_variables tool reads all CSS custom properties currently applied to the :root of the canvas iframe and returns them as a flat key–value map. These properties are your design tokens — brand colors, spacing scales, type ramp values, border radii — anything you’ve defined using set_variables or loaded from .designjs.json. Your agent can read this map to understand the design system before making changes, or to export tokens to a TypeScript or JSON file for use in a React project.

Parameters

get_variables takes no parameters. Pass an empty object as arguments.

Response

variables · object · required

A flat Record<string, string> mapping CSS custom property names (including the leading --) to their current values. For example: { "--brand-primary": "oklch(0.55 0.2 260)", "--spacing-md": "1rem" }.

Example

request

{
  "method": "tools/call",
  "params": {
    "name": "get_variables",
    "arguments": {}
  }
}

Use get_variables before calling set_variables to understand the existing token set. This prevents accidentally overwriting tokens your design already depends on.

Custom properties are scoped to the canvas iframe :root. They are not inherited from the host page styles. Only properties explicitly set via set_variables or loaded from .designjs.json appear in the response.