Host Branding

Establish your host's visual identity by uploading logos, setting brand colors, and customizing the appearance of your public pages.

What is Branding?

Branding includes all visual elements that represent your host:

• Logo: Your organization's logo image
• Colors: Primary and secondary brand colors
• Theme: Overall visual style and appearance
• Typography: Font choices and text styling

Logo Upload

Uploading Your Logo

1. Navigate to Host Settings
2. Go to the "Logo" section
3. Click "Upload Logo" or "Choose File"
4. Select your logo image file
5. Preview the logo
6. Click "Save" to apply

Logo Best Practices

File Format:

• PNG (recommended): Best for logos with transparency
• SVG (recommended): Scalable vector graphics, perfect for logos
• JPG: Use only if PNG/SVG not available

Size and Dimensions:

• Minimum: 256x256 pixels
• Recommended: 512x512 pixels or larger
• Aspect Ratio: Square (1:1) works best
• File Size: Keep under 2MB for fast loading

Design Tips:

• Use transparent backgrounds when possible
• Ensure logo is readable at small sizes
• Test logo on both light and dark backgrounds
• Keep design simple and recognizable

Logo Display Locations

Your logo appears in:

• Navigation Bar: Top of all pages
• Landing Page Hero: Large display in hero section
• Tournament Cards: Small logo on tournament listings
• Team Pages: Host logo on team pages
• Email Notifications: Logo in email headers (if configured)

Brand Colors

Primary Color

Your main brand color used for:

• Buttons and interactive elements
• Links and highlights
• Accent elements
• Call-to-action buttons

Secondary Color

A complementary color used for:

• Secondary buttons
• Hover states
• Supporting elements
• Background accents

Setting Brand Colors

1. Navigate to Host Settings
2. Go to "Theme Customization" section
3. Use the color picker to select your primary color
4. Use the color picker to select your secondary color
5. Preview changes in real-time
6. Click "Save" to apply

Color Selection Tips

• Contrast: Ensure text is readable on your color choices
• Accessibility: Use colors that meet WCAG contrast guidelines
• Consistency: Match your existing brand colors if you have them
• Testing: Preview colors on both light and dark backgrounds

Visual Identity Guidelines

Consistency

Maintain consistency across:

• Logo usage (size, placement, spacing)
• Color palette (stick to your brand colors)
• Typography (if custom fonts are added)
• Overall style and tone

Brand Guidelines

Consider creating brand guidelines that specify:

• Logo usage rules (minimum size, clear space)
• Color palette (primary, secondary, accent colors)
• Typography choices
• Image style and tone
• Do's and don'ts

Theme Customization

Beyond basic branding, you can customize:

• Card Backgrounds: Background color for content cards
• Section Backgrounds: Background color for page sections
• Hero Style: Full-width or contained hero banners
• Card Layout: Number of columns for content cards

See Theme Customization for detailed information.

Updating Branding

When to Update

Consider updating your branding when:

• Rebranding your organization
• Launching a new season or event
• Improving logo quality
• Refreshing visual identity

How to Update

1. Navigate to Host Settings
2. Update logo, colors, or other branding elements
3. Preview changes
4. Save updates
5. Changes apply immediately to public pages

Branding Checklist

• Logo uploaded and displaying correctly
• Primary color set and tested
• Secondary color set and tested
• Logo appears correctly on all pages
• Colors meet accessibility standards
• Social media links added (if applicable)
• Tagline and description updated
• Public pages reviewed for consistency

Related Articles

• Host Settings
• Theme Customization
• Per-Page Customization
• Public Pages