Brand Center

The Brand Center lets you tailor the look and feel of the mobile app for your organization. You can set brand colors, choose fonts, assign banner images, and configure videos — all with a live phone preview so you can see changes before publishing.

Note

Brand Center requires the BrandCenter feature flag to be enabled for your tenant by a system administrator. If the feature is not enabled, Brand Center will not appear in the sidebar.

Who has access?

Brand Center is available to Admin and SuperUser roles. See User Roles for a full comparison.

Page layout

The Brand Center page is split into two areas:

• Left panel — Four tabs (Colors, Typography, Banners, Videos) where you make changes.
• Right panel — A live phone mockup that previews your changes across five app screens: Home, Content, Journal, Community, and Chat.

Use the radio buttons above the phone mockup to switch between preview screens.

Colors

The Colors tab controls every color in the mobile app. Colors are organized into groups so you can find what you need quickly.

Color groups

Group	What it controls
Brand Colors	Highlight Color (primary brand accent) and Secondary Highlight
Text Colors	Default text on light backgrounds and dark backgrounds
Background	Main background, top and bottom gradient colors, backdrop overlay, and modal background
Buttons	Main button, secondary button, profile button, back button, and play button
Navigation	Navbar background color
Chat	User message bubble and other user’s message bubble
Content	Free writing answer block and prompt card border

Each color has a color picker with a hex input field. Click the color swatch to open the picker, or type a hex value directly.

Color presets

At the bottom of the Colors tab you will find the Color Presets panel. Presets let you save and restore complete color schemes.

• Save a preset — Enter a name in the New Preset Name field and click Save as New Preset. This stores all current color values.
• Load a preset — Select a preset from the dropdown and click Load. All colors update instantly.
• Delete a preset — Select a preset and click Delete. A confirmation dialog appears before deletion.

Tip

Use presets to experiment with different color schemes without losing your current setup. Save your current colors as a preset before making major changes.

Typography

The Typography tab controls which fonts are used for each text style in the mobile app. You can assign a different font to each of the following styles:

• H1 through H5 — Heading levels from largest to smallest.
• Paragraph — Standard body text.
• Sub-Paragraph — Smaller supporting text.
• Tiny — Captions and fine print.

For each style, select a font from the dropdown. The dropdown lists all font files uploaded to your Media library (and any system-wide fonts). After selecting a font, a live preview shows how that font renders at the appropriate size.

Note

To add a new font, upload a font file (e.g., .ttf) through the Media section first. It will then appear in the font selection dropdowns here.

Banners

The Banners tab lets you assign banner images to four sections of the mobile app:

• Home Banner
• Content Banner
• Journal Banner
• Community Banner

Each banner slot shows a thumbnail preview of the currently assigned image (or a placeholder if none is set).

To assign a banner:

1. Click Select (or Change if one is already assigned) on the banner slot.
2. Browse the media library grid that appears below.
3. Click an image to assign it.

To remove a banner, click Remove on the slot.

You can also upload new images directly from this tab using the Upload Image button above the media library grid.

Videos

The Videos tab lets you assign a video that plays after user onboarding completes. This is the After Onboarding video — a short clip that welcomes new users to your platform.

To assign a video:

1. Select a video from the dropdown, or click a video in the library grid below.
2. A preview player appears so you can verify the video.

To remove the video, click Remove Video.

Use the Upload Video button to add new videos directly from this tab.

Saving and publishing

Changes in the Brand Center follow a two-step workflow:

1. Save — When you modify any setting, a banner appears at the bottom of the left panel showing “You have unsaved changes.” Click Save to persist your changes, or Revert to discard them.

2. Publish — After saving, click the Publish styling button at the top-right of the page. This clears the styling cache so all mobile app users see your updated branding. A confirmation dialog appears before publishing.

Caution

Publishing affects all styling changes at once for your entire tenant — not just the tab you most recently edited. Make sure all tabs are in the state you want before publishing.

Note

The Publish styling button is disabled while you have unsaved changes. Save first, then publish.

Related topics

• Media — Uploading images, videos, and fonts used in the Brand Center.