Logo
Di seguito sono riportati il logo ufficiale di Emailable e le sue varianti, nonché le linee guida per l'utilizzo.
-
Principale
La versione definitiva del logo Emailable. Da utilizzare su sfondi chiari.
Background preferenziale:
-
-
-
-
Luce
Una variante del logo principale con testo bianco. Da utilizzare su sfondi scuri.
Background preferenziale:
-
Nero
Utilizzare su sfondi chiari in situazioni in cui l'uso del colore è limitato. Altrimenti, utilizzare la versione principale.
Background preferenziale:
-
-
-
-
Bianco
Utilizzare su sfondi scuri in situazioni in cui l'uso del colore è limitato. Altrimenti, utilizzare la versione chiara.
Background preferenziale:
Fare:
-
Lasciare un ampio spazio tra il logo e altri elementi o bordi del documento (utilizzare la lettera "e" del logo come distanza di sicurezza)
-
Utilizzare la variante corretta a seconda dello sfondo (vedi sopra)
Non farlo:
-
Alterare il logo in qualsiasi modo (ad esempio cambiando i colori, applicando effetti, ruotando, scalando in modo sproporzionato, ecc.)
-
Posizionare il logo su sfondi in cui diventa difficile vedere il marchio o i colori dell'icona
Colori
-
Primario
Copiato!
50 #ecebffCopiato!
100 #dedbffCopiato!
200 #c7c2ffCopiato!
300 #a899ffCopiato!
400 #937affCopiato!
500 #7e61ffCopiato!
600 #6a4ce1Copiato!
700 #5b33c7Copiato!
800 #3e238bCopiato!
900 #251452Copiato!
950 #11082b
-
Ardesia
Copiato!
50 #f4f4fbCopiato!
100 #e7e7f4Copiato!
200 #d9d9edCopiato!
300 #c4c4e3Copiato!
400 #aeaed6Copiato!
500 #9692c4Copiato!
600 #8178b0Copiato!
700 #655b95Copiato!
800 #4b4276Copiato!
900 #332b5aCopiato!
950 #1d1641
-
Rosso
Copiato!
50 #fff1f3Copiato!
100 #ffe3e6Copiato!
200 #ffccd4Copiato!
300 #ffa1b1Copiato!
400 #ff708aCopiato!
500 #f93a63Copiato!
600 #e7174eCopiato!
700 #c30d41Copiato!
800 #a30e3dCopiato!
900 #8b103bCopiato!
950 #4e031b
-
Arancione
Copiato!
50 #fff7edCopiato!
100 #ffedd5Copiato!
200 #fed7aaCopiato!
300 #fdba74Copiato!
400 #fb923cCopiato!
500 #f97316Copiato!
600 #ea580cCopiato!
700 #c2410cCopiato!
800 #9a3412Copiato!
900 #7c2d12Copiato!
950 #431407
-
Giallo
Copiato!
50 #fff9ebCopiato!
100 #fef0c8Copiato!
200 #fddd8bCopiato!
300 #fccb4fCopiato!
400 #fbbd23Copiato!
500 #f5af00Copiato!
600 #f1a200Copiato!
700 #e58e00Copiato!
800 #c87200Copiato!
900 #9c4f00Copiato!
950 #7a3700
-
Verde
Copiato!
50 #edfcf5Copiato!
100 #d4f7e4Copiato!
200 #abedcdCopiato!
300 #78ddb3Copiato!
400 #3dd198Copiato!
500 #1bc58aCopiato!
600 #0eb47dCopiato!
700 #0d9c71Copiato!
800 #0f805eCopiato!
900 #0c644bCopiato!
950 #085441
-
Ciano
Copiato!
50 #ecfeffCopiato!
100 #cffafeCopiato!
200 #a5f3fcCopiato!
300 #67e8f9Copiato!
400 #22d3eeCopiato!
500 #06b6d4Copiato!
600 #0891b2Copiato!
700 #0e7490Copiato!
800 #155e75Copiato!
900 #164e63Copiato!
950 #083344
-
Blu
Copiato!
50 #f0f8feCopiato!
100 #deeefbCopiato!
200 #c4e2f8Copiato!
300 #9bd0f3Copiato!
400 #6db6edCopiato!
500 #549ee7Copiato!
600 #4687ddCopiato!
700 #3778d2Copiato!
800 #2c5ca5Copiato!
900 #213e6eCopiato!
950 #192e4d
-
Fucsia
Copiato!
50 #fdf4ffCopiato!
100 #fae8ffCopiato!
200 #f5d0feCopiato!
300 #f0abfcCopiato!
400 #e879f9Copiato!
500 #d946efCopiato!
600 #c026d3Copiato!
700 #a21cafCopiato!
800 #86198fCopiato!
900 #701a75Copiato!
950 #4a044e
Gradienti
Tutti i gradienti sono radiali e di forma circolare. Le loro origini si trovano al 20% dai bordi superiore e destro delle forme che li contengono e si estendono in diagonale fino all'angolo inferiore sinistro (vedi sotto).
-
Gradiente scuro
Il gradiente principale. Utilizzato come sfondo scuro.
Arresto del colore:
-
Gradiente più scuro
Utilizzato come sfondo scuro supplementare per contrastare il gradiente scuro.
Arresto del colore:
-
Viola sfumato
Utilizzato come sfondo alternativo o d'accento.
Arresto del colore:
Tipografia
Caratteri tipografici
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:;'"|\{}[]
-
Regolare 400
Il peso predefinito. Si usa per il testo del corpo, le descrizioni, ecc.
-
Medio 500
Utilizzato per alcuni collegamenti ed etichette.
-
Semibreve 600
Utilizzato per pulsanti, stemmi, sottotitoli e alcune figure.
-
In grassetto 700
Utilizzato per titoli, enfasi e stati attivi.
Colori dei caratteri
-
Ardesia 900
Il colore di testo predefinito. Utilizzato per intestazioni, etichette, testo in evidenza e stati attivi. Solo per sfondi chiari.
-
Ardesia 700
Utilizzato per il testo del corpo o per il testo di minore importanza. Solo per sfondi chiari.
-
Ardesia 500
Utilizzato per i badge neutri.
-
Ardesia 300
Utilizzato per il testo segnaposto dell'input o per gli stati inattivi.
-
Primario 500
Utilizzato come colore d'accento per i link di testo e alcuni sottotitoli.
-
Primario 200
Si usa per il testo del corpo o per il testo di minore importanza. Solo per sfondi scuri.
-
Rosso 500
Utilizzato per messaggi di pericolo/errore e badge.
-
Giallo 500
Utilizzato per i cartellini di avvertimento.
-
Verde 500
Utilizzato per i messaggi di successo e i badge.
-
Blu 500
Utilizzato per i badge di avviso/informativi.
-
Bianco
Utilizzato per intestazioni, etichette, testo in evidenza e stati attivi. Solo per sfondi scuri.