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.
Preferred backgrounds:
-
White -
Slate 50
Preferred backgrounds:
Preferred backgrounds:
-
White -
Slate 50
Preferred backgrounds:
Preferred backgrounds:
Preferred backgrounds:
-
White -
Slate 50
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
-
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
Used as the standard dark background.
Primary 800 Primary 950 -
Darker Gradient
Used as an alternative dark background.
Primary 900 Primary 950 -
Purple Gradient
Used as an alternative dark background.
Primary 500 Primary 800
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
Colors are for light backgrounds unless noted otherwise. Colors that change in dark mode list their dark mode equivalent.
General
-
Slate 800
The default text color for headings, labels, prominent text, and active states.
Dark mode: White -
Slate 600
Body text or text with less significance.
Dark mode: Slate 300 -
Slate 500
Input placeholder text, neutral badges, secondary menu text, and inactive tabs on dark backgrounds.
-
Slate 300
Inactive tabs.
Dark mode: Slate 500 -
White
Headings, labels, prominent text, and active states on dark backgrounds.
-
Primary 500
Accent color for text links, active navigation items, and certain subheadings.
-
Primary 200
Body text or text with less significance on dark gradient backgrounds.
Status
-
Red 500
Error messages and danger badges.
-
Yellow 500
Warning badges.
-
Green 500
Success messages and badges.
-
Blue 500
Informational badges.
Additional
-
Slate 400
Inactive navigation items in dark mode and slashed-out prices.
-
Slate 200
Inline code and navigation hover states in dark mode.
-
Primary 700
Text link hover states.
Dark mode: Primary 300 -
Primary 400
Section labels on dark backgrounds and links in tooltips.
-
Primary 300
Footer links, quotes, and slashed-out prices on dark backgrounds.
-
Primary 800
Default callout text.
Dark mode: Primary 300 -
Blue 800
Informational callout text.
Dark mode: Blue 300 -
Green 800
Success callout text.
Dark mode: Green 300 -
Red 700
Danger callout text and inline error messages.
Dark mode: Red 300 -
Yellow 600
Inline warning messages.
-
Green 600
Checkmark bullets and positive labels.