​
Overview

Userpilot allows you to customize your theme to match your brand’s identity effortlessly. You can control colors, fonts, button styles, and other design elements to ensure a consistent user experience. With flexible styling options, you can maintain brand consistency across all in-app experiences without needing constant design updates.

​
How to create a theme

You can start creating your theme by navigating to Configure > Themes from the sidebar. 2. Select Email from the list of items (3).png You’ll see two tabs, Web and Mobile, allowing you to customize your theme for each supported platform. To get started, simply click on Web, then on Create Theme, and begin designing your custom theme. web (2).png
Userpilot provides default Light and Dark themes to help you get started quickly.
You can start creating your theme by giving it a clear, memorable name to help you organize and easily find it when building your Userpilot content. Userpilot will also use the primary color you choose as the foundation to help customize your theme automatically. web (3).png

​
General tab

Through the General tab, you have a centralized location to apply changes across all theme elements, including flows, spotlights, banners, checklists, emails, and surveys. If you’d like to customize settings for a specific feature, simply navigate to that feature and apply custom style settings. These changes will apply only to that feature and will override the settings in the General tab. General (2).png The General tab includes multiple sections that provide advanced options to help you customize your content and ensure it matches your design system, such as:
  • Container: set the background color and z-index for your content container to control layering and base styling.
  • Font: choose the default font family and font color to ensure text matches your brand’s typography guidelines and meets accessibility contrast requirements.
  • Link: customize link color and hover color, and choose whether links open in a new browser tab for better user control and clarity.
  • Box and border: adjust border type, shadow, and corner radius to style your content’s container with depth and rounded edges.
  • Progress bar: configure the progress bar for Flow UI patterns with a group of steps, setting its type, color, padding, and position to guide users clearly through multi-step experiences.
  • Backdrop: set the backdrop color and opacity to create focus and separation from the underlying UI when displaying overlays.
  • Close button: customize the icon, size, color, hover states, background, and position of the close button to ensure it aligns with your brand and is easy for users to find.
Useful terms to know
  • Z-index Z-index decides which things appear on top of others on your screen. Think of it like stacking sheets of paper; whatever has a higher z-index is on top of the pile and will be visible above other parts of your app.
  • Why use it? When you set the z-index in Userpilot, you make sure things like modals, banners, or checklists don’t get hidden behind your app’s content. It helps keep your messages clear and easy for users to see.

​
Customizing Your Font

To customize your content’s font, search for the Font section and click the drop-down menu. Choose Custom and select Add New Custom Font. Screenshot 2025-06-29 at 22.16.09 (1).png A pop-up will appear where you can name your Font Family. The Custom CSS will be pre-filled in comment mode (with slashes), so it won’t be active yet. Screenshot 2025-06-29 at 22.17.53 (1).png To activate the CSS, simply remove the slashes (/) and then click the Add Font button.

​
Button styles tab

Through the Button Styles tab, you can create multiple button styles tailored to your use cases and design system. This saves time by eliminating the need to customize button settings each time you create content in Userpilot. Your saved styles will always be ready to use whenever you build content in flows, banners, emails, and surveys. buttons (4).png To create a new button style, click Create Button, and Userpilot will then add a new section where you can fully customize your button’s appearance to match your brand. buttons (5).png The Button section has lots of options to help you style your buttons so they match your design system, like:
  • Background color: set the button’s default color to match your brand palette.
  • Background color on hover: choose the color the button changes to when hovered for clear interactive feedback.
  • Text color: define the label color for strong readability and brand consistency.
  • Text color on hover: customize the label color when hovered to maintain contrast and visibility.
  • Default state contrast ratio: check accessibility contrast between background and text in the default state.
  • Hover state contrast ratio: verify accessibility contrast in the hover state for better usability.
  • Padding: control the internal spacing to ensure balanced and comfortable button labels.
  • Corner radius: adjust the roundness of the button’s corners to match your design system.
  • Typography: select the font style and weight to keep buttons consistent with your brand’s typography.
  • Border: enable or disable borders and define their style for outlined or solid button designs.
  • Border color: set the border color for the button’s default state to align with your palette.
  • Border color on hover: choose the border color when hovered to enhance interactive feedback.
  • Border thickness: define the border width for subtle or bold visual effects.
To save time, create a primary button style, then duplicate it and tweak the colors for your secondary button if they share a similar design.

​
Flows tab

Under the Flows tab, you’ll find a variety of options for customizing each Userpilot UI pattern to match your design system. We know that small design details can make a big difference in user experience and engagement, so Userpilot gives you the flexibility to fine-tune even the finer points to make your content more visually appealing and on-brand. The available UI pattern tabs include:
  • Modals
  • Slideouts
  • Tooltips
  • Driven actions
Each UI pattern has its own customization options and sections similar to the general settings shown here (like background color, font, box & border, progress bar, backdrop, buttons, and close button). This consistent structure makes it easy to apply cohesive styles across all your in-app flows while tailoring details for each pattern. Feel free to explore each tab to unlock maximum customization and deliver a polished, engaging user experience. Modals (3).png

​
Spotlights tab

Under the Spotlights tab, you can customize your in-app spotlight experiences to perfectly match your brand and design system. The Spotlights tab is split into two subtabs:
  • Native Tooltips & Hotspots
    • General: customize background color, content alignment, z-index, and padding for consistent positioning and layering.
    • Box & Border: set border type, shadow, and corner radius to match your brand’s depth and shape standards.
    • Badge: configure icon, shape, size, opacity, fill colors (default and hover), and border styles to draw attention to hotspots without clashing with your design system.
    • Label: style the text container of tooltips by adjusting background and hover colors, font settings, padding, border, and corner radius, with built-in contrast checking for accessibility.
    • Hotspot: define hotspot color, size, animation type, and behavior (like pulse animation) to make it stand out without being distracting.
    • Close Button: customize the close icon’s appearance, size, colors (default and hover), background, and position to maintain brand consistency and usability. Native tooltips (1).png
  • Buttons
    • General: set background and hover colors, padding, corner radius, and z-index for button placement.
    • Font: choose text color and hover color, typography, and ensure accessibility with built-in contrast ratio checks.
    • Border: customize border type, shadow or solid, color, and corner radius to match your design system perfectly.

​
Banners tab

The Banners tab lets you customize in-app notification banners to match your brand and design system, ensuring important messages look polished and consistent. Banner style sections:
  • General: Set background color, font color, z-index, and position, with contrast checks for accessibility.
  • Box & Border: Customize border style, width, shadow, corner radius, and choose full-width or container layout.
  • Buttons: Style the primary button with options for background and hover colors, text colors, padding, corner radius, typography, and borders, all with contrast checks.
  • Close Button: Adjust icon, size, background and hover colors, corner radius, position, icon color, and default behavior.
Screenshot 2025-06-29 at 21.13.02 (1).png

​
Checklists tab

The Checklists tab lets you fully customize the look and feel of your in-app task lists to match your brand, making onboarding experiences clear, engaging, and consistent. It’s divided into two subtabs:
  • Widget
    • General: set header, background, progress, carets, CTA, and completion colors, with an option to auto-open the widget for smoother onboarding.
    • Text: customize font family and header/body font colors with contrast checks for clear, accessible reading.
    • Minimize Button: style the caret and close icons with control over colors, hover states, size, and corner radius to match your brand. widget (1).png
  • Beacon
    • Select beacon type (icon in circle, square, text only, or icon & text).
    • Set color, background color, position on the page, and z-index.
    • Adjust position easily for perfect placement in your app layout. beacon (1).png

​
Surveys tab

The Surveys tab lets you customize the look and feel of your in-app surveys to keep them consistent with your brand and visually engaging for users.
  • General: set primary color, background color, and position to control where your survey appears and ensure it matches your brand.
  • Box & Border: customize border type, shadow color, and corner radius ****to style the survey container consistently.
  • Font: choose font family and text color, with contrast checks to keep text clear and accessible.
  • Progress Bar: select progress type and set the bar color to visually guide users through multi-step surveys.
  • Backdrop: define color and opacity to create focus by dimming the background behind your survey.
  • Close Button: style the close icon with background and hover colors, icon color, size, and corner radius for a polished, on-brand look.
Screenshot 2025-06-29 at 21.55.59 (1).png
NoteIf you’re on the Enterprise plan, you get even more flexibility with your themes by using the Custom CSS tab and the Design Library. Once you’ve set up your Design Library, you’ll see extra options under colors, font family, and spacing, letting you either choose from pre-defined library groups or customize styles on the spot with the custom option.buttons (7).png
General notes:
  • Your Userpilot account must always have one default theme to use when creating content, but you can change it anytime.
  • The default theme can’t be deleted.
  • To delete the current default theme, first set another theme as the default, then you can remove the one you no longer want.
  • If you’ve created content using a specific theme, you can’t delete that theme until you unlink all content by changing its theme assignments.
  • You can view all content linked to a theme using the “View content using this theme” option in the theme’s action menu. Screenshot 2025-06-29 at 22.29.44 (2).png
  • You can duplicate, rename, and update themes anytime.
  • Click the “Save” button to keep your changes, since the theme page doesn’t autosave like other areas in Userpilot.
For any questions or concerns, please reach out to support@userpilot.com