Styling

Use the Styling section to customize the look of your Beekeeper platform so it aligns with your company’s branding. This includes updating your logo, favicon, and colors across web and mobile experiences.

How to access Styling

There are two ways for Global Admins to access the Styling section

1. From the Home screen on web, click the gear icon (⚙️) in the top right corner and select "Adjust colors"

2. From the Dashboard, click the Dashboard icon (speedometer) in the top navigation bar and go to Settings > Styling

How to customize your platform?

Logo

Upload your logo to appear in the top navigation bar across both web and mobile.

• Supported file types: .jpeg, .png
• Max size: 110KB
• Recommended height: Minimum 100px

📌 Use the preview on the right to check how your logo will look. If needed, adjust the Top navigation bar color, which serves as the background behind the logo file.

Favicon

Favicons are shown in browser tabs and bookmarks.

• File type: .ico
• Max size: 10KB
• Recommended dimensions: 16 × 16 pixels
• Use a favicon generator like favicon.cc to create the correct format from an image.

✅ A preview is available so you can check how your favicon will appear before saving.

Colors

You can adjust the platform’s color scheme to match your brand. If you don’t already have your brand’s hex codes, reach out to your marketing team.

What you can customize:

• Highlight color – used for buttons, links, icons, and other interactive elements
• Top navigation bar color – shown in the app header (also acts as the background behind your logo)
• Branding bar color – sets the color of the branding bar below the top navigation bar.
• Background color (desktop only) – recommended: #FAFAFA; doesn’t affect mobile view
• Optional: Disable gradient for navigation and branding bars (by default gradient is ON)

Suggestions & Best Practices:

• 🔁 Use the same color for the top navigation bar and branding bar for a consistent, clean look
• ✅ Use the built-in preview to see how your color selections look across desktop and mobile views
• ⚠️ Pay attention to contrast: The top navigation bar color serves as the background for your logo. Make sure the logo is clearly visible against it
• 👁️ The contrast checker will notify you if any selected colors don’t meet accessibility or visibility standards

Saving Changes

Once you’re done, click Save in the top right. Refresh your web app to see the updates applied.

Additional Notes

• Styling options are only available to Global Admins
• Use the built-in preview to test visibility and layout before finalizing
• Internet Explorer is no longer supported
• For best results, make sure all visual elements have sufficient contrast and look good on both desktop and mobile

See how the platform can look like with the recommended settings:

Mobile view + web view: Home

Mobile view + web view: Streams

Mobile view + web view: Chats