Brand Themes

Create reusable brand themes with your colors, fonts, and button styles to keep Stories consistent.

Overview

Brand themes are saved design configurations that you can apply to any Story. Instead of manually setting colors and fonts for each Story, create a theme once and reuse it across all your onboarding flows.

Each theme stores:

  • Typography settings (fonts, sizes, weights)
  • Color palette (background, text, buttons, progress indicators)
  • Button styling (radius, padding, width)
  • Layout preferences (alignment, spacing, safe areas)
  • Progress indicator style and position

Default Theme

Every app starts with a default theme that's created automatically. This default theme can be edited but not deleted. New Stories use the default theme unless you specify otherwise.

Creating a Theme

  1. Go to Settings > Brand Themes in your dashboard
  2. Click Create Theme
  3. Configure your settings across each section
  4. Name your theme and click Save

Editing a Theme

  1. Go to Settings > Brand Themes in your dashboard
  2. Click on the theme you want to edit
  3. Make your changes across any section
  4. Click Save

Changes apply to all Stories using that theme. Existing published Stories will update the next time they're loaded by users.

Theme Settings

The theme editor has six configurable sections with a live preview that updates as you make changes.

Basic Information

  • Name - A descriptive name for your theme (e.g., "Brand Dark", "Holiday Campaign")
  • Description - Optional notes about when to use this theme

Typography

Configure text appearance across your Stories:

  • Font Family - System default or custom font
  • Title Size - Headline text size in pixels (e.g., 28px)
  • Title Weight - Regular, medium, semibold, or bold
  • Body Size - Body text size in pixels (e.g., 16px)
  • Body Weight - Regular, medium, semibold, or bold
  • Line Height - Spacing between lines (e.g., 1.5 for 150%)

Colors

Set your color palette:

  • Background - Screen background (solid color, gradient, or image)
  • Title - Headline text color
  • Body - Body text color
  • Primary Button - Main button background color
  • Primary Button Text - Text color on primary buttons
  • Secondary Button - Secondary button background (often transparent)
  • Secondary Button Text - Text color on secondary buttons
  • Progress Active - Color for completed/current progress indicators
  • Progress Inactive - Color for remaining progress indicators
  • Skip Button - Skip/dismiss button text color

Button Styling

Configure button appearance:

  • Border Radius - Corner roundness (0 for square, higher values for rounded, 999 for pill shape)
  • Padding Vertical - Top and bottom padding in pixels
  • Padding Horizontal - Left and right padding in pixels
  • Full Width - Whether buttons stretch to fill the available width

Layout & Spacing

Control content positioning:

  • Content Alignment - Vertical position of content (top, center, or bottom)
  • Text Alignment - Horizontal text alignment (left, center, or right)
  • Respect Safe Area - Avoid the notch and home indicator on modern devices
  • Status Bar Style - Light text, dark text, or hidden
  • Horizontal Padding - Space from screen edges in pixels

Progress Indicator

Configure the screen progress display:

  • Style - Dots, bar, numbers, or none
  • Position - Top, bottom, or above buttons

Duplicating a Theme

Create a copy of an existing theme to use as a starting point:

  1. Go to Settings > Brand Themes
  2. Find the theme you want to copy
  3. Click the ... menu and select Duplicate
  4. A new theme is created with "(Copy)" added to the name
  5. Edit the copy to customize it

Deleting a Theme

Remove themes you no longer need:

  1. Go to Settings > Brand Themes
  2. Find the theme you want to delete
  3. Click the ... menu and select Delete
  4. Confirm the deletion

Restrictions:

  • You cannot delete the default theme.
  • You cannot delete a theme that's in use by Stories. Remove it from all Stories first.

Using Themes for Light & Dark Mode

Themes are single-mode designs. To support both light and dark mode in your app:

  1. Create one theme for light mode (e.g., "Brand Light")
  2. Create another theme for dark mode (e.g., "Brand Dark")
  3. When creating a Story with "Both" mode selected, assign each theme to its respective mode

This gives you full control over how your Story appears in each mode.

Applying Themes to Stories

During Story creation (AI-generated or from scratch), you'll select which theme to use. If your Story supports both light and dark mode, you'll select a theme for each.

Tips

  • Create separate themes for light and dark mode appearances
  • Use your app's existing brand colors for consistency
  • Name themes descriptively so your team knows when to use each one
  • Add descriptions to themes explaining their intended use case
  • Delete unused themes to keep your library organized

For Developers: Control theme display with the colorScheme prop.