How to create reusable sizes, spacing and corner radius

In TeleportHQ, you save sizes, spacing and corner radius values in the Layout tab of the Design Language panel. Click + under Size, Space or Radius, enter a name and a value, then click Add. The value then appears in matching fields in the right panel, and changing it later updates every element that uses it.

Before you start#

• Layout values 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."

Where each kind of value can be used#

Border width never offers saved values.

Steps#

1. Create a value#

1. Press Esc, or click an empty part of the canvas, so no element is selected.
2. In the right panel, click the Layout tab.
3. In a category, for example Space, click + after the last value. The New Space Token panel opens.
4. In Name, type a name, for example SectionPadding.
5. In Value, type a value with its unit, for example 40px.
6. Click Add.

The value appears in the list with a bar that shows its size.

2. Use it on an element#

1. On the canvas, click an element, for example a section container.
2. In the right panel, open Padding.
3. Click a padding field and pick SectionPadding from the list.

Make a value scale with screen size (Fluid Value)#

A fluid value in TeleportHQ grows and shrinks smoothly between your smallest screen size and your default screen size. For example, padding that is 16px on phones and 64px on laptops.

1. In the New … Token panel, turn on Fluid Value.
2. In Min, type the phone value, for example 16px.
3. In Max, type the laptop value, for example 64px.
4. Click Add.

Switch between px and rem#

In the value panel, click Convert to rem or Convert to px. TeleportHQ converts the value using your default text style's font size as 1rem (rem is a unit based on the text size). The button is greyed out until the value is in px or rem.

Check that it worked#

The element uses the new value. Open the value in the Layout tab, change it, and click Update. The element updates. To find every element using the value, right-click it and choose Highlight linked nodes or View linked nodes.

Troubleshooting#

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

My value doesn't show in a field Each category only shows in its own fields: sizes in width and height, spacing in margin, padding and gap, radius in radius. Border width has no saved values.

Arrow keys don't change the value in the field Fields that offer a list of saved values don't support arrow-key changes. Type the number instead.

My site uses values like spacing-md that aren't in the Layout tab Sites the TeleportHQ AI built, and ready-made sections, keep their spacing, radius and shadow values as CSS variables on the Vars tab, for example in a Design System category. Edit them there. See How to use CSS variables (Vars).

Good to know#

• New TeleportHQ projects include these values:
  • Size: XSmall 16px, Small 48px, Medium 96px, Large 144px, XLarge 192px, XXLarge 288px, MaxWidth 1400px.
  • Space: HalfUnit 8px, Unit 16px, OneAndHalfUnits 24px, TwoUnits 32px, ThreeUnits 48px, FourUnits 64px, FiveUnits 80px, SixUnits 96px.
  • Radius: Radius2 2px, Radius4 4px, Radius8 8px, Round 50%, plus the theme's buttonradius, inputradius, cardradius and imageradius.
• You can't add, rename or delete the Size, Space and Radius categories.
• Deleting a value keeps it on your elements as a fixed number, the same way deleting a color does.
• When you drag margin or padding on the canvas, the value snaps to your saved spacing values.
• Switching theme doesn't change radius values.