> ## 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.

# set_variables: Write CSS Custom Properties

> Write CSS custom properties to the DesignJS iframe :root to update design tokens — changes are merged, persisted to .designjs.json, and applied on reload.

The `set_variables` tool writes CSS custom properties to the `:root` of the canvas iframe. Variables you set here become available throughout the canvas as design tokens — any component using `var(--your-token)` in its styles will reflect the change immediately. The update is a merge operation: only the keys you provide are written, and any existing keys you don't include are preserved unchanged. The full updated map is returned so your agent can confirm the final state.

Changes made with `set_variables` are persisted to the `cssVariables` section of `.designjs.json` and re-applied every time the canvas reloads, making them a durable part of your design system.

## Parameters

<ParamField path="variables" type="object" required>
  A `Record<string, string>` of CSS custom property names (including the `--` prefix) to their new values. For example: `{ "--brand-primary": "oklch(0.55 0.2 260)", "--radius-lg": "1rem" }`. Values can be any valid CSS value string.
</ParamField>

## Response

<ResponseField name="variables" type="object" required>
  The complete updated `Record<string, string>` of all CSS custom properties currently applied to the canvas `:root` — not just the ones you changed. This is equivalent to calling `get_variables` immediately after the update.
</ResponseField>

## Example

<CodeGroup>
  ```json request — set brand color tokens theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "set_variables",
      "arguments": {
        "variables": {
          "--brand-primary": "oklch(0.55 0.2 260)",
          "--brand-secondary": "oklch(0.65 0.15 180)",
          "--brand-accent": "oklch(0.75 0.18 35)"
        }
      }
    }
  }
  ```

  ```json request — update spacing and radius scale theme={null}
  {
    "method": "tools/call",
    "params": {
      "name": "set_variables",
      "arguments": {
        "variables": {
          "--spacing-xs": "0.25rem",
          "--spacing-sm": "0.5rem",
          "--spacing-md": "1rem",
          "--spacing-lg": "2rem",
          "--radius-sm": "0.25rem",
          "--radius-md": "0.5rem",
          "--radius-lg": "1rem",
          "--radius-full": "9999px"
        }
      }
    }
  }
  ```
</CodeGroup>

```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)\", \"--brand-accent\": \"oklch(0.75 0.18 35)\", \"--text-primary\": \"#111827\", \"--surface-default\": \"#ffffff\"}}"
    }
  ]
}
```

<Note>
  Variables are merged into the existing set. To remove a variable, you cannot pass `null` or an empty string — you would need to manually edit `.designjs.json` or reset the canvas. When in doubt, call `get_variables` first to inspect what's already defined.
</Note>

<Tip>
  Design token workflows work well as a first step: call `set_variables` with your complete token set before adding any components. Components you add via `add_components` can then reference these tokens using `var(--token-name)` in their style attributes.
</Tip>