White Label brand assets best practices

White Label Lite gives you three slots for brand identity: a logo, 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

The logo appears in:

• The dashboard sidebar (rendered at roughly height: 32px)
• The browser tab favicon (32×32 derivative auto-generated)
• 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. 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.

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: the logo is a transparent PNG at 400×400 or larger, under 1 MB; primary is dark enough that white text reads cleanly on it; accent is visibly different from primary; display 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.

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?" Not currently. The same uploaded logo is used everywhere.

"What about dark mode?" The dashboard supports both light and dark themes. Your logo renders unchanged on both — make sure the transparent version reads well on a dark background as well as light. White logos on transparent often work for both. Black logos on transparent often fail on dark backgrounds.

"Can I upload a favicon separately from the logo?" Not currently. The favicon is derived from your uploaded logo (32×32 scaled). If you want a distinct favicon, that's not supported in Lite.

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.