How to use CSS variables (Vars)

In TeleportHQ, the Vars tab of the Design Language panel stores CSS variables: any CSS value saved under a name, such as a card shadow 0 4px 12px rgba(0,0,0,0.1). Create a category, click +, enter a name and a value, then pick the variable in style fields, class properties or the Advanced tab. Changing the variable updates everything that uses it.

Before you start#

• Vars are available on every TeleportHQ plan.
• You need a role that can edit the Design Language (Owner, Admin or Designer). Other roles see "Your current role does not have permission to update tokens."
• A CSS variable is useful for values that the Color and Layout tabs can't hold, like shadows, transitions or font stacks. For colors, sizes and spacing of your own, those tabs work too.
• In Project settings, the same tab is called Variables (Project settings → Appearance → Design language → Variables).

Steps#

1. Create a category#

1. Press Esc, or click an empty part of the canvas, so no element is selected.
2. In the right panel, click the Vars tab.
3. At the bottom of the list, click the field Add new category.
4. Type a name, for example Effects.
5. Press Enter, or click +.

2. Add a variable#

1. In the Effects category, click +. A panel titled New Effects Token opens.
2. In Name, type a name, for example card-shadow.
3. In Value, type the CSS value, for example 0 4px 12px rgba(0,0,0,0.1).
4. Click Add, or press Enter.

The variable appears with its name and value. In your site's CSS it's called --card-shadow (always lowercase).

3. Use the variable#

1. On the canvas, click an element, for example a card container.
2. In the right panel, open the Advanced tab.
3. In the new property row, type box-shadow in property.
4. Click the value field and pick card-shadow from the list.
5. Click +.

You can also pick variables in the Properties of a CSS class. See How to edit a CSS class.

Check that it worked#

The card shows the shadow. Edit the variable in the Vars tab, click Update, and every element using it updates.

Variables TeleportHQ adds for you#

• Imported: when you import HTML and CSS, CSS variables from your code go into a category called Imported.
• Design System: sites the TeleportHQ AI built, and ready-made sections, use standard variables for spacing, corner radius, shadows, widths and text sizes, for example spacing-md or border-radius-card. When one of them is missing, TeleportHQ adds it with a standard value, so it works and you can edit it here.
• Sites the AI built also keep their colors and fonts here, for example color-primary and font-family-heading. The colors also show on the Color tab under AI Generated.

Troubleshooting#

Clicking my variable opens a color picker instead of a text box Variables whose value is a hex, RGB, HSL or gradient color open the color editor. They also appear on the Color tab under AI Generated. Colors in formats like color-mix or oklch keep the text box.

"Tokens must have a name." / "Token names can't be more than 30 characters long." / "Token names can't contain any special characters." Use a name of up to 30 characters with letters, numbers, hyphens, underscores or dots. Spaces are removed when you leave the field.

Move Up, Move Down or Duplicate on a Vars category does something odd On the Vars tab, Move Up and Move Down in a category's menu do nothing. Duplicate creates an empty category with the same name on the Color tab. The delete message also says "Color Category". Rename and Delete work normally.

Good to know#

• The Info section at the top of the Vars tab calls it the "Custom Tab". It's the same tab.
• Variables appear in every value list in the right panel, not only in fields where they fit. TeleportHQ lists the ones whose value suits the field first, for example lengths on a padding field. Pick only variables whose value makes sense for the property.
• Deleting a variable with × works even when it's set as the page background or default text color. The role is dropped without a warning, so check the Color tab afterwards.