Logo
The Emailable logo is available as both a full logo with the Emailable wordmark and as an icon, each with its own color variants and use cases. Please adhere to the usage guidelines below.
Full logo
-
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:
Logo icon
-
Main
The definitive version of the Emailable icon. Use on light 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 main 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 an unapproved way. This includes but is not limited to: changing colors, disproportionally transforming, applying stylistic effects (i.e. glow, shadow, blur, stroke, etc.)
-
Place the logo on backgrounds in which it becomes difficult to see the wordmark or any of the icon's colors
Colors
The official Emailable color palette and background gradients used for design/branding. For color use with typography, see Font Colors.
Palette
Tap/click a swatch to copy its HEX color code.
-
Primary
-
Slate
-
Red
-
Orange
-
Yellow
-
Green
-
Cyan
-
Blue
-
Fuchsia
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
The official typeface and typography styling guidelines for Emailable, including font weights and color usage across various interface elements.
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.