Branding & Customization
Apply your event's visual identity to every corner of the Highbar app.
Highbar gives you full control over how your event app looks. Colors, logos, fonts, app icon, custom install screens, and the AI avatar. Everything is configurable, and every change is visible in real time with Live Preview.
Opening the Branding tab
In your event editor, click Branding in the left sidebar.
Colors
Primary color
This is the dominant brand color. It appears on buttons, links, active states, and accent elements throughout the app.
Enter a hex code or use the color picker. If you're not sure, use your company's primary brand color. For most B2B events, a mid-blue, dark teal, or deep navy works well and reads clearly on both light and dark backgrounds.
Secondary color
Used for secondary actions, highlights, and backgrounds. Often a lighter tint of your primary color, or a complementary neutral.
Background and surface colors
Control the main background and card/surface colors. Most organizers leave these at the defaults (white for light mode, dark gray for dark mode) unless they have a specific design intent.
High contrast between your primary color and the background improves readability, especially in bright outdoor venues. Test with Live Preview.
Logos
Header logo
This appears in the top navigation bar of the app. It should work on both light and dark backgrounds.
Recommended format: SVG or PNG with transparent background. Recommended dimensions: 120 by 40 pixels or equivalent ratio.
App icon
This is the icon that appears on the home screen when attendees install the PWA. It should be a square image with enough contrast to stand out on a phone home screen.
Recommended format: PNG. Recommended size: 512 by 512 pixels.
Splash screen image
Shown briefly when the app loads. Can be your full logo, event banner, or a branded graphic.
Recommended size: 1080 by 1920 pixels (portrait).
Fonts
Select from available font families. Highbar supports a curated set of Google Fonts in addition to the system font stack.
For most events, the system font stack (San Francisco on iOS, Roboto on Android) is a safe and fast choice. Custom fonts add personality but require a download on first load.
AI avatar
The AI concierge is represented by an avatar image in the chat interface. The default is a generic AI icon.
You can upload a custom avatar: your brand mascot, a friendly illustrated character, or a themed illustration. This small detail makes the AI feel like a natural part of your event rather than a generic add-on.
Recommended format: PNG or SVG, circular crop, at least 128 by 128 pixels.
Custom install screen
When attendees are prompted to install the PWA to their home screen, they see an install screen. You can customize:
- Headline text ("Add to your home screen for quick access")
- Subtext
- Background color
Keep the headline short. Attendees decide in about two seconds whether to tap Install or dismiss.
Live Preview
Every change you make in the Branding tab appears instantly in the Live Preview panel. The preview simulates the app on a mobile screen.
Use Live Preview to:
- Check how your colors look in both light and dark mode
- Verify your logo renders correctly at header size
- Review the full attendee experience before you go live
Click the device toggle in Live Preview to switch between phone, tablet, and desktop views.
Dark mode
Highbar supports both light and dark mode out of the box. Attendees' devices automatically switch between modes based on their system settings.
Your primary and secondary colors automatically adapt. Preview both modes in Live Preview to make sure your brand looks sharp in each.