Branding

Branding

Upload and manage your company's visual assets and customise your partner portal appearance.

What is Branding?

The Branding page is where you upload your company's logos, brand guidelines, and customise the appearance of your partner portal. Proper branding ensures a consistent, professional experience across all partner touch-points.

Access: Settings → Branding (Admin and Partnership users only)

Overview

What You Can Customise

Brand Assets:

• Company logos (4 variations)

• Brand guidelines document

Portal Branding (requires custom domain):

• Portal colours (primary and background)

• Navbar logo selection

• Background image

• Favicon

Important: Portal branding features are only available when you have a custom domain configured.

Portal Branding

Customise the appearance of your partner portal with your brand colours and imagery.

Requirements

⚠️ Custom Domain Required

Portal branding features require an active custom domain. Without a custom domain:

• Colour customisation is disabled

• Background image upload is disabled

• Favicon upload is disabled

• Navbar logo selection is disabled

Why? These features white-label your partner portal, which only makes sense on your own domain.

To set up a custom domain: See our Custom Domains guide

Portal Colours

Customise the colour scheme of your partner portal to match your brand.

Primary Colour

The primary colour appears in:

• Buttons and calls-to-action

• Links and interactive elements

• Highlights and accents

• Active navigation items

To set your primary colour:

1. Locate the Primary Colour field

2. Enter a hex colour code (e.g., #8069e9)

3. Or click the colour picker to choose visually

4. Preview appears immediately

5. Click Save to apply changes

Default: #8069e9 (Journeybee purple)

Tips:

• Use your main brand colour

• Ensure good contrast with white text

• Test readability on buttons

• Stay consistent with your brand guidelines

Background Colour

The background colour sets the overall page background.

To set your background colour:

1. Locate the Background Colour field

2. Enter a hex colour code (e.g., #ffffff)

3. Or click the colour picker to choose

4. Preview appears immediately

5. Click Save to apply changes

Default: #ffffff (white)

Tips:

• White or light colours work best

• Consider readability with text

• Test with your background image if using one

• Subtle colours are more professional

Navbar Logo

Choose which logo variation appears in your partner portal navigation bar.

Logo Options

Logo (Primary)

• Your standard horizontal logo

• Best for: Light backgrounds, default appearance

• Displays in full color

Logo White

• White version of your horizontal logo

• Best for: Dark backgrounds, colored headers

• Requires transparent PNG with white logo

Square Logo

• Square/icon version of your logo

• Best for: Compact navigation, mobile displays

• Displays in full color

Square Logo White

• White version of your square logo

• Best for: Dark backgrounds with limited space

• Requires transparent PNG with white icon

How to Select

1. Locate the Navbar Logo section

2. Choose one of the four radio button options

3. Click Save to apply your selection

Tips:

• Match logo colour to your header background

• Use white logos if your primary colour is dark

• Square logos work better on mobile

• Test on different screen sizes

Example scenarios:

• Dark purple header → Use Logo White

• Light background → Use Logo (Primary)

• Minimal design → Use Square Logo

• Dark header + mobile → Use Square Logo White

Background Image

Add a custom background image to your partner portal for enhanced branding.

What It Does

The background image appears:

• Behind the main content area

• Across the entire portal

• As a subtle branding element

Best used for:

• Subtle patterns or textures

• Light, faded brand imagery

• Gradient overlays

• Professional photography

How to Add

1. Locate the Background Image section

2. Click Upload button

3. Select an image file (PNG or JPG)

4. Wait for upload to complete

5. Image saves automatically

6. Preview appears immediately

Supported formats:

• PNG (recommended for transparency)

• JPG (best for photographs)

Recommended specs:

• Resolution: 1920x1080 or higher

• File size: Under 2 MB

• Aspect ratio: 16:9 or wider

• Style: Subtle, not distracting

How to Remove

1. Locate your current background image

2. Click the Delete button (X icon)

3. Confirm deletion

4. Background returns to solid color

5. Change saves automatically

Tips:

• Use subtle, low-opacity images

• Ensure text remains readable

• Test on different screen sizes

• Lighter images work better

• Consider mobile appearance

What NOT to use:

• ❌ Busy, distracting patterns

• ❌ High-contrast images

• ❌ Text-heavy graphics

• ❌ Very dark images (reduces readability)

Favicon

Set a custom favicon (website icon) for your partner portal.

What is a Favicon?

A favicon is the small icon that appears:

• In browser tabs

• In bookmarks

• In browser history

• In mobile home screen shortcuts

Why it matters:

• Professional appearance

• Brand recognition

• Easy tab identification

• Bookmarking clarity

How to Add

1. Locate the Favicon section

2. Click Upload button

3. Select an image file

4. Wait for upload to complete

5. Favicon saves automatically

6. Preview appears (actual size: 16x16 pixels)

Supported formats:

• PNG (recommended)

• JPG

• ICO (ideal but PNG works)

Recommended specs:

• Size: 32x32 pixels (minimum 16x16)

• File format: PNG with transparency

• Style: Simple, recognisable at small size

• Content: Logo icon or brand mark

Best practices:

• Use your square logo or brand icon

• Keep it simple (details lost at small size)

• High contrast works best

• Test at actual size (very small!)

• Square aspect ratio

How to Remove

1. Locate your current favicon

2. Click the Delete button (X icon)

3. Confirm deletion

4. Favicon reverts to default Journeybee icon

Tips:

• Upload the same image you use as your Square Logo

• Ensure it's recognisable when tiny

• Use solid colours (gradients may not show well)

• Test in an actual browser tab

Saving Your Changes

For colours and navbar logo:

1. Make your changes

2. Click the Save button at the bottom

3. Success notification appears

4. Changes apply immediately to your portal

For images (background, favicon):

• Changes save automatically on upload

• No additional save button needed

• Delete actions are immediate

Testing your changes:

1. Open your custom domain in a new browser tab

2. Verify colours appear correctly

3. Check logo displays properly

4. Confirm background image looks good

5. Look for favicon in browser tab

Brand Assets

Upload and manage your company logos in various formats.

Logo Variations

Journeybee supports four logo variations to ensure your brand looks great everywhere.

Primary Logo

Your main, full-color horizontal logo.

Used for:

• Email signatures

• Documents and reports

• Partner-facing materials

• General branding

Best format:

• Horizontal/landscape orientation

• Full brand colours

• High resolution

• Transparent background (PNG)

To upload:

1. Scroll to Primary Logo section

2. Click the logo area

3. Select your logo file

4. Upload completes automatically

5. Preview appears immediately

Primary Logo White

White version of your horizontal logo for dark backgrounds.

Used for:

• Dark backgrounds

• Coloured headers

• Video overlays

• Printed materials on dark paper

Best format:

• Same dimensions as Primary Logo

• White or light-coloured logo

• Transparent background (PNG required)

• High resolution

To upload:

1. Scroll to Primary Logo White section

2. Click the logo area (shown on dark background)

3. Select your white logo file

4. Upload completes automatically

5. Preview appears on dark background

Square Logo

Square or icon version of your logo.

Used for:

• Profile pictures

• Social media avatars

• Mobile app icons

• Compact spaces

Best format:

• Square aspect ratio (1:1)

• Recognisable at small sizes

• Full brand colours

• Transparent background (PNG)

To upload:

1. Scroll to Square Logo section

2. Click the logo area

3. Select your square logo file

4. Upload completes automatically

5. Preview appears immediately

Square Logo White

White version of your square logo for dark backgrounds.

Used for:

• Dark mode interfaces

• Coloured circular avatars

• Video thumbnails

• Compact dark spaces

Best format:

• Square aspect ratio (1:1)

• White or light-coloured version

• Transparent background (PNG required)

• Recognisable at small sizes

To upload:

1. Scroll to Square Logo White section

2. Click the logo area (shown on dark background)

3. Select your white square logo file

4. Upload completes automatically

5. Preview appears on dark background

Managing Logos

Viewing Logos

• All uploaded logos display in their respective sections

• Square logos show at actual preview size

• Horizontal logos scale to fit preview area

• White logos display on dark backgrounds for visibility

Replacing Logos

To replace an existing logo:

1. Hover over the logo you want to replace

2. Click the logo area

3. Select a new file

4. New logo uploads and replaces the old one

5. Changes apply immediately

Note: Replacing a logo is permanent - the old logo is removed.

Deleting Logos

To delete a logo:

1. Hover over the logo

2. Click the Delete button (trash icon)

3. Confirm deletion in the modal

4. Logo is removed

5. Changes apply immediately

When to delete:

• Replacing with completely new branding

• Removing temporary/incorrect uploads

• Cleaning up unused variations

File Requirements

Supported formats:

• PNG (recommended - supports transparency)

• JPG (solid backgrounds only)

• SVG (vector format - scales perfectly)

File size:

• Maximum 10 MB per file

• Smaller is better for performance

• Optimise images before uploading

Image quality:

• High resolution (300 DPI for print)

• At least 1000px width for horizontal logos

• At least 512x512px for square logos

• Transparent background (PNG) strongly recommended

Best practices:

• Use PNG for all logos with transparency

• SVG is ideal if available

• Avoid JPG for logos (creates artifacts)

• Optimise file sizes with tools like TinyPNG

• Keep originals as backup

Brand Guidelines

Upload your company's brand guidelines document for easy access.

What are Brand Guidelines?

A brand guidelines document typically includes:

• Logo usage rules

• Colour palettes

• Typography standards

• Tone and voice guidelines

• Do's and don'ts

• Example applications

How to Upload

1. Scroll to Brand Guidelines section

2. Click Upload or the document area

3. Select your PDF file

4. Upload completes automatically

5. Document becomes accessible

Supported format:

• PDF (recommended)

• Maximum 10 MB

Accessing Guidelines

Once uploaded, team members can:

• View the guidelines document

• Download a copy

• Reference during partnership work

• Share with partners if needed

Managing Guidelines

To replace:

1. Upload a new version

2. Old version is automatically replaced

3. Changes apply immediately

To delete:

1. Click Delete button

2. Confirm deletion

3. Document is removed

Best Practices

Logo Guidelines

✅ Use appropriate variations

• Primary Logo: Light backgrounds, general use

• Logo White: Dark backgrounds, coloured surfaces

• Square Logo: Small spaces, avatars, mobile

• Square Logo White: Dark backgrounds + compact spaces

✅ Maintain quality

• Upload highest resolution available

• Use PNG for transparency

• Use SVG for perfect scaling

• Optimise file sizes

✅ Test visibility

• Check logos on various backgrounds

• Ensure white logos are truly visible on dark

• Verify square logos are recognisable when small

• Test on mobile devices

Portal Branding

✅ Choose colours carefully

• Match your brand guidelines

• Ensure accessibility (contrast ratios)

• Test on different screens

• Consider colour blindness

✅ Background images

• Keep subtle and professional

• Ensure text readability

• Test on mobile devices

• Use optimised file sizes

✅ Favicon

• Simple and recognisable

• Test at actual size (tiny!)

• Use high contrast

• Match your brand

Organisation

✅ Keep assets updated

• Replace outdated logos promptly

• Update brand guidelines regularly

• Test portal after changes

• Document branding decisions

✅ Consistency

• Use the same logos everywhere

• Follow your brand guidelines

• Apply colours consistently

• Maintain professional appearance

Common Scenarios

Scenario 1: Initial Branding Setup

Goal: Set up all branding for a new partnership program

Steps:

1. Set up custom domain first (required for portal branding)

2. Upload all four logo variations:

• Primary Logo (horizontal, colour)

• Primary Logo White (horizontal, white)

• Square Logo (icon, colour)

• Square Logo White (icon, white)

1. Configure portal branding:

• Set primary colour to match brand

• Set background colour (usually white)

• Choose navbar logo (usually Primary Logo)

1. Optional enhancements:

• Upload subtle background image

• Upload favicon (use Square Logo)

• Upload brand guidelines PDF

Result: Fully branded partner portal ready for partners

Scenario 2: Rebranding Update

Goal: Update all assets after company rebrand

Steps:

1. Prepare new assets (all logo variations)

2. Replace Primary Logo with new version

3. Replace Primary Logo White with new version

4. Replace both Square Logos with new versions

5. Update portal colours if brand colours changed

6. Update favicon with new brand icon

7. Replace background image if using one

8. Upload new brand guidelines document

Result: All brand assets updated consistently

Scenario 3: Dark Theme Portal

Goal: Create a dark-themed partner portal

Steps:

1. Ensure custom domain is active

2. Set background colour to dark (e.g., #1a1a1a)

3. Choose navbar logo: Logo White or Square Logo White

4. Adjust primary colour for visibility on dark (lighter shade)

5. Skip background image or use dark/subtle image

6. Upload favicon that works on both light/dark

Result: Professional dark-themed portal

Scenario 4: Minimal Professional Setup

Goal: Quick, professional setup with minimum effort

Steps:

1. Set up custom domain

2. Upload just two logos:

• Primary Logo (horizontal)

• Square Logo (for favicon)

1. Set primary colour to brand colour

2. Leave background colour as white

3. Choose navbar logo: Primary Logo

4. Upload Square Logo as favicon

Result: Clean, professional appearance with minimal setup

Troubleshooting

Portal Branding Options Are Disabled

Issue: Cannot edit colours, upload favicon, or change navbar logo

Solution:

• Verify you have a custom domain set up

• Go to Settings → Partnership Settings

• Check Custom Domain section

• Follow Custom Domain guide to set up

• Return to Branding page after domain is verified

Logo Appears Blurry

Solutions:

• Upload higher resolution image

• Use PNG or SVG instead of JPG

• Ensure image is at least 1000px wide (horizontal) or 512px (square)

• Avoid enlarging small logos

White Logo Not Visible

Solutions:

• Ensure PNG has transparent background

• Verify logo is actually white (not light grey)

• Check file isn't corrupted

• Re-export from design software

• Try on dark preview background

Background Image Too Distracting

Solutions:

• Reduce image opacity in image editor

• Use lighter, more subtle image

• Apply blur effect to image

• Choose simpler pattern

• Consider removing image altogether

Favicon Not Updating

Solutions:

• Clear browser cache (Ctrl+Shift+Delete)

• Hard refresh the page (Ctrl+Shift+R)

• Wait a few minutes for CDN propagation

• Try different browser

• Check file was actually uploaded (look for preview)

Changes Not Appearing on Portal

Solutions:

• Ensure you clicked Save button (for colours/navbar logo)

• Clear browser cache

• Open portal in incognito/private window

• Verify custom domain is active

• Check you're viewing the correct custom domain URL

Upload Failing

Solutions:

• Check file size (under 10 MB)

• Verify file format (PNG, JPG, SVG for logos; PDF for guidelines)

• Try different image

• Check internet connection

• Try different browser

Frequently Asked Questions

Do I need all four logo variations?

Not required, but highly recommended:

• Minimum: Primary Logo + Square Logo (for favicon)

• Recommended: All four variations for professional appearance

• Best: All four variations + brand guidelines

Without all variations, some features may use fallback logos.

Can I use the same logo for all variations?

You can, but it's not ideal:

• Square logos should be icon/compact versions

• White logos should be truly white for dark backgrounds

• Using one logo everywhere reduces flexibility

• Professional brands have multiple variations

What if I don't have a white version of my logo?

Options:

1. Create one in design software (recommended)

2. Use a design service (Fiverr, 99designs)

3. Ask your brand team/agency

4. Use only primary logos and light backgrounds

5. Skip navbar logo white option

Does the favicon need to be the same as my Square Logo?

Not required, but recommended:

• Square Logo makes a great favicon

• Keeps branding consistent

• Already optimised for small display

• You can use any icon you prefer

Can partners see my brand guidelines document?

Only if you share it:

• Brand guidelines are primarily for your team

• You control who sees them

• Can share with partners via resources if needed

• Not automatically visible in partner portal

How often should I update branding assets?

Update when:

• ✅ Company rebrand occurs

• ✅ Logo design changes

• ✅ Brand colours shift

• ✅ Creating seasonal variations

• ❌ Don't update too frequently (causes confusion)

Can I have different branding for different partner types?

Currently no:

• Branding applies globally to all partners

• All partners see the same portal branding

• Logo usage is consistent across partnership types

• Custom per-partner branding is not supported

What happens if I delete a logo that's being used?

• Navbar will fall back to default/another logo

• Partners may see missing image placeholder temporarily

• Upload a new logo quickly to avoid issues

• System tries to use alternative logo variations

Can I preview changes before they go live?

Partially:

• Colours show preview in settings

• Navbar logo selection shows preview

• Background image shows thumbnail

• For full preview: Save and view your custom domain

• Changes apply immediately (no staging environment)

Do logo changes affect old emails or documents?

No:

• Past emails/documents retain old logos

• Only new materials use updated logos

• Historical data is preserved

• Logo links may break if assets deleted

Need Help?

If you encounter issues with branding:

1. Check this guide for solutions

2. Verify custom domain is set up correctly

3. Test file formats (PNG recommended)

4. Clear browser cache if changes don't appear

5. Contact support with:

• Screenshot of issue

• What you're trying to upload

• Error messages you're seeing

• Browser and operating system

Remember: Portal branding requires an active custom domain!