Theme

Theme lets you control the branding and visual identity of your tenant experience across mobile and web. Set your welcome card image, hero banner, button colors, and app-wide primary and secondary colors — all scoped to specific buildings.

Overview

Navigate to HqO Admin > App Configuration > Theme to configure your property's visual appearance.

Theme settings are split into two sections:

• Home screen configurations — settings that affect the welcome card and home screen design (mobile app)
• App configurations — settings that affect the entire app experience across mobile and web

Click Save at the top of the page to apply your changes.

⚠️ Note: Theme settings are scoped to the currently selected building. Many settings include an option to apply them across multiple buildings simultaneously.

Home screen configurations

Logo overlay

Setting	Description
Show logo overlay on welcome card	When checked, the building logo appears centered on top of the welcome card image.

Welcome card title

Choose how the title appears on the welcome card:

Option	Description
Text	Display a text title. Enter up to 24 characters. Defaults to the building name.
Image	Upload a custom image to use as the title instead of text.

Welcome card background

Select the background style for the welcome card:

Option	Description
Image	Upload a custom image. Recommended size: 750 × 480 px (PNG or JPEG). Include Image alt text for accessibility.
Solid color	Fill the welcome card with a single solid color.
Gradient	Apply a gradient background.
White background	Use a plain white background.

Hero image

The hero image appears at the top of the home screen in the web app.

Option	Description
Image	Upload a banner image. Recommended size: 1280 × 196 px (PNG or JPEG). Include Hero image alt text for accessibility.
Solid color	Use a solid color as the hero banner.
Gradient	Apply a gradient to the hero area.

Button & icon color

Configure the color of utility buttons and icons on the home screen:

Field	Description
Button color	Hex code for the button background.
Icon color	Hex code for icons on buttons. Editable only when Button color is #FFFFFF.

Button shape — Choose the shape of utility buttons on the home screen:

Option	Description
Circles	Round buttons — best when you have 4 or more buttons and want to emphasize icons over labels.

Check Apply this utility button shape to multiple buildings to apply the same shape across a selection of buildings.

App configurations

Primary & secondary colors

These colors apply to the entire app (both mobile and web when web is activated).

Field	Description
Primary color	Hex code used for key action areas — call-to-action buttons and primary UI elements.
Secondary color	Hex code used for secondary action areas — external links and supporting UI elements.

Check Apply these primary and secondary colors to multiple buildings to propagate color settings across multiple properties at once.

Core workflows

Updating the welcome card image

1. In the Welcome card background section, select Image.
2. Click Upload image or Choose File to upload a PNG or JPEG (recommended: 750 × 480 px).
3. Enter Image alt text describing the image.
4. Click Save.

Changing the primary color

1. Scroll to App configurations > Primary & secondary colors.
2. Enter a new hex code in the Primary color field.
3. Optionally check Apply these primary and secondary colors to multiple buildings and select which buildings to update.
4. Click Save.

Applying settings across multiple buildings

1. Edit the desired setting (button shape, primary color, etc.).
2. Check the Apply to multiple buildings option below that setting.
3. Select the buildings to include from the multi-select field.
4. Click Save.

FAQ

Where do the primary and secondary colors actually appear? The Primary color does most of the work: it fills main buttons and marks what's selected. The Secondary color appears in far fewer places, mostly on small action links. Both are set under App configurations > Primary & secondary colors.

Where	Primary color	Secondary color
HqO Web	Main buttons, including confirm buttons in pop-ups. The header bar (on the home page, once you scroll). The category label above the title on event and content pages.	Action links on event and content pages, such as add to calendar or open in maps. The terms and privacy links during sign-up. The arrows on the account settings rows. A content tile's title when you hover over it.
iOS app	Main buttons and alert buttons. The tab bar. Loading spinners and pull-to-refresh. The view-all links on home screen sections. Checkboxes and radio buttons. The selected building in the building picker.	Links in alerts. Action links on content pages, such as add to calendar or open in maps.
Android app	Main buttons and dialog buttons. The selected tab in the bottom navigation bar. Checkboxes and radio buttons.	Not used on Android's own screens. Feature apps such as Resource Booking can still use it.
Feature apps (such as Resource Booking)	Each feature app gets both colors and chooses where to use them. Most fill their main buttons with the primary color.	Varies by feature app. In Resource Booking, for example: the terms and conditions link on a resource, the link for adding guests and the floor plan button.

On iOS, the sign-in and registration screens come before a building is selected, so they show your app's built-in colors instead of these.

Which one should be the brand color? The primary color, because it's the one tenants see most. Check both colors against white: the Contrast ratio readout beside each field shows Pass when the color meets WCAG AA (4.5:1).

Do theme changes apply immediately? Yes. Changes take effect for users as soon as you click Save and the app refreshes.

Can different buildings have different themes? Yes. Each building maintains its own theme configuration. Use the building selector in the top bar to switch between properties. Settings with the "apply to multiple buildings" option let you push a single value to many buildings at once.

What is the "Icon color" field used for? Icon color controls the color of icons placed on utility buttons. It is only editable when Button color is set to pure white (#FFFFFF) — in all other cases, HqO automatically sets a contrasting icon color.

What size should my welcome card image be? The recommended size is 750 × 480 px. Larger images are accepted but will be cropped or scaled to fit.

Need help?

Contact your HqO account team or email appsupport@hqo.co.

Related

• Features
• Experience Channels
• Buildings