Appearance & theming

Match every flow to your product so it feels native, not bolted on. The Appearance tab controls color, type, shape, layout, and more - each with a live preview. This page explains every option.

Color presets

The fastest way to style a flow is a color preset - a coordinated set of accent, background, and text colors. Pick one, then fine-tune any color afterward (picking another preset overwrites your tweaks). Presets come in light and dark groups:

Individual colors

Beyond presets, set each color by hand with the color pickers:

• Accent - buttons and highlights.
• Button text - the ink on accent buttons.
• Background - the card/panel surface.
• Text - the body and title ink.

Colors accept standard hex values (with optional transparency). The runtime re-validates them, so an invalid value can never reach your users.

Corner radius

Set how rounded the cards are with the corner radius slider (0–200px). A separate button radius controls the buttons, with an "Auto" option that matches the card corners.

Font

Choose the type family. Inherit (the default) uses your app's own font so flows blend in. There are also system stacks (system, sans, serif, mono) and self-hosted families:

Text size

Scale the flow's text: Small, Default, Large, or Extra large. Useful for a denser tooltip or a more prominent announcement.

Shadow

Set the card's depth: None, Soft, Medium (default), or Strong. A softer shadow reads as more subtle; a stronger one lifts the card off the page.

Page dim (overlay)

Turn the page dim on or off. When on, a spotlight dims via a cutout around the target (for a tour), or the whole page dims flat (for other styles), focusing attention on the flow. Off keeps your app fully visible behind the flow.

Light and dark variants

You can provide an optional dark variant so flows adapt to your app's theme. Set the dark colors separately; when the dark variant matches the light one, it is cleared automatically to keep the config lean. The runtime picks the right variant based on the viewer's color scheme.

---

Per-type appearance controls

Beyond the shared theme, each flow type has its own layout controls.

Tour & tooltip cards

Choose a card style for how the step card is arranged:

You can also set the tooltip width (240–560px), how Back / Next render (text buttons or chevron arrows), the progress indicator (count, fraction, dots, bars, a progress bar, or none), and an optional welcome modal (title, body, button, image) shown before step one.

Checklist & resource-center launcher

The launcher (the floating corner button + panel) has its own layout:

Plus: position (bottom-right or bottom-left), panel width (260–480px, with an Auto default), progress on the button (a count, a check when done, or nothing), checkbox shape (circle or square), whether to hide divider lines, the initial state (open the list or show just the button), completion order (any order or one at a time), and the dismiss control (a footer button, a corner cross, or none). A resource center hides the task-only settings and adds a row icon choice (icon, bullet, or none). See Checklists and Resource center.

Announcement cards

Announcements add:

• Position - center, or any corner / edge (a 3×3 grid).
• Entrance animation - fade, slide, or scale.
• Height mode - fit each card, match the tallest card, or a custom minimum height.
• Width and the same card styles as tours.

The live preview

Every control updates a preview that renders through the real runtime - the same code and CSS your users see - so it is pixel-accurate and can never drift from what ships. There is also a full-screen "Live preview" that plays the actual flow on a simulated app page.