Logotipo
Abaixo está o logotipo oficial do Emailable e suas variantes, bem como as diretrizes de uso.
-
Principal
A versão definitiva do logotipo do Emailable. Use em fundos claros.
Formação preferencial:
-
-
-
-
Luz
Uma variação do logotipo principal com texto em branco. Use em fundos escuros.
Formação preferencial:
-
Preto
Use em fundos claros em situações em que o uso de cores é limitado. Caso contrário, use a versão principal.
Formação preferencial:
-
-
-
-
Branco
Use em fundos escuros em situações em que o uso de cores é limitado. Caso contrário, use a versão clara.
Formação preferencial:
Faça:
-
Dê ao logotipo um amplo espaço entre ele e outros elementos ou bordas de um documento (use a letra "e" do logotipo como uma distância segura)
-
Use a variante correta dependendo do plano de fundo (veja acima)
Não faça isso:
-
Alterar o logotipo de qualquer forma (ou seja, alterar cores, aplicar efeitos, girar, dimensionar desproporcionalmente, etc.)
-
Coloque o logotipo em fundos nos quais seja difícil ver a marca nominativa ou qualquer uma das cores do ícone
Cores
-
Primário
Copiado!
50 #ecebffCopiado!
100 #dedbffCopiado!
200 #c7c2ffCopiado!
300 #a899ffCopiado!
400 #937affCopiado!
500 #7e61ffCopiado!
600 #6a4ce1Copiado!
700 #5b33c7Copiado!
800 #3e238bCopiado!
900 #251452Copiado!
950 #11082b
-
Ardósia
Copiado!
50 #f4f4fbCopiado!
100 #e7e7f4Copiado!
200 #d9d9edCopiado!
300 #c4c4e3Copiado!
400 #aeaed6Copiado!
500 #9692c4Copiado!
600 #8178b0Copiado!
700 #655b95Copiado!
800 #4b4276Copiado!
900 #332b5aCopiado!
950 #1d1641
-
Vermelho
Copiado!
50 #fff1f3Copiado!
100 #ffe3e6Copiado!
200 #ffccd4Copiado!
300 #ffa1b1Copiado!
400 #ff708aCopiado!
500 #f93a63Copiado!
600 #e7174eCopiado!
700 #c30d41Copiado!
800 #a30e3dCopiado!
900 #8b103bCopiado!
950 #4e031b
-
Laranja
Copiado!
50 #fff7edCopiado!
100 #ffedd5Copiado!
200 #fed7aaCopiado!
300 #fdba74Copiado!
400 #fb923cCopiado!
500 #f97316Copiado!
600 #ea580cCopiado!
700 #c2410cCopiado!
800 #9a3412Copiado!
900 #7c2d12Copiado!
950 #431407
-
Amarelo
Copiado!
50 #fff9ebCopiado!
100 #fef0c8Copiado!
200 #fddd8bCopiado!
300 #fccb4fCopiado!
400 #fbbd23Copiado!
500 #f5af00Copiado!
600 #f1a200Copiado!
700 #e58e00Copiado!
800 #c87200Copiado!
900 #9c4f00Copiado!
950 #7a3700
-
Verde
Copiado!
50 #edfcf5Copiado!
100 #d4f7e4Copiado!
200 #abedcdCopiado!
300 #78ddb3Copiado!
400 #3dd198Copiado!
500 #1bc58aCopiado!
600 #0eb47dCopiado!
700 #0d9c71Copiado!
800 #0f805eCopiado!
900 #0c644bCopiado!
950 #085441
-
Ciano
Copiado!
50 #ecfeffCopiado!
100 #cffafeCopiado!
200 #a5f3fcCopiado!
300 #67e8f9Copiado!
400 #22d3eeCopiado!
500 #06b6d4Copiado!
600 #0891b2Copiado!
700 #0e7490Copiado!
800 #155e75Copiado!
900 #164e63Copiado!
950 #083344
-
Azul
Copiado!
50 #f0f8feCopiado!
100 #deeefbCopiado!
200 #c4e2f8Copiado!
300 #9bd0f3Copiado!
400 #6db6edCopiado!
500 #549ee7Copiado!
600 #4687ddCopiado!
700 #3778d2Copiado!
800 #2c5ca5Copiado!
900 #213e6eCopiado!
950 #192e4d
-
Fúcsia
Copiado!
50 #fdf4ffCopiado!
100 #fae8ffCopiado!
200 #f5d0feCopiado!
300 #f0abfcCopiado!
400 #e879f9Copiado!
500 #d946efCopiado!
600 #c026d3Copiado!
700 #a21cafCopiado!
800 #86198fCopiado!
900 #701a75Copiado!
950 #4a044e
Gradientes
Todos os gradientes são radiais e de formato circular. Suas origens estão localizadas a 20% das bordas superior e direita das formas que os contêm e se estendem diagonalmente até o canto inferior esquerdo (veja abaixo).
-
Gradiente escuro
O gradiente principal. Usado como um fundo escuro.
Paradas de cor:
-
Gradiente mais escuro
Usado como um fundo escuro suplementar para contrastar o gradiente Escuro.
Paradas de cor:
-
Gradiente roxo
Usado como um plano de fundo alternativo ou de destaque.
Paradas de cor:
Tipografia
Tipo de letra
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:;'"|\{}[]
-
Regular 400
O peso padrão. Usado para texto do corpo, descrições etc.
-
Médio 500
Usado para determinados links e rótulos.
-
Semibold 600
Usado para botões, emblemas, subtítulos e determinados números.
-
Negrito 700
Usado para títulos, ênfase e estados ativos.
Cores das fontes
-
Ardósia 900
A cor padrão do texto. Usada para títulos, rótulos, texto em destaque e estados ativos. Somente para fundos claros.
-
Ardósia 700
Usado para texto de corpo ou texto com menos importância. Somente para fundos claros.
-
Ardósia 500
Usado para crachás neutros.
-
Ardósia 300
Usado para texto de espaço reservado de entrada ou estados inativos.
-
Primário 500
Usada como cor de destaque para links de texto e determinados subtítulos.
-
Primário 200
Usado para corpo de texto ou texto com menos importância. Somente para fundos escuros.
-
Vermelho 500
Usado para mensagens de perigo/erro e crachás.
-
Amarelo 500
Usado para crachás de advertência.
-
Verde 500
Usado para mensagens de sucesso e emblemas.
-
Azul 500
Usado para crachás de alerta/informativos.
-
Branco
Usado para títulos, rótulos, texto em destaque e estados ativos. Somente para fundos escuros.