Flows Styling and Themes

A theme controls the visual appearance of all cards in a flow. Use themes to keep cards consistent across the full experience, including colors, borders, spacing, fonts, buttons, and backdrop behavior.

Any changes you save to a theme are persistent. The updated theme applies to all other flows using it and becomes the default for new flows you create. You can still override the styling of individual cards without affecting the theme.

Learn how to style individual cards.

Colors

Each color is set using a color picker with a color wheel and hex input.

Primary: the main accent color, used for primary buttons and key UI elements.

Secondary: used for secondary buttons and supporting elements.

Background: the background color of the card.

Text: the default text color inside the card.

Card Border

Card Border controls the shape and appearance of the card's outer border.

Radius: how rounded the card corners are, in pixels. The maximum value is 24px. Set it to 0 for sharp corners, or use a higher value for a more rounded card.

Width: the thickness of the border, in pixels. The maximum value is 5px. Set it to 0 to remove the border entirely.

Color: the color of the border, set with the color picker.

Card Padding

Card Padding controls the internal spacing between the card's content and its edges.

Horizontal (X): left and right padding, in pixels. The maximum value is 48px.

Vertical (Y): top and bottom padding, in pixels. The maximum value is 32px.

Glass Effect

Glass Effect is a toggle that applies a frosted glass visual effect to the card background.

When enabled, the card takes on a semi-transparent, blurred appearance instead of a solid background.

Font

Font controls which font is used for text inside the cards.

System: uses a standard system font stack, meaning the default fonts built into the user's operating system.

Inherit: uses whatever font is applied to your host page, so the cards match your product's typography automatically.

Buttons

Button settings apply to all buttons across the flow.

Button style

Radius: corner rounding of buttons, in pixels. The maximum value is 24px.

Border width: thickness of the button border, in pixels. The maximum value is 5px.

Padding X: left and right padding inside the button, in pixels. The maximum value is 32px.

Padding Y: top and bottom padding inside the button, in pixels. The maximum value is 24px.

Font size: the size of the button label text, in pixels. The maximum value is 24px.

Button colors

You can set text color and background color separately for primary buttons, secondary buttons, and outline buttons.

By default, buttons inherit the primary and secondary colors defined in the Colors section above.

Backdrop

The backdrop is the overlay that appears behind the card when it is attached to a specific element on the page.

There are three modes:

None: no backdrop is shown. The rest of the page remains fully visible and unchanged.

Darken: applies a dark overlay over the page behind the card. You can set the backdrop color and opacity. The highlighted element is cut out of the overlay so it remains visible and in focus.

Glow: works like Darken, but adds a glow effect around the highlighted element instead of simply cutting it out.

Block clickthrough

Block clickthrough controls whether users can interact with the page outside of the active flow card.

When enabled, users cannot click or interact with anything outside the active card. This keeps the user focused on the current step.

When disabled, the rest of the page remains fully interactive while the card is shown.

This setting can be toggled per flow and takes effect immediately when switched.

Highlighter ring

Highlighter ring draws a visible ring around the element the card is attached to.

Use it to make it clear which page element the card is referring to. You can set the color and thickness of the ring.