Design

Colors, fonts, and the screen options you pick before a milestone is built.

Your app should look like yours, not like a default template. The Design view lets you shape its appearance — colors, fonts, and overall theme — and watch the changes land in the live preview as you make them. No CSS to write, no code to touch.

Annotated screenshot of the Design view: a panel of controls on the left (color swatches, font picker, light/dark toggle, a list of saved themes) and the live app preview on the right updating to match. Callout: "Tweak colors and fonts, watch the app change instantly."

What you can change

  • Colors — your primary color and the palette that flows from it.
  • Fonts — the typefaces your app uses for headings and body text.
  • Light and dark — preview your design in both, so it looks right either way.

Adjust a control and the app preview next to it updates immediately — you're designing against the real thing, not a mockup.

Themes

You can save a set of choices as a theme and keep more than one — for example, a light brand theme and a bold seasonal one. Switch the active theme to change which one your app uses. Themes you're not using stay saved so you can come back to them.

Design changes show up instantly in the preview, so styling your app is a tight loop: nudge a color, see it, keep going — no rebuild, no guesswork.

Screen options, before a milestone is built

Design isn't only about colour. When Chat is about to build a milestone, it can offer to sketch the screen first — and if you say yes, a page of two or three real layouts appears here as a sketch for you to look at and choose between.

Whichever you pick is recorded on the milestone, and that's the one that gets built. A milestone can take more than one round: a list screen and the detail behind it are two sketches, decided separately, and the build waits until nothing is left unshown.

Sketching takes a minute or two. The tab says it's still working until the options land — that's expected, not broken.

Point at what you mean

You don't have to describe a screen element in words. Alt+click anything in the live preview and a box is drawn around it, handing the exact element to the Design panel and the chat composer. It's the fastest way to say "this bit, not that bit" — and the box follows the element as the app re-renders, so it stays on the thing you picked.

Live, in the sandbox

Design lives inside the Builder, next to the running app preview. Because the preview reflects your changes as you make them, you can dial in the look in minutes and only publish when you're happy.

Where to go next

  • App preview — the live view your design changes appear in.
  • Milestones — where a chosen screen option gets built.
  • Translations — shape what your app says alongside how it looks.
  • Publishing — ship your design once it looks right.