Ícone

Ao usar o ícone Emailable, certifique-se de deixar bastante espaço ao redor do perímetro do ícone (exemplos podem ser encontrados dentro do kit de logotipo). Certifique-se também de usar a versão correta do ícone dependendo do cenário em que será usado, para que nenhuma das cores do ícone fique difícil de ver (veja abaixo).

  • Emailable icon  main
    Emailable icon  main

    Principal

    Use a versão principal em fundos claros ou escuros. Cores de fundo preferidas: Branco, Escuro, Gradiente Escuro

  • Emailable icon  black

    Preto

    Use a versão preta em fundos claros. Cores de fundo preferidas: Roxo - Sombra 2, Escuro, Gradiente Escuro

  • Emailable icon  white

    Branco

    Use a versão branca em fundos escuros quando o uso de cores for limitado ou quando for absolutamente necessário. Cores de fundo preferidas: Roxo - Sombra 2, Escuro, Gradiente Roxo, Gradiente Escuro

Cores

  • Roxo

    • RGB 126, 97, 255
    • CMYK 0.506, 0.620, 0.000, 0.000
    • HEX #7E61FF
  • Roxo - Tonalidade 1

    • RGB 147, 122, 255
    • CMYK 0.424, 0.522, 0.000, 0.000
    • HEX #937AFF
  • Roxo - Tonalidade 2

    • RGB 167, 148, 255
    • CMYK 0.345, 0.420, 0.000, 0.000
    • HEX #A794FF
  • Roxo - Tonalidade 3

    • RGB 188, 173, 255
    • CMYK 0.263, 0.322, 0.000, 0.000
    • HEX #BCADFF
  • Roxo - Tonalidade 4

    • RGB 209, 198, 255
    • CMYK 0.180, 0.224, 0.000, 0.000
    • HEX #D1C6FF
  • Roxo - Sombra 1

    • RGB 90, 61, 179
    • CMYK 0.497, 0.659, 0.000, 0.298
    • HEX #5A3DB3
  • Roxo - Sombra 2

    • RGB 51, 32, 94
    • CMYK 0.457, 0.660, 0.000, 0.631
    • HEX #33205E
  • Escuro

    • RGB 26, 16, 47
    • CMYK 0.447, 0.660, 0.000, 0.816
    • HEX #1A102F
  • Vermelho

    • RGB 255, 95, 125
    • CMYK 0.000, 0.627, 0.510, 0.000
    • HEX #FF5F7D
  • Laranja

    • RGB 255, 156, 91
    • CMYK 0.000, 0.388, 0.643, 0.000
    • HEX #FF9C5B
  • Amarelo

    • RGB 255, 203, 96
    • CMYK 0.000, 0.204, 0.624, 0.000
    • HEX #FFCB60
  • Verde

    • RGB 92, 215, 170
    • CMYK 0.572, 0.000, 0.209, 0.157
    • HEX #5CD7AA
  • Verde 2

    • RGB 63, 179, 163
    • CMYK 0.648, 0.000, 0.089, 0.298
    • HEX #3FB3A3
  • Cinza

    • RGB 120, 110, 175
    • CMYK 0.314, 0.371, 0.000, 0.314
    • HEX #786EAF
  • Cinza - Matiz 1

    • RGB 145, 133, 208
    • CMYK 0.303, 0.361, 0.000, 0.184
    • HEX #9185D0
  • Cinza - Matiz 2

    • RGB 180, 172, 226
    • CMYK 0.204, 0.239, 0.000, 0.114
    • HEX #B4ACE2
  • Cinza - Tonalidade 3

    • RGB 217, 213, 241
    • CMYK 0.100, 0.116, 0.000, 0.055
    • HEX #D9D5F1
  • Cinza - Tom 1

    • RGB 92, 82, 146
    • CMYK 0.370, 0.438, 0.000, 0.427
    • HEX #5C5292
  • Cinza - Tom 2

    • RGB 69, 62, 109
    • CMYK 0.367, 0.431, 0.000, 0.573
    • HEX #453E6D
  • Cinza - Tom 3

    • RGB 44, 38, 76
    • CMYK 0.421, 0.500, 0.000, 0.702
    • HEX #2C264C

Tipografia

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

  • Leve 300
  • Regular 400
  • Médio 500
  • Semibold 600
  • Negrito 700
  • Aa

    Títulos

  • Aa

    Subtítulos

  • Aa

    Texto de corpo

Espaçamento

Títulos

Os títulos devem ter uma altura de linha de 1,3 em ou {font size} * 1,3

Texto de corpo

O corpo do texto deve ter uma altura de linha de 1,75em ou {font size} * 1,75

Cores do texto

  • Roxo

    Usado para subtítulos que ficam acima dos títulos principais. Use apenas em fundos claros.

  • Roxo - Tonalidade 3

    Usado para o corpo do texto e outros cenários nos quais uma cor mais suave é apropriada. Use apenas em fundos escuros.

  • Roxo - Tonalidade 4

    Usado para o corpo do texto e outros cenários nos quais uma cor mais suave é apropriada. Use apenas em fundos roxos.

  • Cinza

    Usado para o corpo do texto e outros cenários nos quais uma cor mais suave é apropriada. Use apenas em fundos claros.

  • Cinza - Matiz 2

    Usado em subposições nas quais uma cor mais suave do que o roxo é apropriada. Use apenas em fundos claros.

  • Cinza - Tom 1

    Usado para o corpo do texto dentro de artigos com vários parágrafos.

Elementos de design

    Gradiente escuro

    Usado sempre que um fundo escuro é necessário / desejado. Este gradiente é um círculo com seu centro originando 20% da direita e 20% da parte inferior do elemento.

    • 0%Roxo - Sombra 2
    • 100%Escuro

    Gradiente roxo

    Usado sempre que um fundo mais claro e colorido é necessário / desejado. Este gradiente é um círculo com seu centro originando 20% da direita e 20% da parte inferior do elemento.

    • 0%Roxo
    • 100%Roxo - Sombra 1

Descubra por que as maiores empresas do mundo nos escolhem para melhorar a capacidade de entrega de e-mails

Comece o teste gratuito