Logo
Below is the official Emailable logo and its variants as well as guidelines for usage.
-
Main
The definitive version of the Emailable logo. Use on light backgrounds.
Preferred backgrounds:
-
-
-
-
Light
A variation of the main logo with white text. Use on dark backgrounds.
Preferred backgrounds:
-
Black
Use on light backgrounds in situations where color usage is limited. Otherwise use the main version.
Preferred backgrounds:
-
-
-
-
White
Use on dark backgrounds in situations where color usage is limited. Otherwise use the light version.
Preferred backgrounds:
Do:
-
Give the logo ample space between it and other elements or edges of a document (use the letter "e" from the logo as a safe distance)
-
Use the correct variant depending on the background (see above)
Do not:
-
Alter the logo in any way (i.e. changing colors, applying effects, rotating, disproportionally scaling, etc.)
-
Place the logo on backgrounds in which it becomes difficult to see the wordmark or any of the icon's colors
Colors
-
Primary
Copied!
50 #ecebffCopied!
100 #dedbffCopied!
200 #c7c2ffCopied!
300 #a899ffCopied!
400 #937affCopied!
500 #7e61ffCopied!
600 #6a4ce1Copied!
700 #5b33c7Copied!
800 #3e238bCopied!
900 #251452Copied!
950 #11082b
-
Slate
Copied!
50 #f4f4fbCopied!
100 #e7e7f4Copied!
200 #d9d9edCopied!
300 #c4c4e3Copied!
400 #aeaed6Copied!
500 #9692c4Copied!
600 #8178b0Copied!
700 #655b95Copied!
800 #4b4276Copied!
900 #332b5aCopied!
950 #1d1641
-
Red
Copied!
50 #fff1f3Copied!
100 #ffe3e6Copied!
200 #ffccd4Copied!
300 #ffa1b1Copied!
400 #ff708aCopied!
500 #f93a63Copied!
600 #e7174eCopied!
700 #c30d41Copied!
800 #a30e3dCopied!
900 #8b103bCopied!
950 #4e031b
-
Orange
Copied!
50 #fff7edCopied!
100 #ffedd5Copied!
200 #fed7aaCopied!
300 #fdba74Copied!
400 #fb923cCopied!
500 #f97316Copied!
600 #ea580cCopied!
700 #c2410cCopied!
800 #9a3412Copied!
900 #7c2d12Copied!
950 #431407
-
Yellow
Copied!
50 #fff9ebCopied!
100 #fef0c8Copied!
200 #fddd8bCopied!
300 #fccb4fCopied!
400 #fbbd23Copied!
500 #f5af00Copied!
600 #f1a200Copied!
700 #e58e00Copied!
800 #c87200Copied!
900 #9c4f00Copied!
950 #7a3700
-
Green
Copied!
50 #edfcf5Copied!
100 #d4f7e4Copied!
200 #abedcdCopied!
300 #78ddb3Copied!
400 #3dd198Copied!
500 #1bc58aCopied!
600 #0eb47dCopied!
700 #0d9c71Copied!
800 #0f805eCopied!
900 #0c644bCopied!
950 #085441
-
Cyan
Copied!
50 #ecfeffCopied!
100 #cffafeCopied!
200 #a5f3fcCopied!
300 #67e8f9Copied!
400 #22d3eeCopied!
500 #06b6d4Copied!
600 #0891b2Copied!
700 #0e7490Copied!
800 #155e75Copied!
900 #164e63Copied!
950 #083344
-
Blue
Copied!
50 #f0f8feCopied!
100 #deeefbCopied!
200 #c4e2f8Copied!
300 #9bd0f3Copied!
400 #6db6edCopied!
500 #549ee7Copied!
600 #4687ddCopied!
700 #3778d2Copied!
800 #2c5ca5Copied!
900 #213e6eCopied!
950 #192e4d
-
Fuchsia
Copied!
50 #fdf4ffCopied!
100 #fae8ffCopied!
200 #f5d0feCopied!
300 #f0abfcCopied!
400 #e879f9Copied!
500 #d946efCopied!
600 #c026d3Copied!
700 #a21cafCopied!
800 #86198fCopied!
900 #701a75Copied!
950 #4a044e
Gradients
All gradients are radial gradients and circular in shape. Their origins are located 20% from the top and right edges of their containing shapes and extend diagonally to the bottom left corner (see below).
-
Dark Gradient
The main gradient. Used as a dark background.
Color stops:
-
Darker Gradient
Used as a supplementary dark background to contrast the Dark gradient.
Color stops:
-
Purple Gradient
Used as an alternative or accent background.
Color stops:
Typography
Typeface
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
~`!@#$%^&*()_+-=,./<>?:;'"|\{}[]
-
Regular 400
The default weight. Used for body text, descriptions, etc.
-
Medium 500
Used for certain links and labels.
-
Semibold 600
Used for buttons, badges, subheadings, and certain figures.
-
Bold 700
Used for headings, emphasis, and active states.
Font Colors
-
Slate 900
The default text color. Used for headings, labels, prominent text, and active states. For light backgrounds only.
-
Slate 700
Used for body text or text with less significance. For light backgrounds only.
-
Slate 500
Used for neutral badges.
-
Slate 300
Used for input placeholder text or inactive states.
-
Primary 500
Used as an accent color for text links and certain subheadings.
-
Primary 200
Used for body text or text with less significance. For dark backgrounds only.
-
Red 500
Used for danger/error messages and badges.
-
Yellow 500
Used for warning badges.
-
Green 500
Used for success messages and badges.
-
Blue 500
Used for alert/informational badges.
-
White
Used for headings, labels, prominent text, and active states. For dark backgrounds only.