This article covers Themes and advanced styling for for Flows 2.0, Embeds and Banners. For our legacy Themes and Styling, see Styling Flows and Themes

Themes let you define your brand's visual identity once and apply it consistently across your Flows 2.0 and Embeds. Instead of styling each block individually, set your colors, fonts, and spacing in a Theme and every Flow or Embed that uses it stays on-brand. If you've already built legacy Themes, you can migrate them into the new system to carry over your existing styles.

How Themes work

When you create a Flow 2.0 or Embed or edit its settings, you select a Theme. That Theme sets default styles for text, buttons, images, and the step background.

In Experience Settings, click Edit theme to open the theme editor. Each Theme includes:

• Name and an optional dark mode variant
• Colors — foreground, background, and primary color
• Interface — font family, font size, corner radius, and spacing

The preview on the right shows how your heading levels, paragraph text, and buttons look with the current settings.

Migrate a legacy theme

If you have Themes from the legacy Flow builder, you can migrate them into the new Themes system instead of recreating them from scratch. Migration pulls in your container, text, and button styles and maps your custom CSS to the appropriate variants.

Start the migration

1. Open your Flow 2.0 or Embed in the Builder.
2. Click Experience Settings (gear icon), then open the Theme dropdown.
3. Click Migrate legacy theme at the bottom of the dropdown.

4. In the dialog, select the legacy Theme you want to migrate from the Legacy theme dropdown.
5. Click Migrate.

Review the migration

After migration, the theme editor opens with a Migration tab. This shows a side-by-side comparison of the new Experience Theme (left) and the original Legacy Theme (right) so you can verify styles transferred correctly.

Click View original in the Legacy Theme panel to open the original theme for reference.

Review headings, paragraph text, and button styles in both panels. If anything looks off, switch to the Styles tab to adjust colors, fonts, or spacing, or use the Components tab to fine-tune individual block variants.

Click Save when the migrated theme looks right.

What gets migrated

Migration carries over:

• Container styles for Modals and Tooltips
• Text styles (headings, paragraph)
• Button styles (primary and secondary)
• Custom CSS from the legacy theme, mapped to the corresponding variants

Legacy Themes only support primary and secondary button styles. After migrating, you can add more variants (like a tertiary button) from the Components tab in the theme editor.

Fonts

The Theme editor's Interface section includes a Font family dropdown where you can choose from built-in system fonts. Individual text blocks also have a font selector — set it to Auto to inherit the font from your application.

Auto font inheritance

Auto is the default for new Flows 2.0, Embeds, NPS 2.0, Banners, and Launchpads. When selected, the Appcues SDK detects the primary font family in your application's CSS and applies it to the experience at render time. Your experience text automatically matches the surrounding product UI — no configuration needed.

To use Auto on an existing experience, open the experience in the Builder, highlight the text and select Auto from the Font family dropdown.

Builder preview: Auto inherits the font from your application, not from Studio. In the Studio builder, text renders in a placeholder font. To see how Auto actually looks, use Preview or publish the experience to your application.

Built-in fonts

If you need a specific font that's different from your application's default, choose one of the built-in options from the Font family dropdown. The selected font is bundled with the experience and renders consistently for all users.

Custom fonts (Google Fonts, Adobe Fonts)

The new Themes system for Flows 2.0 and Embeds does not support Google Fonts, Adobe Fonts, or custom font URL imports. Those options are only available in legacy Flow Themes.

For most cases, Auto is the recommended approach — it matches your application's font without any manual font configuration. If your application already loads a custom font (through Google Fonts, Adobe Fonts, or a self-hosted @font-face), Auto will pick it up automatically.

Use Theme variants

Themes support multiple variants for each block type. For example, your Theme might define a "Primary" button (solid fill) and a "Secondary" button (outline style) with different colors and sizing.

To apply a variant:

1. Select a block in the Builder (text, button, or image).
2. Open the block's settings panel.
3. Choose the variant you want from the available options.

The block updates to match that variant's styles.

Create and edit variants in the theme editor

You can also create and manage variants directly in the theme editor without building an experience first.

1. Open the theme editor (from Experience Settings > Edit theme, or from Settings > Themes).
2. Click the Components tab.
3. On the left, select a category. Containers includes Modal, Tooltip, Embed, and Cell. Blocks includes Text, Button, Image, and Close X.
4. The center panel shows existing variants for the selected component. For example, selecting Button shows your default and secondary button variants with a live preview.
5. To add a new variant, type a name in the field at the bottom of the center panel and confirm. The new variant appears in the list and you can style it using the CSS properties panel on the right.
6. To edit an existing variant, select it in the center panel. The right panel shows all CSS properties (background color, border, font, padding, etc.) that you can modify directly.
7. Click Save.

New variants you create here are immediately available in the Builder's block settings panel, alongside the default and secondary variants.

Creating variants in the theme editor is a good way to set up your full style system upfront. You can also create variants on the fly while building an experience — customize a block, then click Save as new in the override menu. Both paths produce the same result.

Override Theme styles

If you customize a block beyond its Theme variant, the Builder shows an override indicator so you know the block has diverged from the Theme.

When you see an override, you have four options:

• Reset individual properties — Click the reset icon next to any overridden property to revert just that value.
• Reset instance — Reset all overridden properties on the block back to the Theme variant.
• Save as new — Save your customizations as a new variant in the Theme.
• Update original — Apply your changes back to the existing variant. This updates every block using that variant.

Advanced styling with CSS

The Advanced tab is also available in Banners, which don't support Themes but do support per-block and step-level CSS customization.

For fine-grained control, the Builder exposes an Advanced tab with CSS properties at two levels:

• Step-level — Controls the step container itself: background color, dimensions, padding, margins, border radius, and box shadow. Select the step (not a block) and open Step Settings > Advanced.
• Block-level — Controls individual blocks within the step. Select any text, button, or image block and open its settings panel > Advanced to style that specific element.

Step styles affect the overall frame your content sits in. Block styles affect the content inside it. Both use the same CSS editor.

Edit existing styles

Each property displays its current value. Click any value to edit it directly. To revert a property to its default, click the revert icon next to it.

Add new styles

Click + Add at the bottom of the styles list to add a CSS property that isn't already listed.

Paste styles in bulk

Click the paste area at the top of the Advanced panel to paste multiple CSS declarations at once. This is useful when copying styles from another source.

Not all CSS properties are supported. After pasting, any unsupported properties are listed so you know what couldn't be applied.

Share styles across blocks

Click Copy CSS at the bottom of the Advanced panel to copy all styles for the current block. You can then paste them into another block's Advanced tab or share them with your design team.

Styling recipes

These recipes show what's possible with the Advanced tab. Copy the CSS into any block to try them out — then adjust the values to match your brand. 

Box shadow

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

Enlarge on hover

transition: transform 0.3s ease-in-out;
:hover {
  transform: scale(1.2);
}

Sunburst glow on hover

:hover {
  box-shadow: #FFF 0 -1px 4px, #ff0 0 -2px 10px, #ff8000 0 -10px 20px, red 0 -18px 40px, 5px 5px 15px 5px rgba(0,0,0,0);
}

Tooltip on hover

position: relative;

::before {
  content: "Tooltip text";
  min-width: 80px;
  position: absolute;
  left: 50%;
  top: -8px;
  transform: translateX(-50%) translateY(-100%);
  background: rgba(0,0,0,0.7);
  text-align: center;
  color: #fff;
  padding: 4px 2px;
  font-size: 12px;
  border-radius: 4px;
  display: none;
}
::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0 6px;
  border-color: rgba(0,0,0,0.7) transparent transparent transparent;
  border-style: solid;
  display: none;
}

:hover::before { display: block; }
:hover::after { display: block; }

Gradient button with hover shift

border-radius: 50px;
background-size: 200% auto;
background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
transition: 0.5s;
:hover {
  background-position: right center;
}

Rotate an image

transform: rotate(-15deg) translate(-30px, 20px);

Hand-drawn border

border-color: #41403E;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
border-style: solid;
border-width: 2px;
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);