You can switch between App and Intranet by adjusting the toggle at the top of the App and Intranet Branding page to display the features available for each. For example, the Bottom Bar applies only to the App, while the Menu Bar applies only to the Intranet.

Use Preview at the top of the App and Intranet Branding page to see how your branding changes appear to users. You can switch the toggle between App and Intranet to view each experience.

Staffbase recommends reviewing all changes in Preview before saving them.

You can add and manage your brand colors from the Colors page. This page acts as a central repository, making it easy to define, customize, and reuse colors across your platform. You can apply your brand colors to the following interface elements:

• Main branding color: Highlight key tasks and actions, such as buttons, breadcrumb navigation, links, and more.
• Navigation headers: Customize the look of your navigation headers with the following color options:
  • Text color: Applies to all elements within the navigation header, including text and icons. For example, the menu folder, launchpad, and notification center.
  • Background color: Sets the background of the navigation header.
  • Accent color: Highlights the currently open menu item in the App or Intranet.
• Bottom Bar: Customize the color of the bottom navigation bar on your mobile devices to enhance the interface and improve the navigation experience.
• Menu bar: Customize the following aspects of your Intranet menu to match your brand and improve navigation.
  • Text and Icons: Adjust the color of menu labels and icons. Choose a style that keeps items easy to read and visually consistent with your brand.
  • Background: Set the background color of the menu bar. Pick a shade that provides good contrast and aligns with your overall theme.
  • Accent: Define the highlight color used for active or hovered menu items. This helps users understand their current position in the navigation and enhances usability.
• Navigator: Customize the following elements in your Navigator:
  • Message Color: Set the text and background color of the text input and responses.
  • Voice Orb Color: Set the accent colors displayed when users use voice input.

You can customize existing colors and add additional brand colors using HEX codes or the color picker. There’s no limit to the number of colors you can add.

You can upload two types of logos in your branding settings:

App and Intranet Logo

Upload a logo that reinforces your organization’s core values. Your logo is shown throughout your mobile and web app. You can upload a square- or rectangle-shaped logo. 

Requirements

Logo Size:

• Square logo size exactly 40 x 40 px
• Rectangular logo size exactly 120 x 40 px

Logo Format:

• JPG
• PNG
• GIF
• TIF
• BMP
• HEIC (iOS high-efficiency format)

Navigator Logo

Upload a logo for your Navigator. The logo appears as an icon that users can click to open the Navigator. It is displayed in the bottom-right corner of your web app and above the bottom navigation bar for your mobile app. The logo is also visible within the Navigator during user interactions. 

Requirements

Logo Size:

• 64 x 64 px or larger
• Up to 25 MB

Logo Format:

• JPG
• PNG

Provide a header for your App or Intranet homepage. This can be your organization's name, your App, or Intranet name.

Optionally, upload a background image for desktop users from My Files or your local computer.

 Recommendations:

• Image size 1920 x 1080 px or larger:  If the image does not match the recommended size, the image is automatically zoomed or cropped to the optimal size, which can result in reduced quality.

The background image is used in the following places:

• Your public area
• Behind the sign-in dialog, if you don't have a public area
• Everywhere in your web app after sign-in

If configured, the welcome page is shown right after a user’s first sign-in and introduces the user to your app. You can use it to show your users the values, benefits, and functionalities of your internal communications platform or just say ‘Welcome’. The user sees it just once after the first registration. Customization of the welcome page is available under Settings > Welcome Page.

Requirements:

• Aspect ratio 16:9
• Image size 1920 x 1080 px or larger
• Be aware of the safe zone: Make sure the critical elements of your image are centered and within a safe zone of 8,5% for the top and bottom of the image. With an image size of 1920 x 1080 px, the safe zone of 8,5% has a height of 91,8 px.