Buone pratiche per le risorse del marchio White Label

White Label Lite offre campi separati per logo chiaro, logo scuro, favicon, colore primario e colore di accento. Questa guida ti aiuta a preparare un kit del marchio chiaro, usare i file accettati dal modulo e provare il risultato prima che lo vedano i clienti.

Caricare i loghi

Puoi caricare due loghi: un logo chiaro per gli sfondi chiari e un logo scuro per gli sfondi scuri. Caricali entrambi quando disponibili, quindi usa l'anteprima Branding per verificare che ciascuno resti leggibile nel tema previsto.

Tipi di file supportati:

• PNG: ideale per la trasparenza e consigliato nella maggior parte dei casi.
• JPG / JPEG: adatto ai loghi con sfondo pieno; non supporta la trasparenza.
• SVG: non è attualmente supportato, perché stiamo lavorando alla rappresentazione sicura degli script incorporati.

Dimensione massima: 1 MB per caricamento. Se il file è più grande, comprimilo con TinyPNG o pngquant. In genere i loghi scendono sotto 50 KB senza perdita visibile di qualità.

Dimensione sorgente consigliata: usa un originale nitido con risoluzione ragionevolmente alta, non un'icona minuscola. Un logo quadrato o quasi quadrato è un punto di partenza sicuro; anche un logotipo più largo va bene se resta leggibile nell'anteprima.

Sfondi:

• Si consiglia vivamente un PNG trasparente. Lo sfondo del pannello e la fascia d'intestazione delle email del marchio potrebbero non essere bianchi puri, e un fondo colorato con bordi netti sul logo apparirebbe fuori posto.
• Per un monogramma o un'icona, la trasparenza assicura un risultato pulito su qualsiasi sfondo.
• Se il logo include uno sfondo colorato fisso, mantienilo coerente con il colore primario o di accento scelto per il pannello.

Favicon

La favicon ha un caricamento separato e non viene ricavata automaticamente dal logo. Usa un'icona quadrata semplice in formato PNG, JPG o ICO, fino a 1 MB. Un monogramma o simbolo funziona di solito meglio di un logotipo completo alle dimensioni della scheda del browser.

Mantieni quadrata la favicon. Per il logotipo completo usa i campi del logo chiaro e scuro, non la favicon.

Scegliere i colori

I due campi colore sono:

• Colore primario: il colore principale di pulsanti, link e stati attivi.
• Colore di accento: un colore di supporto per gli elementi evidenziati.

Inserisci valori esadecimali, ad esempio #3b82f6. Usa l'anteprima live per vedere il risultato prima di salvare.

Scegliere il colore primario

Il colore primario è quello che i visitatori vedono di più. Considera tre aspetti:

• Provalo su sfondi chiari e scuri. Il pannello supporta entrambi i temi. Un colore che spicca sul bianco può scomparire sullo scuro.
• Mantieni riconoscibili i colori di stato. Evita un colore principale troppo simile a quelli di avviso, successo o azioni distruttive. Blu, viola, verde acqua, antracite o un altro colore distintivo è spesso più leggibile.
• I toni pieni mediamente saturi sono migliori di quelli quasi bianchi o neri. Chiediti se il colore risalterebbe come pulsante su uno sfondo bianco. Se la risposta è «appena», è troppo pallido.

Scegliere il colore di accento

Il colore di accento sostiene quello primario. Deve:

• Essere visibilmente diverso dal primario, senza due tonalità quasi blu
• Completare il primario senza competere con esso
• Risultare chiaro accanto al primario

Una combinazione efficace usa come primario un colore del marchio profondo e saturo e come accento un tono complementare più chiaro. Esempio: primario #2563eb (indigo-600), accento #10b981 (emerald-500).

Contrasto e accessibilità

L'interfaccia può sovrapporre testo chiaro al colore primario. Scegli una tonalità che mantenga leggibili le etichette dei pulsanti. Un pastello molto chiaro può essere gradevole nel campione, ma perdere contrasto in un vero pulsante.

Uno strumento come il controllo del contrasto WebAIM aiuta a verificare la combinazione di testo e sfondo. Usa l'anteprima come controllo finale, perché anche l'interfaccia circostante influenza la percezione del colore.

Colori quasi sempre efficaci: blu intenso, viola intenso, antracite, verde acqua scuro e bordeaux intenso. Colori spesso problematici: pastelli chiari, grigio medio, giallo medio e neon.

Nome visualizzato

Il nome visualizzato appare nel pannello e nella webmail del marchio, oltre che nelle superfici email supportate. Tre modelli efficaci:

• «Email TuoMarchio»: dichiara chiaramente che si tratta del servizio email. Professionale, adatto ai rivenditori.
• «TuoMarchio»: solo il nome del marchio. Più pulito, ideale se l'email fa parte di una suite più ampia.
• «Pannello TuoMarchio»: mette in risalto la superficie. Utile per distinguere più prodotti del marchio.

Tienilo abbastanza breve da riconoscerlo subito. Controlla l'anteprima su uno schermo stretto e in entrambi i temi invece di affidarti a un limite di caratteri.

Il nome visualizzato appare in:

• Navigazione del pannello e della webmail
• Accesso con marchio e titoli del browser
• Superfici email transazionali supportate

Prima di salvare

Prima di fare clic su Save changes, verifica che i file siano inferiori a 1 MB, che entrambi i loghi siano leggibili nelle rispettive anteprime, che la favicon sia un'icona quadrata semplice, che il colore primario abbia un contrasto leggibile e che il nome visualizzato risulti naturale come nome del mittente.

Dopo aver salvato, apri l'host attivo del marchio in una finestra privata. Eviterai di confondere un'immagine o una favicon memorizzata nella cache con la versione attuale.

Procedura semplice per preparare le risorse

1. Parti dai file originali del logo, non da uno screenshot o un file copiato da un sito.
2. Esporta una versione leggibile su sfondi chiari e una su sfondi scuri.
3. Crea una favicon quadrata separata dalla parte più riconoscibile del marchio.
4. Aggiungi nome e colori in Branding, quindi confronta le anteprime di email e webmail.
5. Salva, prova l'host attivo su telefono e browser desktop e conserva gli originali dove il team potrà aggiornarli.

Aggiornare in seguito

Puoi aggiornare le risorse in seguito senza sostituire il record DNS di un host del marchio esistente. Ricontrolla sempre l'host attivo dopo una modifica visiva.

Se carichi la risorsa sbagliata o scegli un colore illeggibile, correggilo in Branding e salva di nuovo. Considera la normale cache del browser quando verifichi la sostituzione.

Automatizzare con API e MCP

Se l'integrazione dispone delle autorizzazioni necessarie, l'API REST o MCP può gestire impostazioni e risorse del marchio. Si applicano gli stessi tipi di file e il limite di 1 MB. Usa pannello e anteprima per il controllo visivo finale.

Consulta la Guida API e MCP al Branding White Label per le operazioni supportate.

Scenari comuni

«Il logo è nitido nella barra laterale, ma sfocato sul telefono». Carica un originale più nitido e ad alta risoluzione, salvalo e prova l'host attivo sul telefono. Non affidarti solo all'anteprima di un browser desktop.

«Il colore primario funziona nel pannello, ma il testo dei pulsanti è difficile da leggere». Scegli un tono più scuro o saturo e verificalo nell'anteprima e sull'host attivo.

«Il logo ha uno sfondo colorato che non corrisponde al pannello». Esporta una versione PNG trasparente quando possibile. Confronta le versioni chiara e scura sui rispettivi sfondi.

«Posso avere un logo diverso nelle email e nel pannello?» Usa le varianti chiara e scura fornite da Branding. Prova l'anteprima delle email supportate e le superfici attive dei clienti prima di promettere un determinato aspetto.

«E la modalità scura?» Il pannello supporta temi chiari e scuri e puoi caricare un logo separato per ciascuno. Il logo chiaro appare sugli sfondi chiari e quello scuro sugli sfondi scuri. Puoi quindi usare un logo scuro su chiaro e uno bianco o chiaro su scuro.

«Posso caricare una favicon separata dal logo?» Sì. La favicon ha un caricamento dedicato (PNG, JPG o ICO, massimo 1 MB) e non deriva dal logo. Carica un'icona semplice e distinta per la scheda del browser.

Passaggi successivi

• Configurare White Label Lite: attivazione e configurazione DNS.
• Cosa mantiene il marchio TrekMail: cosa i clienti potrebbero continuare a vedere di TrekMail.
• Domande frequenti sui prezzi di White Label Lite: domande su fatturazione e valuta.
• Guida API e MCP al Branding White Label: carica i loghi e imposta il marchio tramite REST o MCP.