# Widget design settings reference

You can match your widget to your website with colors, fonts, spacing, and phone settings. Find each control's choices and defaults here.

Available on the Grow, Scale, and Pro plans.

Use **Design** to make your widget fit your website. You can change its colors, fonts, layout, and motion without changing the attached flow's questions, forms, or offers. Widgets that share a flow can still look different. [Compare widget types](https://rightmessage.com/help/widget-types-reference) to see which controls each one supports.

![Sitewide Toaster design tab with widget configuration and preview](https://rightmessage.com/help/screens/widgets-design.light.webp)

## Themes, copying, and phone overrides

Choose **Change** to open the theme chooser. New widgets use **Plain**. A **Toaster** supports only **Plain** and **Paddington**. The four themes that support content images also have image-position controls.

| Theme          | How it places the content and image                              |
| -------------- | ---------------------------------------------------------------- |
| **Plain**      | Centers the content without a content image.                     |
| **Baloo**      | Puts the image and header copy in a hero area.                   |
| **Paddington** | Puts the image in a hero area.                                   |
| **Petey**      | Places the image on the left, constrained to its bounding area.  |
| **Yogi**       | Places the image on the left, centered within its bounding area. |

**Copy from…** lists your other widgets by name and asks you to confirm before replacing the design. It copies colors, dark colors, fonts, sizes, spacing, phone overrides, custom CSS, header, progress bar, and button animation. It doesn't replace the flow, trigger, or targeting. If the destination doesn't support the source's theme, it keeps its own theme.

Switch to **Phone** to adjust settings just for phones. A dot marks each override. Font sizes, structure, density, button size, and button width support phone overrides. Colors and other shared settings apply to every device. Inline width is also shared. Return to **Desktop** to change the shared design.

**Theme default** follows the theme. **Same as answer buttons** follows the answer-button setting instead of a separate submit-button value. Older widgets can keep saved values that differ from the new-widget defaults below.

## Widget colors

| Setting               | Choices and behavior                       | New-widget default            |
| --------------------- | ------------------------------------------ | ----------------------------- |
| **Background**        | **Color**, **Gradient**, or **Image**.     | **Color**.                    |
| **Background color**  | Solid background color.                    | White, `#ffffff`.             |
| **Start** and **End** | Gradient colors.                           | No explicit overrides.        |
| **Angle**             | Gradient angle from 0 through 360 degrees. | 135 degrees when unspecified. |
| **Background image**  | Shared image in light and dark modes.      | None.                         |
| **Behind the image**  | Color visible behind the background image. | The background color.         |
| **Text**              | Base text color.                           | `#1A202C`.                    |
| **Submit button**     | Base call-to-action color.                 | `#3182CE`.                    |
| **Text on buttons**   | Text against the button color.             | `#EBF8FF`.                    |
| **Border**            | Base border color.                         | `#5d6b91`.                    |

**Question colors** adds **Heading text**, **Body text**, **Answer background**, and **Answer text**. **Offer / form colors** adds heading and body colors, **Field background**, **Field text**, **Field border**, **Placeholder**, and **Links**. These begin without explicit overrides and inherit the relevant base or theme colors.

**Header** title and subtitle colors appear for Popup, Toaster, and inline widgets when their header is enabled. **Backdrop behind the popup** applies to Popup and Full-screen takeover. Backdrop **Opacity** ranges from 0 to 1 in steps of 0.05, with a fallback of 0.8.

### Dark mode

New widgets have dark mode off and no separate dark palette. In the colors section, **Dark mode** can show **No dark mode colors yet** and **Generate from my light colors**.

Once you have a dark palette, **Use dark mode colors** controls whether visitors see it. When it's off, everyone sees light colors. When it's on, an explicit page theme takes priority over the visitor's system preference. Supported page signals are `data-theme="light"` or `"dark"`, a `light` or `dark` CSS class, and `data-bs-theme="light"` or `"dark"`. Without a page signal, the widget follows the system preference. You can force either scheme in the preview to check it.

Dark colors you haven't set fall back to the light palette. Both modes use the same background image. Check every text and field color in both modes so visitors can read them.

## Widget typography

Choose fonts with **Heading font** and **Body font**. If you leave them unset, they inherit from your website. **Heading weight** and **Body weight** offer 400, 500, 600, 700, 800, or 900. New widgets use 700 and 400. **Line height** ranges from 1 to 3 in steps of 0.1 and defaults to 1.5.

The **Size** presets set these pixel sizes:

| Text            | **Small** | **Medium** | **Large** |
| --------------- | --------- | ---------- | --------- |
| Headline        | 20        | 24         | 28        |
| Description     | 14        | 16         | 18        |
| Answers         | 12        | 13         | 16        |
| Form fields     | 12        | 13         | 16        |
| Submit button   | 12        | 13         | 16        |
| Header title    | 14        | 16         | 18        |
| Header subtitle | 12        | 13         | 15        |

New widgets use **Medium**, with a few starting sizes that depend on the type. Bars start with a 17px headline, 15px form fields, and a 16px submit button. Toasters start with 14px answers and a 15px submit button. Choosing a preset sets all the fields in the table to that preset's sizes.

Choose **Customize sizes** to set sizes individually. Headline ranges from 8 to 72px. Description, answers, fields, submit button, and header title range from 8 to 40px. Header subtitle ranges from 8 to 32px. Header sizes appear only when your widget supports a header and you've enabled it. Editing a desktop size changes the scale to **Custom**.

## Answer and submit buttons

**Answer buttons** and **Submit buttons** have separate groups.

| Control            | Choices or range                                                | Answer-button default            |
| ------------------ | --------------------------------------------------------------- | -------------------------------- |
| **Fill**           | **Solid**, **Outline**, **Ghost**, **Gradient**.                | **Solid**.                       |
| **Size**           | **S**, **M**, **L**.                                            | **M**.                           |
| **On hover**       | **Theme default**, **Darken**, **Lighten**, **Lift**, **None**. | **Theme default**.               |
| **Corner radius**  | 0 to 40px.                                                      | 4px for Toaster, 0px otherwise.  |
| **Gap between**    | 0 to 40px. Applies to answer buttons.                           | 11px for Toaster, 8px otherwise. |
| **Weight**         | **Theme default** or 400 through 900 in increments of 100.      | **Theme default**.               |
| **Letter spacing** | -0.1 to 0.3em in steps of 0.01.                                 | 0em when unspecified.            |
| **Width**          | **Theme default**, **Full width**, **Fit to text**.             | **Theme default**.               |
| **Uppercase**      | On or off.                                                      | Off.                             |

Submit buttons initially use the answer-button values. Their selectors offer **Same as answer buttons**. For hover, weight, and width, you can also choose **Theme default** instead of inheriting. Uppercase offers **Same as answer buttons**, **On**, or **Off**. Clear an inherited numeric override to use the answer-button value again.

## Form field appearance

**Style** offers **Boxed**, **Underlined**, or **Filled**. Boxed is the new default. **Labels** offers **Above**, **Inside**, or **Hidden**, with the theme's behavior used until you choose one.

**Corner radius** and **Gap between** range from 0 to 40px. New field spacing is 8px. An unset radius follows the theme. These controls change how fields look. To make a field required, link it to a question, or choose where its data goes, use the [form field editor](https://rightmessage.com/help/form-fields-reference).

## Layout & spacing

**Density** offers **Compact**, **Comfortable**, or **Spacious**. Comfortable is the default. All types except Bar also offer **Custom**, which exposes these controls.

| Control                             | Range                                         | Unspecified fallback |
| ----------------------------------- | --------------------------------------------- | -------------------- |
| **Vertical padding**                | 0 to 120px.                                   | 35px.                |
| **Horizontal padding**              | 0 to 120px.                                   | 35px.                |
| **Header to content**               | 0 to 120px, with an enabled supported header. | 35px.                |
| **Heading to description**          | 0 to 80px.                                    | 9px.                 |
| **Description to answers & fields** | 0 to 80px.                                    | 26px.                |
| **Fields to buttons**               | 0 to 80px.                                    | 8px.                 |

**Width** ranges from 200 to 1200px in steps of 10 for Popup, Toaster, inline, and Full-screen takeover widgets. Leave it unset to use the automatic or theme width. Bars span the page and have no width slider.

Image themes expose **Image position** as **Top**, **Left**, or **Background**, and **Image height** from 40 to 600px in steps of 10. The height fallback is 200px. The image's focal point is set on the content image, not in the widget's layout section.

## Widget container

**Corner radius** ranges from 0 to 40px and starts at 8px. **Border width** ranges from 0 to 10px. New Bars start at 2px and other types at 0px. **Border style** is **Solid**, **Dashed**, or **Dotted**, with Solid as the default.

**Shadow** offers **None**, **S**, **M**, **L**, **XL**, or **2XL** for floating types. New widgets use **L**. Inline widgets don't have a shadow or backdrop. **Backdrop blur** is available only for Popup and Full-screen takeover, ranging from 0 to 30px.

## Header & progress bar

Only Popup, Toaster, and inline widgets support these controls.

**Show a header** is off initially. Enabling it exposes **Alignment**, **Image**, **Title**, and **Subtitle**. Alignment is **Left**, **Centered**, or **Right**, with Left as the default.

**Show a progress bar** is also off initially. **Base color** defaults to `#60a5fa` and supplies the progress gradient. Its color control is disabled while the progress bar is off.

## Widget motion

| Control                                 | Choices                                                                           | Default or fallback         |
| --------------------------------------- | --------------------------------------------------------------------------------- | --------------------------- |
| **Entrance**                            | **None**, **Fade**, **Slide**, **Scale**.                                         | **Slide** when unspecified. |
| **Step transition**                     | **Slide left**, **Slide up**, **Slide down**, **Cross-fade**, **Zoom**, **None**. | **Slide left**.             |
| **Fade during step transitions**        | On or off. Applies to slide and zoom transitions.                                 | On.                         |
| **Speed**                               | **Slow**, **Normal**, **Fast**. Applies to entrance and step transitions.         | **Normal**.                 |
| **Draw attention to the submit button** | **Don't animate**, **Once after 5 seconds**, **Every 5 seconds**.                 | **Don't animate**.          |

## Close, back, skip & badge

Floating widgets offer **Close button** as **Icon**, **Circle**, or **Text**, and **Position** as **Left** or **Right**. Defaults are **Icon** and **Right**. Inline widgets have no close button.

**Back button** offers **Text link**, **Button**, or **Arrow icon**. **Skip button** offers **Text link** or **Button**. Both default to Text link. The arrow keeps the Back label for screen readers. Skip appears on optional questions.

The **Display** tab controls whether Back is enabled and supplies Back, Next, and Skip wording. The **Personalized with RightMessage** badge is configured for the entire project in [Powered By settings](https://rightmessage.com/help/project-branding-and-refresh), not individually here.

## Advanced and AI drafts

**Advanced** contains **Custom CSS**. See [Customize widget CSS](https://rightmessage.com/help/customizing-widgets) for supported aliases and scoping limits.

**AI Generate** prepares design alternatives that stay unsaved until you choose **Apply**. While a draft is pending, design controls edit the selected alternative. You can't change the theme or copy another widget's design until you apply or discard it. See [Design your widget with AI](https://rightmessage.com/help/widget-ai-design). Applying a design or editing it yourself still requires [publication](https://rightmessage.com/help/publishing-your-changes) before visitors see it.

## AI design options

You can generate from a website analysis or a written description. When a site profile exists, the dialog shows its screenshot, colors, fonts, and buttons. **Refresh** requests a new analysis. If analysis fails, choose **Try again** or **Continue with my description only**.

**What to change** offers **Colors**, **Typography**, and **Buttons & shape**. All three start selected, and at least one must stay selected. **Also create dark mode colors** requires **Colors**. Its initial state follows the widget's dark-mode setup and available site profile, so check it before generating.

**Generate 3 designs** stays disabled while analysis is pending unless you choose description-only generation. **Bolder button**, **Minimal**, **Playful**, and **Premium** append wording to your description. **Cancel** closes the dialog without applying a design.

Each generated alternative has a short explanation. Design controls edit the selected alternative, and edited alternatives are marked. **Try again** returns to generation. Replacing or discarding edited alternatives asks for confirmation. Leaving **Design** with a pending draft also prompts you to discard it. **Phone** preview stays disabled until you apply or discard.

**Apply** saves the selected design to the project draft. The confirmation message offers **Undo** to restore the previous design.

The generator can change supported palette, dark-color, font, size, shape, and structure settings. It doesn't generate arbitrary **Custom CSS**, write header content, change targeting or triggers, or rewrite your questions and offers.

Generation can fail when colors don't have enough contrast or the alternatives are too similar. If you get an error, keep your existing design or request clearly different alternatives with high-contrast text. Wait for the alternatives to appear before choosing one.