# Design

## Theme

Create themes to instantly apply the same design and settings to any demo. Go to **Settings > Theme**, click the **Theme** **dropdown menu**, select <kbd>+ Create theme</kbd>, name your theme, and define your design and settings.

To apply a theme to your demo, in <kbd>**Edit**</kbd> click <kbd>Design</kbd>, and select the theme from the dropdown.

## Branding

### How can I remove the Interactively Watermark?

{% hint style="info" %}
Removing the Interactively watermark is available on our **Pro**, **Growth**, and **Enterprise** plans.
{% endhint %}

Demos created on our **Free** plan have the Interactively watermark in the bottom right corner.

If you're on the **Pro** or **Growth** plan, you can remove it by clicking <kbd>Design</kbd> in the main toolbar in <kbd>**Edit**</kbd>, scrolling to the **Branding** section, clicking <kbd>Edit</kbd> in the **Watermark** section to open up the **Custom Branding** modal, and toggling off the **Watermark** switch.

### How can I add my own logo to the watermark?

{% hint style="info" %}
Adding a custom watermark is available on our **Growth** and **Enterprise** plans.
{% endhint %}

In <kbd>**Edit**</kbd>, Click <kbd>Design</kbd>, scroll to the **Branding** section, click <kbd>Edit</kbd> in the **Watermark** section to open up the **Custom Branding** modal, ensure the **Watermark** toggle switch is **on**, and click <kbd>Upload file</kbd>.

Once your logo is uploaded, you can set a custom URL and hover text for the watermark.

### How can I add my own logo to the share page?

{% hint style="info" %}
Adding a custom logo to the share page is available on our **Growth** and **Enterprise** plans.
{% endhint %}

To add your logo to the demo share page, go to <kbd>**Edit**</kbd>, click <kbd>Design</kbd> in the main toolbar, scroll to the **Logo** section under **Branding**, click <kbd>Edit</kbd>, then click <kbd>Upload file</kbd> to select your logo and set a custom **Redirect link**.

## Colors and Fonts

### Can I add my brand colors to my demo?&#x20;

Yes! You can add your brand colors to the [hotspots](#hotspots-and-callouts), [callouts](#hotspots-and-callouts), call-to-action (CTA) buttons, and background of your demo in <kbd>**Edit**</kbd>.

#### Hotspots and callouts

Set the color of your demos [hotspots and callouts](https://interactively.gitbook.io/interactively-docs/build/edit/hotspots-and-callouts) to a HEX code by going to <kbd>Hotspots</kbd> or <kbd>Callouts</kbd>, and entering the HEX code in the **Background color** and **Text color** fields.

To set all hotspots or callouts to these colors, click the **Apply to all** icon.

#### Call-to-action (CTA) buttons

You can set the color of any CTA button in chapter steps within the <kbd>Chapter</kbd> settings when editing.

#### Background

Add a background behind your demo in the **Background** section in <kbd>Design</kbd>. Pick on on of our preset backgrounds or upload your own.&#x20;

### How do I change the font of my demo?

Change your font to any Google Font in the **Font** section of <kbd>Design</kbd>.

### Can I change the browser wrapper around my demo?

For sure! In the **Wrapper** section of <kbd>Design</kbd> you can select a light wrapper, dark wrapper, no wrapper, or Dark Mode.

### What is Dark Mode?

Dark Mode allows you to present your demo in a dark color palette, which includes a dark background, browser wrapper, and buttons.&#x20;

{% hint style="info" %}
We recommend using Dark Mode if your product has a dark theme or if you're embedding your demo on a dark-themed website.
{% endhint %}

### Can I change the cursors?

Definitely! If you scroll to the **Cursor** section under <kbd>Design</kbd>, you'll find three sets of cursor options to choose from.

{% hint style="info" %}
**Note:** The first cursor option uses the user's system default cursor.
{% endhint %}