> For the complete documentation index, see [llms.txt](https://docs.dapta.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dapta.ai/dapta-forms/design.md).

# Design & Branding

Make a Dapta Form look like your brand from the Design panel inside Build: themes, colors, fonts, logos, cover screen and share card, with a live device preview while you edit.

Design is a mode inside the **Build** tab. Click **Design** in the toolbar and the canvas is replaced by two columns: every visual setting on the left, and a live preview of the real form on the right. Each change shows up in the preview immediately and is saved as a draft; click **Publish** when you want respondents to see it.

***

**Step 1:** Open your form, stay on the **Build** tab and click **Design** in the toolbar (next to **Add question**). Click **Design** again to go back to the question canvas.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-e973f55ccfc3a7d7730776ae4aae121e0a597f0f%2Fforms-readme-design-01-design-mode.png?alt=media" alt="The editor in Design mode: the Design toolbar button is highlighted, the settings column is on the left and the device preview on the right"><figcaption><p>Design mode. Left: settings, grouped in cards. Right: the live preview of your form.</p></figcaption></figure>

The left column is organized in cards, top to bottom: **Form title**, **Layout** (Slides or One page), **Theme**, **Colors**, **Typography**, **Shape and controls**, **Layout** (logos, alignment, width, transition), **Share card**, **Cover screen**, **Client logos**, a pointer to **Partial submissions** (configured in the question list on the Build tab) and **When the form ends**.

***

**Step 2:** Use the preview controls at the top of the right column. **Mobile**, **Tablet** and **Desktop** switch the device frame (the size and zoom are shown next to it, for example 1280 × 800 · 45%). The arrows walk through the screens (**Previous screen**, **Next screen**), and the circular arrow restarts the preview. The address bar shows the public link, with buttons to copy it and open the live form.

<figure><img src="https://3835013762-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCy5rSNtQmtqYCGzJlNEB%2Fuploads%2Fgit-blob-75b2dfd884c787688b5e40da43652279bd93be3a%2Fforms-readme-design-02-preview-devices.png?alt=media" alt="The preview column with the step arrows and the Mobile, Tablet and Desktop switch highlighted"><figcaption><p>The preview runs the real form renderer. Nothing you type in it is submitted.</p></figcaption></figure>

> **💡 Tip:** The preview shows your draft, including unpublished edits. Respondents keep seeing the last published version until you click **Publish**.

> **⚠️ Note:** A workspace **Brand kit** can pre-fill logo, colors, font and controls for every new form. Anything you change here applies to this form only.

## Pages in this section

* [Themes, colors & background](/dapta-forms/design/themes-colors-background.md): pick one of the nine theme presets, set Background, Text and Accent with contrast checks, and choose a Solid, Gradient, Glow or Image background.
* [Typography & controls](/dapta-forms/design/typography-and-controls.md): choose a typeface (or host your own), and set corners, button style, full-width button and the progress indicator.
* [Logos, layout & transitions](/dapta-forms/design/logos-layout-transitions.md): form logo and cover logo, logo size and position, question alignment, content width, step transition and the public form title.
* [Cover screen & banner](/dapta-forms/design/cover-screen-and-banner.md): the intro screen shown before the first question, with banner, headline, subheadline, Start button and trust badge.
* [Client logos marquee](/dapta-forms/design/client-logos.md): a "trusted by" strip of logos on the cover, the reveal screen or both.
* [Share card (social preview image)](/dapta-forms/design/share-card.md): the image shown when the link is shared in chat or social, generated from your design or your own.
* [Brand kit (workspace-wide)](/dapta-forms/design/brand-kit.md): the workspace look that new forms start with, and how to apply it to existing forms.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.dapta.ai/dapta-forms/design.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
