Design & styling

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.

A CSS class in TeleportHQ is a named group of styles you apply to many elements, so changing the class restyles all of them at once; you manage classes in the Classes tab of the Design Language panel and apply them in the Classes section of the right panel.

In TeleportHQ, select a styled element, type a name in the Classes section of the right panel and choose Create class to turn its styles into a reusable class; or click + in the Classes tab of the Design Language panel to start an empty class.

In TeleportHQ, select an element, type the class name in the Classes section of the right panel and pick it from the list to apply it; click Remove class (−) on the class's row to take it off that element only.

In TeleportHQ, click a class in the Classes tab of the Design Language panel, or click Edit class on its row in the right panel, then change its name, Properties, States or Media Query Properties; every element using the class updates.

In TeleportHQ, right-click a class in the Classes tab, choose Add CSS Combinator and a type such as Descendant combinator, type what to target (for example img), then add styles; they apply to matching elements inside or next to every element with that class.

In TeleportHQ, the Classes tab of the Design Language panel lets you search and filter classes, group them into categories, mark design system classes, and delete unused classes or empty categories in bulk from the More options menu.

When you select an element in TeleportHQ, the right panel shows its settings in Visual and Advanced tabs, always in the same order; values you set show in normal text, while grey values come from a CSS class, a larger screen size, a parent or the browser, and pointing at one shows where it comes from.

In TeleportHQ, select the text, then in the right panel's Text Style section set Font Family, Font Weight, Font Size, Line Height, Align and Text Color; you can also make gradient text and add a text shadow there.

In TeleportHQ, select the element, open Background in the right panel, click + and choose color, gradient or image; image backgrounds have Size, Repeat and Position settings, and several gradients and images can be stacked as layers.

TeleportHQ has no video option in Background, so you place a looping, muted Video element inside the section, stretch it to fill the section with Freestyle position and Object Fit cover, and raise the section's content above it with Z-index.

In TeleportHQ, select the element and use the Border, Radius and Shadow sections of the right panel; click + in each to add a 1px border, a small corner radius or a drop shadow, then adjust color, width, style, corners, blur and spread.

In TeleportHQ, select the element and open Transforms in the right panel to move it with Translate X and Y, turn it with Rotate, slant it with Skew, resize it with Scale and set the Origin; tick Enable 3D for 3D rotation and Perspective.

In TeleportHQ, select an element with a see-through background, open Backdrop Filter in the right panel and click + to add a 5px blur behind it; click Edit filter to change the amount or pick another effect such as Brightness or Grayscale.

In TeleportHQ, select an element, open States in the right panel, click + and pick a state such as hover, then change the styles; they apply when a visitor hovers, clicks or focuses the element, at every screen size, and fade in with a 0.3-second transition you can change in the Transition section.

In TeleportHQ, select an element, open the Advanced tab of the right panel, type a CSS property and value in the empty row under Properties or a Screen ≤ px section, and click +; use it for styles the Visual tab lacks, such as cursor, filter, mix-blend-mode and inset shadows.

TeleportHQ sites are designed on a large screen first, and you adjust how they look on smaller screens by switching the canvas to a breakpoint (Tablet, Mobile Landscape or Mobile) and changing styles there; smaller screens inherit everything you don't change.

In TeleportHQ, click a smaller breakpoint icon above the canvas (such as Mobile, 479px), select the element and change its style; the change applies to that screen size and smaller ones only, and you remove it with Reset Values on the blue section title.

In TeleportHQ, click the Settings button (three dots) after the breakpoint icons above the canvas to open Breakpoints Settings, where you tick or untick the six screen sizes and change their widths; turning a breakpoint off permanently deletes all its styles across the whole project.

In TeleportHQ, switch the canvas to the screen size where the element should disappear, select the element and click the eye toggle in the Visibility section; hiding applies to that breakpoint and every smaller one, so to show something on mobile only you hide it on the default breakpoint and show it again on Mobile.

In TeleportHQ, change the font of one text element in the right panel under Text Style → Font Family, or change it for the whole site by editing the default text style in the Design Language panel's Text tab (or, in a site the AI built, the font-family-heading and font-family-body variables); fonts that aren't in the list must be imported or uploaded first in Project settings → Fonts.

To use any Google font in TeleportHQ, click the Project settings cog at the bottom of the left sidebar, open Appearance → Fonts, click Import from Google, search for the font and click Import; it then appears in every Font Family list in the editor.

To use your own font file in TeleportHQ, click the Project settings cog at the bottom of the left sidebar, open Appearance → Fonts, click Upload font file under Custom fonts, pick a .ttf, .otf, .woff or .woff2 file, check the name, weight and style, and click Add font.