The Branding Settings page allows you to confidently shape the look and feel of your portal. By defining your visual identity here, you ensure the platform mirrors your company’s exact brand image.
In this article, we will be covering these topics:
2. How to Configure your Banding
2.1 Accessing the Branding Settings Page
2.6 Container Style Configuration
1. Pre-Requisites
Before using the Branding Settings page, the following areas of the platform must already be configured. These areas feed into or interact directly with the branding settings you will manage here.
| Area | Why It Matters |
| Portal Creation | The Branding Settings page is scoped to a specific portal by its Portal ID. The portal must exist before you can access or configure its branding. |
| Setup Wizard | Branding settings are initially inherited from the Setup Wizard, including your portal's logo and favicon. |
| Publishing Flow | Publishing is handled as a separate step in the Publishing flow. Your saved settings will not be visible to your end users until that step is completed. |
2. How to Configure your Banding
2.1 Accessing the Branding Settings Page
The Branding Settings can be accessed via the Editor button on the top bar navigation.
Important: If the portal you are trying to access is in a Delete Pending or Deleted state, the page will be inaccessible.
2.2 Page Layout
The Branding Settings page is divided into two main sections that work together:
| Section | Position | Purpose |
| Previews Panel | Left | Displays a live visual rendering of your portal as it will appear based on your current configuration choices. Updates instantly as you make changes. |
| General | Right | Contains all the controls you use to configure branding elements, including logo, colours, fonts, and container styles. |
Every change you make in the right-hand Selector panel is reflected instantly in the left-hand Preview panel.
2.3 Logo & Icon Configuration
| Field / Control | Description |
| Logo Preview | Displays the current logo as it will appear in the portal. |
| Icon Preview | Displays the current icon (favicon) as it will appear in the portal. |
| Upload (Logo) |
Allows you to upload a custom file, which will overwrite the logo inherited from the Setup Wizard. Upload Requirements (Logo and Icon):
|
| Upload (Icon) | |
| Toggle: "Use icon instead of logo" | When enabled, the portal will display the icon in place of the logo. This is useful for compact navigation layouts. |
When no custom logo/favicon has been uploaded, the portal generates a dynamic default logo/favicon automatically, showing the first character of your Site Name on your primary colour background, with white text.
Important: To change the dynamic logo's background colour, you would need to update the primary colour during the Setup Wizard flow or upload a custom logo.
2.4 Colour Configuration
Colour settings control the overall palette of your portal. Changes you make here affect multiple areas of the preview simultaneously.
The colour selector accepts standard HEX, RGB, and HSL colour codes. If you enter an invalid HEX value, the system will display a validation error on the field and the preview will not update.
Default Values:
- Primary Colour: #14B8A6
- Secondary Colour: #0C6E64
Adjusting the colour selector will immediately update the following areas of the preview (Areas 1, 2, 3):
The system includes a built-in accessibility feature to help ensure your portal meets readability standards (Based on WCAG AA minimum contrast ratio). When you select a light primary colour, the system will automatically select a readable text colour to maintain sufficient contrast.
- Zero Effort: You don’t need to worry about the color brightness or text readability. The system does the heavy lifting for you.
- Professional Standards: This ensures your portal follows international web standards, making it look professional and accessible to all your users.
2.5 Font Configuration
Fonts play a significant role in establishing your portal's tone and readability. The font selector offers two modes: Preset and Custom.
2.5.1 Preset Font Mode
In Preset mode, you can choose from four pre-defined font pairs. Each preset comes with a defined body font and a heading/subheading font pairing. This is the recommended starting point for most admins, as it ensures visual consistency without requiring font expertise.
Here are the preset pairings:
2.5.2 Custom Font Mode
Alternatively, you can switch to Custom mode and select fonts independently for more customisation of your brand image.
To configure custom fonts:
- Select the Custom mode in the Fonts section.
- Use the Body Font selector to choose the font that will apply to general text content.
- Use the Heading Font selector to choose the font that will apply to headings and labels.
- Review the preview panel to confirm the combination works as intended.
2.6 Container Style Configuration
Container styles control the shape of UI elements such as buttons, search bars, cards, and tags. The preview updates immediately once you have selected your elements.
The three available options and your corresponding border radius values are:
| Style | Border Radius | Visual Character |
| Rounded | 8px (cards: 16px where applicable) | Soft, modern appearance |
| Sharp | 0px | Clean, formal, geometric appearance |
| Pill | 50px | Bold, friendly, high-contrast appearance |
Container style applies to the following elements:
- Buttons
- Search bar
- Search result cards
- Tags
To apply a container style:
- Locate the Container Styles section in the right-hand panel.
- Select one of the three options: Rounded, Sharp, or Pill. (You can only select 1 of the 3)
- The preview panel will immediately reflect the new style across all affected elements.
2.7 Saving Your Branding Configuration
Saving immediately updates your staging (Preview Site) - your internal preview environment will reflect the saved changes without needing a publish action. Your live production site will only reflect changes after you complete a Publish action.
3. Troubleshooting & Edge Cases
| Issue | Likely Cause | Resolution |
| Logo or icon is not displaying on the Branding Settings page | The Setup Wizard was not fully completed, so no logo or favicon was inherited | Return to the Setup Wizard and complete all steps, then return to the Branding Settings page. Your logo and icon should now appear. |
| Changing the primary colour is not updating the logo | A custom logo has been uploaded, which breaks the dynamic colour relationship | If you want colour-responsive branding, remove the uploaded logo so the portal reverts to the dynamic inherited logo. The primary colour will then affect it again. |
| Preview is not updating when I make changes | The page may have encountered a client-side rendering issue | Refresh the page and re-apply your changes. If the issue persists, clear your browser cache and try again. Note that unsaved changes will be lost on refresh. |
| The HEX colour field is showing a validation error | The HEX code entered is not in a valid format (e.g., missing the # prefix, incorrect character length, or invalid characters) | Ensure your HEX code follows the format #RRGGBB (e.g., #3A7BD5). Correct the value and the preview will update once a valid code is entered. |
| I saved my settings but the live portal has not changed | Saving does not publish changes; the Publishing flow must be completed separately | Navigate to the Publishing section and follow the publish steps to deploy your saved branding to the live portal. |
| The Branding Settings page is inaccessible | The portal may be in a Delete Pending or Deleted state | Check the portal's status in the portal management area. If the portal should not be in this state, contact your system administrator. |