Icon

When using the Emailable icon, be sure to leave ample space around the perimeter of the icon (examples can be found inside the logo kit). Also be sure to use the correct version of the icon depending on the scenario in which it is to be used so that any of the icon's colors do not become difficult to see (see below).

  • Emailable icon  main
    Emailable icon  main

    Main

    Use the main version on light or dark backgrounds. Preferred background colors: White, Dark, Dark Gradient

  • Emailable icon  black

    Black

    Use the black version on light backgrounds. Preferred background colors: Purple - Shade 2, Dark, Dark Gradient

  • Emailable icon  white

    White

    Use the white version on dark backgrounds when color use is limited or when absolutely needed. Preferred background colors: Purple - Shade 2, Dark, Purple Gradient, Dark Gradient

Colors

  • Purple

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

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

    • RGB 167, 148, 255
    • CMYK 0.345, 0.420, 0.000, 0.000
    • HEX #A794FF
  • Purple - Tint 3

    • RGB 188, 173, 255
    • CMYK 0.263, 0.322, 0.000, 0.000
    • HEX #BCADFF
  • Purple - Tint 4

    • RGB 209, 198, 255
    • CMYK 0.180, 0.224, 0.000, 0.000
    • HEX #D1C6FF
  • Purple - Shade 1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Typography

Inter

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789

  • Light 300
  • Regular 400
  • Medium 500
  • Semibold 600
  • Bold 700
  • Aa

    Headings

  • Aa

    Subheadings

  • Aa

    Body text

Spacing

Headings

Headings should have a line height of 1.3em or {font size} * 1.3

Body text

Body text should have a line height of 1.75em or {font size} * 1.75

Text colors

  • Purple

    Used for subheadings that sit above main headings. Use only on light backgrounds.

  • Purple - Tint 3

    Used for body text and other scenarios in which a more subdued color is appropriate. Use only on dark backgrounds.

  • Purple - Tint 4

    Used for body text and other scenarios in which a more subdued color is appropriate. Use only on purple backgrounds.

  • Gray

    Used for body text and other scenarios in which a more subdued color is appropriate. Use only on light backgrounds.

  • Gray - Tint 2

    Used for subheadings in which a more subdued color than purple is appropriate. Use only on light backgrounds.

  • Gray - Shade 1

    Used for body text inside articles with multiple paragraphs.

Design Elements

    Dark Gradient

    Used for whenever a dark background is needed/desired. The gradient is a circle with its center originating roughly 20% from the right and 20% from the bottom of the element and its radius spanning to the edge of the shape.

    • 0%Purple - Shade 2
    • 100%Dark

    Purple Gradient

    Used for whenever a lighter, more colorful background is needed/desired. The gradient is a circle with its center originating roughly 20% from the right and 20% from the bottom of the element and its radius spanning to the edge of the shape.

    • 0%Purple
    • 100%Purple - Shade 1

Discover why the world’s largest companies choose us to improve email deliverability

Start Free Trial