Design mode

Changing a heading, a button color or the site’s font shouldn’t take a message to the agent. Design mode lets you make these edits yourself, right on the preview: each setting is written into your app’s code and shows up immediately. It’s free (no credits) and instant.

Design mode has two tabs:

• Element: you click an element in the preview (a heading, a button, an image…) and edit its content and style;
• Theme: you change the colors and fonts of the whole site at once, including dark mode.

Open Design mode

At the top of the left panel, click Design in the Chat | Design switch (the Free badge is a reminder). You can also go through the chat’s + menu → Edit directly, which opens the Element tab straight away.

The editor then shows the Preview tab on the right. To go back to the agent, click Chat.

Note

Design mode isn’t available while the agent is working, on an old version, or until the preview is ready: the tab then shows the reason (“Wait for the agent to finish”, “Not available on an old version”, “The preview isn’t ready yet”). If the agent starts while you’re in Design, the editor goes back to the chat and your edits are saved.

The Element tab

Pick an element

1. Open the Element tab. If no element is chosen yet, picking starts on its own; otherwise, click Pick in the preview.
2. The preview shows “Click an element to edit it · Esc to cancel”. Hover over the app: the element under your mouse is highlighted.
3. Click the element to edit. The panel shows its settings, with its name and the code file it lives in at the top.
4. To move to another element, click Change at the top of the panel, then the new element (Cancel to keep the current one).

Once the element is chosen, the preview works normally again: you can, for example, hover a button to see its hover state.

The settings

Settings are grouped into sections. Only those that make sense for the element are shown (no text settings for an image, for example).

Section	Settings
Content	The element’s Text; for an image, Image (URL) with the Pick a project image button, and Image description; for a link, Link; for a form field, Placeholder text.
Colors	Text color, Background and Border.
Text	Font, Text size, Weight (from Light to Extra bold) and Alignment (left, center, right).
Spacing	Inner spacing ↔ and ↕, Horizontal margin and Vertical margin, and Space between items for a container that lays out other elements.
Shape	Border width, Corner radius and Shadow.
Advanced	Tailwind classes: the element’s raw style classes, editable by hand.

How the settings work:

• Text fields apply after a short pause in your typing, when you leave the field, or on Enter. Tailwind classes only apply when you leave the field or on Enter.
• Sizes, margins, radii and shadows are adjusted with – and +, one step at a time. Going below the first step brings back the default value.
• Colors: click a color setting to open the picker. Theme colors come first, with their Opacity (from 100 to 10). Under Other colors (outside the theme)…, you’ll find white, black, a Custom color and the full palette by hue and shade. Careful: these outside colors “won’t follow the Theme panel”.
• Font: default, one of the project’s theme fonts, or a generic family (Sans serif, Serif, Monospace).

Tip

Prefer theme colors: if you later change the primary color in the Theme tab, every element that uses it follows automatically. A custom color stays fixed.

Hover state

At the top of the style settings, two tabs: Normal and Hover. Choose Hover to set what changes when the mouse is over the element: the colors (text, background, border) and the shadow. Then hover the element in the preview to see the result. In Hover, “same as normal” means nothing changes when the mouse passes over it.

Change an image

On an image, click Pick a project image: the project’s image library opens, and you can also upload a new image there. The chosen image replaces the old one right away. Remember to update the Image description (useful for accessibility and search engines). See Project images.

Ask the agent

At the bottom of the panel, Ask the agent takes you back to the chat with the current element already selected: all that’s left is to write your request. Handy when the setting you want doesn’t exist in the panel (an animation, a new block, a behavior). See Select an element.

Limits (and the panel’s messages)

Design mode changes your app’s code at the exact spot where the element lives. Some cases don’t lend themselves to it, and the panel tells you:

Message	What it means
“This element’s style is computed in the code…”	Its classes are built by code (depending on a state or a condition). Style settings aren’t offered: ask the agent for the change, or pick a nearby element.
“Part of the style depends on conditions in the code…”	Only the fixed settings can be changed here; the conditional part stays as is.
“This element is shown N times (list or reused component)…”	The element comes from a reused component or a list: your edit applies to all its copies.
“This element is one entry of a list of N…”	The style applies to all entries, but the text only to the one you picked.
“Text written in src/….”	The text isn’t written in the element itself but in another file (a data list, a constant): your change is made there.
“This element changed in the code: click it again in the preview”	The code moved since your click (for example after the agent worked): pick the element again.

Text passed to a component by its parent can’t be edited here: ask the agent.

The Theme tab

The theme gathers the colors and fonts of the whole site. Apps built by the agent use colors by role (background, text, primary color…): change a role and every element that uses it changes together. At the bottom of the panel, a reminder: “The whole site follows these settings.” To learn more, read Design and themes.

Light and dark (at the top of the panel)

Without dark mode

The panel explains: “A dark variant of the theme, derived from your colors.” Click Add a dark mode: Highwind creates a dark version of each color from your light colors, and the preview switches to dark so you can tune it.

With dark mode

• Colors edited below: choose Light or Dark. All the panel’s colors and palettes then apply to that mode, and the preview shows it.
• Mode shown by default:
  • Device setting: the site follows the visitor’s device light or dark setting;
  • Dark: the site is shown in dark mode for everyone;
  • Light: the site is shown in light mode; dark mode is only used if the site offers a toggle.
• Remove the dark mode: deletes the dark variant, after confirmation (“Remove the dark mode?”).

Tip

Want a button so your visitors can choose for themselves? Ask the agent: “Add a button in the header to switch between light and dark mode.”

Palettes

Eight ready-made palettes (Ocean, Forest, Terracotta, Plum, Night, Coral, Ochre, Graphite) change all the colors of the current mode in one click. From a color… generates a full palette from a color you choose (your logo’s, for example). The palettes are designed to stay readable.

Colors by role

Each color is set with its swatch (color picker) or by typing its hex code (#0b7d83):

• Background and text: Background, Text, Secondary text, Cards and blocks, Borders;
• Brand colors: Primary, Text on primary, Accent, Text on accent;
• Other colors: roles specific to your app, if the agent added any (for example a success or highlight color).

Contrast warnings: when a text becomes hard to read on its background, a small triangle shows next to the role involved. Hover it to read the details, for example “Contrast 2.8:1 on “Background”: hard to read (4.5:1 recommended)“. Adjust one of the two colors until the warning goes away.

Fonts

Two fonts are picked from the list, sorted by category (sans serif, serif, monospace): Body (the body text) and Headings. A sample sentence shows in the chosen font.

Project without a theme

Older projects may have their colors hard-coded. The panel says so: “This project has no theme yet…”. Click Organize the colors with the agent: it’s a message to the agent (it uses credits) that moves all the colors and fonts into the theme, without changing how the site looks. After that, everything is set here. Fonts stay adjustable even without a theme.

Saving and versions

• Each setting is saved right away in your app’s code: the bottom of the panel shows Saving… then Saved.
• A version is created at the end of your session: when you go back to Chat, when the agent starts, or when you leave the editor. A message confirms it in the chat: “Visual edits saved (version N): …” for the Element tab, “Theme saved (version N).” for the theme.
• So you can chain several edits: they make up a single version, which you can undo all at once by restoring the previous version. See Versions and history.
• No credits are used, however many edits you make.

See also

Design and themesHow the agent builds your app's design.

Select an elementWhen an edit needs the agent.

Project imagesThe image library used by Design mode.

Versions and historyUndo an editing session.