The Emailable Logo
When using the Emailable logo, be sure to leave ample space around the perimeter of the logo using the height/width of the letter "e" from the logo as a minimum distance. Also be sure to use the correct version of the logo depending on the scenario in which it is to be used so that any of the logo's colors do not become difficult to see (see below).
Download logo kit
Main
Use the main version on light backgrounds. Preferred background colors: White
Light
Use the light version on dark backgrounds. Preferred background colors: Purple - Shade 2, Dark, Dark Gradient
Black
Use the black version on light backgrounds when color use is limited or when absolutely needed. Otherwise use the main version. Preferred background colors: White
White
Use the white version on dark backgrounds when color use is limited or when absolutely needed. Otherwise use the light version. Purple - Shade 2, Dark, Purple Gradient, Dark Gradient
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).
Main
Use the main version on light or dark backgrounds. Preferred background colors: White, Dark, Dark Gradient
Black
Use the black version on light backgrounds. Preferred background colors: Purple - Shade 2, Dark, Dark Gradient
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