The Design tab in the right panel controls each element’s visual appearance. The available properties depend on the element type, but most elements share common styling options.

Size and space

Visibility

The Visibility toggle determines whether the element appears on screen.

• Show Show (default): The element is always visible.
• Conditional Conditional: The element is visible only when specific conditions are met. See Conditional visibility for more information.
• Hide Hide: The element is always hidden. Use this to temporarily remove an element from the flow without deleting it.

Sizing

Each element has Width and Height controls with three modes:

• Fill: Stretch to occupy all available space in the parent
• Hug: Shrink to fit the element’s content
• Fixed: Set an exact pixel value for the dimensions

Spacing

The Spacing section displays a box model with two layers:

• Margin: The space between the element and its neighbors. Does not extend beyond the boundaries of the parent container, regardless of its value.
• Padding: The space between the element’s border and its content.

Set the value for each side individually.

Fill

The Fill section controls the element’s background. Four fill types are available: solid color, gradient, image, and video.

Use this property to set the hero image / video for the entire screen.

• Solid color Solid color. Use the color picker, enter a hex value, or assign a project-wide color style. Adjust the opacity to make the background semi-transparent.
• Gradient Gradient. Add a gradient fill with two or more color stops. Drag the stops to adjust the transition, and change the gradient angle to control its direction.

• Image Image or Video Video. Set an image / video as the element’s background.

Border

Borders are off by default. Click the Plus next to Border in the right panel to add one. To remove a border, click the Close next to the Border heading.

When a border is present, configure:

• Color: Use the color picker, enter a hex value, or assign a project-wide color style. Adjust the opacity to make the border semi-transparent.
• Width: The border thickness in pixels.

Corners

The Corners section controls the border radius (rounded corners).

• Radius slider: Set the same radius for all four corners
• Per-corner toggle Per Corner: Enable to set a different radius for each individual corner

Effects

Click the plus button Plus next to Effects to add one or more visual effects:

• Drop shadow: A shadow behind the element
• Inner shadow: A shadow inside the element’s boundaries
• Background blur: Blurs the background
• Layer blur: Blurs the element and its children

You can stack multiple effects on the same element. Toggle its visibility Show to temporarily disable an effect.

Animation

Click the Plus button next to Animation to add an animated effect. Currently, Pulse is the only available animation — the element rhythmically scales up and down to draw attention.

Configure the Pulse animation with the following parameters:

Parameter	Description
Scale amount (%)	How much the element grows relative to its original size
Duration (ms)	Length of a single animation cycle
Delay between loops (ms)	Pause between repetitions
Shadow color	Color of the pulsing shadow effect
Shadow size (px)	Size of the pulsing shadow

Preview the animation

The builder shows static screens by default — animations stay still until you turn them on. Two ways:

• Click the Toggle animations Toggle animations button above the device preview. It turns the screen’s animations on or off — once on, they run continuously until you click again. The button only appears when the active screen contains at least one animation.
• Open the screen’s context menu (the three-dot icon next to the screen layer) and choose Play Animation.

Appearance

• Opacity: Ranges from 0% (transparent) to 100% (opaque)
• Rotation: Enter a value in degrees to rotate the element

Typography properties (text elements)

Text elements display a Typography section with the following controls:

Font

Click the font dropdown Font select to open the font picker. It has two tabs:

• Styles: Lists your project’s saved text styles. Select a style to apply its full typography settings at once.
• Fonts: Lists all available font families. Search or scroll to find the one you need.

Size and weight

• Weight: Select a font weight from the dropdown
• Size: Select a size from the dropdown or type a custom value

Color

Click the color swatch to open the color picker. Enter a hex value, use the palette, or select one of the reusable styles. Adjust the opacity slider to make the text semi-transparent.

Alignment

Two groups of alignment controls:

• Horizontal: Left Align left, Center Align center, or Right Align right
• Vertical: Top Align top, Middle Align middle, or Bottom Align bottom

Decoration

• None None: No decoration (default)
• Underline Underline: Adds an underline to the text
• Strikethrough Strikethrough: Adds a strikethrough line

Truncation

Enable truncation to cut off text that exceeds the Max Lines setting. This is useful when supporting multiple languages: if a translated string is longer than the original, truncation prevents it from breaking the layout.

State-specific settings (interactive elements)

Interactive elements support multiple visual states. When you select such an element, a States section appears in the right panel. Switch between states to configure different visual properties for each.

Each state can override any visual property — fill, border, typography color, opacity, and more.

Selectable states

Elements that belong to a selectable group (quiz options, products, tabs, trial toggles) offer two states by default:

• Default: The element’s normal appearance
• Selected: The appearance when the user has selected this option. Override properties like fill, border color, and text color to highlight the active choice

To style a selectable element when it’s not interactive, add a third state manually. Open States settings Settings and add a Disabled state.

The Disabled state is condition-driven. Select it and click Set conditions set conditions to define when the element becomes disabled at runtime, for example when a required field is empty.

Input states

Input fields offer additional states:

• Default: Normal, unfocused appearance
• Active: The field is focused and ready for input
• Invalid: The entered value fails validation
• Disabled: The field is not interactive

Other state-bearing elements

A few elements expose state-specific styling outside the standard Default / Selected / Disabled pattern:

• Progress indicator steps — three states per step: Completed, Current, and Upcoming.
• Carousel dots — two color variants: Color for inactive dots and Active Color for the dot of the current slide.

Reusable styles

The Styles Styles panel in the left sidebar allows you to define reusable styles that apply across your entire flow. Two types of styles are available: text styles and color styles. You need to use color styles to enable dark mode support.

Text styles

Text styles store a complete set of typography settings — font family, weight, size, line height, alignment, and decoration. Every flow template includes default presets, and you can create custom styles.

To create a text style:

1. Open the Styles Styles panel and select the Text tab.
2. Click Plus Create style.
3. Enter a name and configure the typography settings.
4. Click Create.

To apply a text style, select a text element and choose the style from the font dropdown in the Typography section.

Color styles

Color styles are named colors that you can reference throughout your flow. Each color style has a name (like “Primary text” or “Brand”), a hex value, and a usage count showing how many elements reference it.

To create a color style:

1. Open the Styles Styles panel and select the Colors tab.
2. Click Plus Create style.
3. Enter a name and pick a color.

When you update a color style, every element that references it updates automatically.

Dark mode

If necessary, you can add two variants to each color style — one for light mode Light mode and one for dark mode Dark mode. The SDK automatically applies the correct variant based on the device’s current color scheme.

To preview dark mode in the builder, use the theme toggle Dark mode in the bottom toolbar.