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:
Locate the Primary Colour field
Enter a hex colour code (e.g.,
#8069e9)Or click the colour picker to choose visually
Preview appears immediately
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:
Locate the Background Colour field
Enter a hex colour code (e.g.,
#ffffff)Or click the colour picker to choose
Preview appears immediately
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
Locate the Navbar Logo section
Choose one of the four radio button options
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
Locate the Background Image section
Click Upload button
Select an image file (PNG or JPG)
Wait for upload to complete
Image saves automatically
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
Locate your current background image
Click the Delete button (X icon)
Confirm deletion
Background returns to solid color
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
Locate the Favicon section
Click Upload button
Select an image file
Wait for upload to complete
Favicon saves automatically
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
Locate your current favicon
Click the Delete button (X icon)
Confirm deletion
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:
Make your changes
Click the Save button at the bottom
Success notification appears
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:
Open your custom domain in a new browser tab
Verify colours appear correctly
Check logo displays properly
Confirm background image looks good
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:
Scroll to Primary Logo section
Click the logo area
Select your logo file
Upload completes automatically
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:
Scroll to Primary Logo White section
Click the logo area (shown on dark background)
Select your white logo file
Upload completes automatically
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:
Scroll to Square Logo section
Click the logo area
Select your square logo file
Upload completes automatically
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:
Scroll to Square Logo White section
Click the logo area (shown on dark background)
Select your white square logo file
Upload completes automatically
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:
Hover over the logo you want to replace
Click the logo area
Select a new file
New logo uploads and replaces the old one
Changes apply immediately
Note: Replacing a logo is permanent - the old logo is removed.
Deleting Logos
To delete a logo:
Hover over the logo
Click the Delete button (trash icon)
Confirm deletion in the modal
Logo is removed
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
Scroll to Brand Guidelines section
Click Upload or the document area
Select your PDF file
Upload completes automatically
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:
Upload a new version
Old version is automatically replaced
Changes apply immediately
To delete:
Click Delete button
Confirm deletion
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:
Set up custom domain first (required for portal branding)
Upload all four logo variations:
Primary Logo (horizontal, colour)
Primary Logo White (horizontal, white)
Square Logo (icon, colour)
Square Logo White (icon, white)
Configure portal branding:
Set primary colour to match brand
Set background colour (usually white)
Choose navbar logo (usually Primary Logo)
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:
Prepare new assets (all logo variations)
Replace Primary Logo with new version
Replace Primary Logo White with new version
Replace both Square Logos with new versions
Update portal colours if brand colours changed
Update favicon with new brand icon
Replace background image if using one
Upload new brand guidelines document
Result: All brand assets updated consistently
Scenario 3: Dark Theme Portal
Goal: Create a dark-themed partner portal
Steps:
Ensure custom domain is active
Set background colour to dark (e.g.,
#1a1a1a)Choose navbar logo: Logo White or Square Logo White
Adjust primary colour for visibility on dark (lighter shade)
Skip background image or use dark/subtle image
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:
Set up custom domain
Upload just two logos:
Primary Logo (horizontal)
Square Logo (for favicon)
Set primary colour to brand colour
Leave background colour as white
Choose navbar logo: Primary Logo
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:
Create one in design software (recommended)
Use a design service (Fiverr, 99designs)
Ask your brand team/agency
Use only primary logos and light backgrounds
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:
Check this guide for solutions
Verify custom domain is set up correctly
Test file formats (PNG recommended)
Clear browser cache if changes don't appear
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!