For Brand
Primary Color Light
Primary Color Dark
Secondary Color Light
Secondary Color Dark
How to use the logo
In almost all cases, the Primary Dialpad logo mark should be used. It consists of the Dialpad icon and word mark.
Never use the spark icon on it’s own, it should always be used with the Dialpad wordmark
Clear space
When using the Dialpad logo mark, always use the proper minimum clear space and sizing.
Digital Minimum Size
32 x 64px with clear space
16 x 48px without clear space
Positioning
Maintain at least 2x the width of the "d" as clear space around the logo and ensure centering of the "dialpad" wordmark minus the Spark's width.
Alignment
In Product
Choose the proper logo variant based on its context and theme.
Color Options
Logos are available in a fixed set of color options to suit different backgrounds, contexts, and theme needs.
| Color | Logo | Name | Usage |
|---|---|---|---|
| Color | dialpad-logo | Suitable for most cases. Wordmark foreground color responds to Dialtone light and dark themes. For example, the wordmark will be dark in the default theme, and light in the dark theme. | |
| Monochrome | dialpad-mono | Single-color wordmark and logomark in Dialtone's primary foreground color. Responds to Dialtone light and dark themes. | |
| Color | dialpad-logo-inverted | Appropriate for use on a contrasting surface color. For example, in a light theme the wordmark will be light on a dark contrasting surface. | |
| Monochrome | dialpad-mono-inverted | Appropriate for use on a contrasting surface color. For example, in a light theme it would be light on a dark contrasting surface. | |
| Color | dialpad-logo-black | When the wordmark must remain black regardless of theme or context. | |
| Monochrome | dialpad-mono-black | When the entire logo must remain black regardless of theme. | |
| Color | dialpad-logo-white | When the wordmark must remain white regardless of theme or context. | |
| Monochrome | dialpad-mono-white | When the entire logo must remain white regardless of theme. |