What is the Design Language panel?
The Design Language panel is where a TeleportHQ project keeps its site-wide design choices: colors, text styles, sizes and spacing, CSS variables and CSS classes. You set a value once, use it on many elements, and when you change it, every element that uses it updates. The panel shows in the right panel of the editor whenever no element is selected, and in Project settings under Appearance → Design language.
How to open the Design Language panel
In the TeleportHQ editor, the Design Language panel has no button of its own on the right. It appears in the right panel whenever nothing else is using that space.
- Press Esc, or click an empty part of the canvas, so no element is selected.
- If the comments, the AI Assistant or the code view is open on the right, close it.
The panel opens on the tab you used last.
From Project settings
The same TeleportHQ Design Language is also in Project settings, which is handy when an element is selected and the right panel is busy.
- At the bottom of the left sidebar, click the Project settings cog.
- Under Appearance, click Design language. A drawer lists its five parts: Colours, Text, Layout, Variables and Classes.
- Click a part. It opens in a second column, with the same lists and buttons as the tab of the same name in the right panel.
What each tab holds
The TeleportHQ Design Language panel has five tabs. In Project settings, Color is called Colours and Vars is called Variables.
| Tab | What it holds | Example | Learn how |
|---|---|---|---|
| Color | Your theme and your saved colors and gradients (the app calls them color tokens) | "Brand orange" used on 40 buttons | Choose a color theme, Create and edit colors |
| Text | Text styles: saved font, size, weight and spacing settings | An "H1-Hero" style for page titles | Create text styles, Apply a text style |
| Layout | Saved sizes, spacing and corner radius values | Every section uses 32px padding | Create sizes, spacing and corner radius |
| Vars | CSS variables: any CSS value saved under a name | A card shadow used everywhere | Use CSS variables |
| Classes | CSS classes: named groups of styles | A card class on every card | What are CSS classes? |
In a site the TeleportHQ AI built, the Color tab starts with an AI Generated list. Those are the site's colors, saved as CSS variables on the Vars tab and shown on Color for convenience.
How you use Design Language values on elements
In TeleportHQ, saved colors, sizes, spacing and radius values appear inside the style fields of the right panel when you select an element. For example, click the Text Color field and pick a saved color from the list. The element is now linked to that color. Text styles are applied from the Text Style section, and classes from the Classes section.
Each saved value only shows in the fields where it makes sense:
- Colors and gradients: text color, background and border color.
- Sizes: width and height, including minimum and maximum.
- Spacing: margin, padding, gap and position offsets.
- Radius: corner radius.
- CSS variables (Vars): every field, with the ones whose value fits the field listed first.
- Border width never offers saved values.
Colors, text styles or classes: which should I use?
The three Design Language tools in TeleportHQ do different jobs, and they behave differently when you delete them.
- A color, size or spacing value is one saved value. Use it when the same color or size repeats across your site. If you delete it, elements keep the value as a fixed value. Nothing on the page changes.
- A text style is a saved set of font settings. Use it to keep headings and body text consistent. If you delete it, texts keep its font settings as their own settings. Check those texts afterwards: see How to create text styles.
- A CSS class is a saved group of any styles, including hover states and mobile styles. Use it for repeated designs like cards or buttons. If you delete a class, its styles are removed from every element that used it, and those elements change.
Who can edit the Design Language
- The TeleportHQ Design Language panel is available on every plan.
- The Color, Text, Layout and Vars tabs can be changed by the Owner, Admin and Designer roles. Other roles see "Your current role does not have permission to update tokens."
- The Classes tab can also be changed by the Owner, Admin and Designer roles only.
- On a read-only project, the add buttons and menus are disabled.
Good to know
- Every new TeleportHQ project starts with a theme (Cultural, light), eight theme colors, one text style called
Content, and a set of sizes, spacing and radius values. Sites the AI builds also get the text stylesBodyFont(the default) andHeadings, and a set of CSS variables. - There's no import or export button for the Design Language. Values arrive from your theme, from importing HTML and CSS, from the AI and from ready-made sections.
- Saved colors show as a list with their names. To show them as a grid of swatches, open Project settings → Editor → Preferences → View, and under Inspector and design language turn off Show colour tokens as a list. See How to change editor preferences.
- In exported code, saved values become CSS variables, for example
--dl-color-theme-primary1. Variables from the Vars tab keep their own name, for example--card-shadow. - The keyboard shortcuts list shows "Toggle CSS Classes" as Ctrl+3, but that shortcut doesn't open anything. Deselect all elements instead.