White Label Brand Assets Best Practices

White Label Lite gives you separate slots for brand identity: a light logo, a dark logo, a favicon, a primary color, and an accent color. This article covers what to upload, what sizes and aspect ratios work, and color choices that don't break the UI.

Logo upload

There are two separate logo uploads — a light logo for light backgrounds and a dark logo for dark backgrounds (dark mode, dark email headers). Upload both so your brand reads cleanly in either theme. They appear in:

• The dashboard sidebar (rendered at roughly height: 32px)
• The login screen (larger render, roughly height: 64px)
• The header band of branded transactional emails (height: 40px)

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: square or near-square aspect ratio, 400×400 pixels or larger. The dashboard scales down to 32px height, but a larger source gives sharper rendering on retina screens (2× and 3× DPI). Don't upload a 32×32 logo — it will look fine in your laptop preview and blurry on every iPhone.

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 — it isn't derived from your logo. Use a square, simple icon-style image (PNG, JPG, or ICO, max 1 MB) so it reads at the tiny size browsers render it. A monogram or symbol usually works better than a full wordmark, which becomes illegible in a 16–32px tab icon.

Aspect ratio guidance:

• Square (1:1) — easiest. Renders fine in the sidebar, looks balanced in emails.
• Wide rectangle (3:1 or 4:1) — works for full wordmarks. Renders cleanly at all sizes. The sidebar centers it; the email header band has wider headroom.
• Tall (vertical) — avoid. The sidebar will crop or squish it.

Color choices

The two color slots are:

• Primary color — main accent. Used on primary buttons (the "Save", "Activate", "Submit" CTAs), focus highlights, link colors.
• Accent color — secondary highlights. Used on hover states, success indicators, the branded email header border.

Both are entered as hex codes (#3b82f6 style). Six-digit form is supported.

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.
• Don't pick a color that conflicts with semantic UI cues. Avoid red (we use it for errors and destructive actions) and avoid green (we use it for success and active states). Indigo, teal, deep blue, charcoal, plum — all fine.
• 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 dashboard renders white text on top of your primary color for buttons. Your primary needs to be dark enough that white text is readable. A common mistake: picking a soft pastel as primary, then having illegible white labels on every CTA.

Quick check: paste your hex into WebAIM's contrast checker. Aim for WCAG AA (4.5:1) at minimum on body text and AA Large (3:1) on large CTA text. AAA (7:1) is ideal but rarely worth the constraint.

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 what your customers see in the sidebar, login screen, page titles, and email signatures. 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. The sidebar truncates at roughly 24 characters. The page title shows the full string. Tab titles abbreviate after about 18 characters depending on the browser.

The display name appears in:

• Dashboard sidebar
• Login screen heading
• Page titles in the browser tab
• The "From" name on outgoing transactional emails (so a customer's password reset email comes from "YourBrand", not "TrekMail")
• The signature block at the bottom of branded emails

Before you save

A quick mental check before clicking Save changes: both logos are transparent PNGs at 400×400 or larger, under 1 MB (the light logo reads on light backgrounds, the dark logo on dark); the favicon is a simple square icon; primary is dark enough that white text reads cleanly on it; accent is visibly different from primary; brand name fits in 24 characters and reads naturally as a sender name.

After save, the changes apply within a few seconds. Open your branded domain in an incognito window to see the customer-facing view.

Updating later

You can edit any of these at any time without affecting your custom-domain setup. Brand identity and domain are independent: change your logo at 3 AM and your domain keeps serving.

There's no review or approval — saved changes go live immediately. If you mess up a color or upload the wrong logo, just edit and save again.

Automate with the API & MCP

You don't have to upload assets through the dashboard. The brand name, colors, and all three logo slots (light, dark, favicon) can be set through the TrekMail REST API or MCP, so an AI agent or your own script can apply a brand kit programmatically. Logos are sent as base64 (PNG or JPG, ICO also allowed for the favicon, 1 MB max, no SVG) — the same file-type and size rules described above apply. The same per-domain branding the dashboard writes is exposed over the API; it's just another way in.

See the White Label Branding API and MCP Guide for the logo-upload endpoint, the MCP set_domain_brand_logo tool, and a worked example.

Common scenarios

"My logo looks fine in the sidebar but blurry on my phone." Upload a higher-resolution source. The sidebar renders at 32px height, but retina screens render at 2× or 3× — so your source needs to be at least 64-96px on the rendered axis. We recommend 400px minimum for forward-compatibility.

"My primary color works on the dashboard but the button text is hard to read." Your primary is too light. Move it to a darker shade. White text needs WCAG AA contrast (4.5:1) to be readable.

"My logo has a colored background that doesn't match the dashboard." Export a transparent PNG version of your logo. Most design tools (Figma, Sketch, Adobe Illustrator) have "Export as PNG with transparent background" as a one-click option.

"Can I have a different logo on email versus the dashboard?" The same light/dark logos are used across the dashboard, login screen, and email headers. What you can vary is the light-vs-dark version: dark surfaces (dark mode, dark email headers) use your dark logo, light surfaces use your light logo.

"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) — it 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.