Your site-wide colors, text styles and spacing.
The TeleportHQ Design Language panel holds your site-wide colors, text styles, sizes and spacing, CSS variables and CSS classes; it shows in the editor's right panel when nothing is selected and in Project settings under Appearance, and when you change a value there every element that uses it updates.
In TeleportHQ, deselect all elements, open the Color tab of the Design Language panel and pick a theme from the theme list; use the sun/moon switch for light or dark, and the Custom Theme Colors button to edit single theme colors.
In TeleportHQ, open the Color tab of the Design Language panel, click + in a category to save a named color or gradient, then pick it in any color field; editing a saved color updates every element that uses it.
In TeleportHQ, open the Text tab of the Design Language panel, click +, name the style and set its font, weight, size, line height and letter spacing, then click Add; editing a text style updates every text that uses it.
In TeleportHQ, select a text element, click the link icon in the Text Style section of the right panel and pick a style from the Text Styles list; the text then follows that style until you unlink it.
In TeleportHQ, open the Layout tab of the Design Language panel, click + under Size, Space or Radius, enter a name and a fixed or fluid value, then pick it in width, margin, padding, gap or radius fields.
In TeleportHQ, open the Vars tab of the Design Language panel, create a category, click + to save any CSS value under a name, then pick that variable in a style field, a class property or the Advanced tab; editing it updates everything that uses it.
