> ## Documentation Index
> Fetch the complete documentation index at: https://opencanvas.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<ResponseField name="variables" type="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" }`.
</ResponseField>

## Example

<CodeGroup>
  ```json request theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "get_variables",
      "arguments": {}
    }
  }
  ```

  ```json response theme={null}
  {
    "content": [
      {
        "type": "text",
        "text": "{\"variables\": {\"--brand-primary\": \"oklch(0.55 0.2 260)\", \"--brand-secondary\": \"oklch(0.65 0.15 180)\", \"--text-primary\": \"#111827\", \"--text-muted\": \"#6B7280\", \"--surface-default\": \"#ffffff\", \"--surface-subtle\": \"#F9FAFB\", \"--radius-md\": \"0.5rem\", \"--spacing-section\": \"4rem\"}}"
      }
    ]
  }
  ```
</CodeGroup>

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

<Note>
  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.
</Note>