Design Tokens

The design token panel reads all CSS custom properties (--* variables) defined on the page and lets you export them as JSON.

Opening the panel

Press D while Calipers is active, or click Tokens in the control panel.

What it shows

Each token displays:

• Name — the custom property name (e.g. --color-primary)
• Value — the computed value
• Type — colour, spacing, typography, or other (classified automatically)

Exporting

Click Copy JSON to copy all tokens as a JSON object to your clipboard — ready to paste into a design system file, Figma tokens plugin, or codebase.

Click to copy

Click any individual token row to copy that single name: value pair.