Logotipo
A continuación encontrará el logotipo oficial de Emailable y sus variantes, así como las directrices de uso.
-
Principal
La versión definitiva del logotipo Emailable. Utilícelo sobre fondos claros.
Formación preferente:
-
-
-
-
Luz
Una variación del logotipo principal con texto en blanco. Utilícelo sobre fondos oscuros.
Formación preferente:
-
Negro
Utilícela sobre fondos claros en situaciones en las que el uso del color sea limitado. De lo contrario, utilice la versión principal.
Formación preferente:
-
-
-
-
Blanco
Utilícela sobre fondos oscuros en situaciones en las que el uso del color sea limitado. De lo contrario, utilice la versión clara.
Formación preferente:
Hazlo:
-
Deje suficiente espacio entre el logotipo y otros elementos o bordes del documento (utilice la letra "e" del logotipo como distancia de seguridad)
-
Utilice la variante correcta en función del fondo (véase más arriba)
No lo hagas:
-
Alterar el logotipo de cualquier forma (por ejemplo, cambiando los colores, aplicando efectos, rotándolo, escalándolo desproporcionadamente, etc.)
-
Colocar el logotipo sobre fondos en los que resulte difícil ver la marca denominativa o alguno de los colores del icono
Colores
-
Principal
¡Copiado!
50 #ecebff¡Copiado!
100 #dedbff¡Copiado!
200 #c7c2ff¡Copiado!
300 #a899ff¡Copiado!
400 #937aff¡Copiado!
500 #7e61ff¡Copiado!
600 #6a4ce1¡Copiado!
700 #5b33c7¡Copiado!
800 #3e238b¡Copiado!
900 #251452¡Copiado!
950 #11082b
-
Pizarra
¡Copiado!
50 #f4f4fb¡Copiado!
100 #e7e7f4¡Copiado!
200 #d9d9ed¡Copiado!
300 #c4c4e3¡Copiado!
400 #aeaed6¡Copiado!
500 #9692c4¡Copiado!
600 #8178b0¡Copiado!
700 #655b95¡Copiado!
800 #4b4276¡Copiado!
900 #332b5a¡Copiado!
950 #1d1641
-
Rojo
¡Copiado!
50 #fff1f3¡Copiado!
100 #ffe3e6¡Copiado!
200 #ffccd4¡Copiado!
300 #ffa1b1¡Copiado!
400 #ff708a¡Copiado!
500 #f93a63¡Copiado!
600 #e7174e¡Copiado!
700 #c30d41¡Copiado!
800 #a30e3d¡Copiado!
900 #8b103b¡Copiado!
950 #4e031b
-
Naranja
¡Copiado!
50 #fff7ed¡Copiado!
100 #ffedd5¡Copiado!
200 #fed7aa¡Copiado!
300 #fdba74¡Copiado!
400 #fb923c¡Copiado!
500 #f97316¡Copiado!
600 #ea580c¡Copiado!
700 #c2410c¡Copiado!
800 #9a3412¡Copiado!
900 #7c2d12¡Copiado!
950 #431407
-
Amarillo
¡Copiado!
50 #fff9eb¡Copiado!
100 #fef0c8¡Copiado!
200 #fddd8b¡Copiado!
300 #fccb4f¡Copiado!
400 #fbbd23¡Copiado!
500 #f5af00¡Copiado!
600 #f1a200¡Copiado!
700 #e58e00¡Copiado!
800 #c87200¡Copiado!
900 #9c4f00¡Copiado!
950 #7a3700
-
Verde
¡Copiado!
50 #edfcf5¡Copiado!
100 #d4f7e4¡Copiado!
200 #abedcd¡Copiado!
300 #78ddb3¡Copiado!
400 #3dd198¡Copiado!
500 #1bc58a¡Copiado!
600 #0eb47d¡Copiado!
700 #0d9c71¡Copiado!
800 #0f805e¡Copiado!
900 #0c644b¡Copiado!
950 #085441
-
Cian
¡Copiado!
50 #ecfeff¡Copiado!
100 #cffafe¡Copiado!
200 #a5f3fc¡Copiado!
300 #67e8f9¡Copiado!
400 #22d3ee¡Copiado!
500 #06b6d4¡Copiado!
600 #0891b2¡Copiado!
700 #0e7490¡Copiado!
800 #155e75¡Copiado!
900 #164e63¡Copiado!
950 #083344
-
Azul
¡Copiado!
50 #f0f8fe¡Copiado!
100 #deeefb¡Copiado!
200 #c4e2f8¡Copiado!
300 #9bd0f3¡Copiado!
400 #6db6ed¡Copiado!
500 #549ee7¡Copiado!
600 #4687dd¡Copiado!
700 #3778d2¡Copiado!
800 #2c5ca5¡Copiado!
900 #213e6e¡Copiado!
950 #192e4d
-
Fucsia
¡Copiado!
50 #fdf4ff¡Copiado!
100 #fae8ff¡Copiado!
200 #f5d0fe¡Copiado!
300 #f0abfc¡Copiado!
400 #e879f9¡Copiado!
500 #d946ef¡Copiado!
600 #c026d3¡Copiado!
700 #a21caf¡Copiado!
800 #86198f¡Copiado!
900 #701a75¡Copiado!
950 #4a044e
Gradientes
Todos los degradados son radiales y circulares. Sus orígenes se sitúan a un 20% de los bordes superior y derecho de las formas que los contienen y se extienden en diagonal hasta la esquina inferior izquierda (véase más abajo).
-
Gradiente oscuro
El degradado principal. Se utiliza como fondo oscuro.
Paradas de color:
-
Gradiente más oscuro
Se utiliza como fondo oscuro suplementario para contrastar el degradado Oscuro.
Paradas de color:
-
Violeta degradado
Se utiliza como fondo alternativo o de acento.
Paradas de color:
Tipografía
Tipo de letra
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:;'"|{}[]
-
Regular 400
El peso por defecto. Se utiliza para el cuerpo del texto, descripciones, etc.
-
Medio 500
Se utiliza para determinados enlaces y etiquetas.
-
Semibold 600
Se utiliza para botones, insignias, subtítulos y determinadas cifras.
-
Negrita 700
Se utiliza para títulos, énfasis y estados activos.
Colores de fuente
-
Pizarra 900
El color del texto por defecto. Se utiliza para encabezados, etiquetas, texto destacado y estados activos. Sólo para fondos claros.
-
Pizarra 700
Se utiliza para el cuerpo de texto o texto con menos importancia. Sólo para fondos claros.
-
Pizarra 500
Se utiliza para distintivos neutros.
-
Pizarra 300
Se utiliza para introducir texto de marcador de posición o estados inactivos.
-
Principal 500
Se utiliza como color de acento para enlaces de texto y determinados subtítulos.
-
Principal 200
Se utiliza para el cuerpo de texto o texto con menos importancia. Sólo para fondos oscuros.
-
Rojo 500
Se utiliza para mensajes de peligro/error e insignias.
-
Amarillo 500
Se utiliza para los distintivos de advertencia.
-
Verde 500
Se utiliza para mensajes de éxito e insignias.
-
Azul 500
Se utiliza para los distintivos de alerta/información.
-
Blanco
Se utiliza para encabezados, etiquetas, texto destacado y estados activos. Sólo para fondos oscuros.