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 (see below).
Download logo kit
Main
Use the main version on light backgrounds. Do not use the logo on colored backgrounds that make any of the logo's colors hard to see.
Light
Use the light version on dark backgrounds. Do not use the logo on colored backgrounds that make any of the logo's colors hard to see.
Slate
Use the slate version on light backgrounds only when absolutely needed. Otherwise use the Main logo.
White
Use the white version on dark backgrounds only when absolutely needed. Otherwise use the Light logo.
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
The following are various visual elements used to reflect the Emailable brand.
Dark Gradient
Used for whenever a dark background is needed/desired. This gradient is a circle with its center originating 20% from the right and 20% from the bottom of the element.
- 0%Purple - Shade 2
- 100%Dark
Purple Gradient
Used for whenever a lighter, more colorful background is needed/desired. This gradient is a circle with its center originating 20% from the right and 20% from the bottom of the element.
- 0%Purple
- 100%Purple - Shade 1