White Label Brand Assets Best Practices

White Label Lite has separate fields for a light logo, dark logo, favicon, primary colour, and accent colour. This guide helps you prepare a clear brand kit, use the files the form accepts, and test the result before customers see it.

Logo upload

There are two logo uploads: a light logo for light backgrounds and a dark logo for dark backgrounds. Upload both when you have them, then use the Branding preview to check that each stays readable in its intended theme.

File types supported:

• PNG: best for transparency. Recommended for most use cases.
• JPG / JPEG: works for solid-background logos; transparency isn't supported.
• SVG: not currently supported (we're working on safe rendering for embedded scripts).

Maximum file size: 1 MB per upload. If your file is larger, compress it via TinyPNG or pngquant. Typical logos compress to under 50 KB without visible quality loss.

Recommended source size: use a clear, reasonably high-resolution source instead of a tiny icon. A square or near-square logo is a safe starting point, but a wider wordmark can work if it remains readable in the preview.

Backgrounds:

• Transparent PNG is strongly recommended. The dashboard background and the branded email header band may not be pure white, and a hard-edged colored background on your logo will look bad.
• If your logo is monogram or icon-style, transparency lets it sit cleanly on any background.
• If your logo has a fixed colored background built in, keep it consistent with the dashboard's chosen primary or accent color.

Favicon

The favicon is its own separate upload and is not automatically derived from your logo. Use a simple square icon in PNG, JPG, or ICO format, up to 1 MB. A monogram or symbol usually works better than a full wordmark at browser-tab size.

Keep the favicon square. Use the light and dark logo fields, rather than the favicon, for your full wordmark.

Color choices

The two colour fields are:

• Primary colour: the main colour for buttons, links, and active states.
• Accent colour: a supporting colour for highlights.

Enter the values as hexadecimal colours, for example #3b82f6. Use the live preview to see the result before saving.

Picking primary

Your primary color is what visitors see most. Three things to keep in mind:

• Test on both light and dark backgrounds. The dashboard supports both themes. A color that pops on white may disappear on dark.
• Keep status colours recognisable. Avoid using a very similar colour for your main brand and for warning, success, or destructive actions. A clear blue, purple, teal, charcoal, or another distinct brand colour is usually easier to read.
• Solid medium-saturation tones beat near-white or near-black. A buttons-look-clickable test: would your color stand out on a white background as a button? If the answer is "barely," it's too pale.

Picking accent

The accent is the supporting color. It should:

• Be visibly different from primary (no two near-blue tones)
• Complement, not compete with, primary
• Read clearly when it sits next to primary

A pattern that works well: primary = a deep saturated brand color, accent = a lighter complementary tone. Example: primary #2563eb (indigo-600), accent #10b981 (emerald-500).

Contrast and accessibility

The interface can place light text over your primary colour. Choose a shade that keeps button labels readable. A very pale pastel often looks attractive in a swatch but loses contrast in a real button.

A contrast checker such as WebAIM's is useful for checking your chosen text and background combination. Use the preview as the final check because the surrounding interface also affects how a colour reads.

Colors that almost always work: deep blue, deep purple, charcoal, dark teal, deep maroon. Colors that often fail: light pastels, mid-gray, mid-yellow, neon.

Display name

The display name is shown on branded dashboard, webmail, and supported email surfaces. Three naming patterns that work:

• "YourBrand Email": explicit "this is the email service." Clear, professional. Good for resellers selling email as a service.
• "YourBrand": just the brand name. Cleaner. Good if email is part of a broader product suite.
• "YourBrand Dashboard": emphasizes the surface. Useful if you have multiple branded products and want each to be distinctly labeled.

Keep it short enough to recognise at a glance. Check the preview on a narrow screen and in both themes instead of relying on a character-count rule.

The display name appears in:

• Dashboard and webmail navigation
• Branded sign-in and browser titles
• Supported transactional email surfaces

Before you save

Before clicking Save changes, check that your files are under 1 MB, the light and dark logos are readable in their matching preview, the favicon is a simple square icon, the primary colour has readable contrast, and the display name is natural as a sender name.

After saving, open the active branded host in a private browser window. This avoids mistaking a cached image or favicon for the current version.

A simple asset-preparation workflow

1. Start from the original logo files, not a screenshot or a file copied from a website.
2. Export one version that reads on light backgrounds and one that reads on dark backgrounds.
3. Create a separate square favicon from the most recognisable part of the mark.
4. Add the brand name and colours in Branding, then compare the email and webmail previews.
5. Save, test the active host on a phone and a desktop browser, and keep the source files somewhere your team can update later.

Updating later

You can update brand assets later without replacing the DNS record for an existing branded host. Always recheck the active host after a visual change.

If you upload the wrong asset or choose an unreadable colour, correct it in Branding and save again. Allow for normal browser caching when you verify the replacement.

Automate with the API & MCP

If your integration has the required permissions, the REST API or MCP can manage brand settings and assets. The same file types and 1 MB limit apply. Use the dashboard and preview for the final visual check.

See the White Label Branding API and MCP Guide for the supported operations.

Common scenarios

"My logo looks fine in the sidebar but blurry on my phone." Upload a clearer, higher-resolution source, save it, and test the active branded host on the phone. Do not rely only on a desktop browser preview.

"My primary colour works on the dashboard but button text is hard to read." Choose a darker or more saturated shade, then check it in the preview and on the active host.

"My logo has a coloured background that does not match the dashboard." Export a transparent PNG version when your logo allows it. Compare the light and dark versions against their intended backgrounds.

"Can I have a different logo on email versus the dashboard?" Use the light and dark logo variants provided by Branding. Test the supported email preview and your active customer surfaces before you make an appearance promise.

"What about dark mode?" The dashboard supports both light and dark themes, and you upload a separate logo for each. The light logo renders on light backgrounds, the dark logo on dark backgrounds, so you can use a dark-ink logo on light and a white/light logo on dark, and both read cleanly.

"Can I upload a favicon separately from the logo?" Yes. The favicon is its own dedicated upload (PNG, JPG, or ICO, max 1 MB) and isn't derived from your logo. Upload a distinct, simple icon for the browser tab.

What's next

• Set up White Label Lite: activation and DNS setup.
• What stays TrekMail-branded: what your customers might still see TrekMail underneath.
• White Label Lite pricing FAQ: billing and currency questions.
• White Label Branding API and MCP Guide: upload logos and set the brand over REST or MCP.