Represent Zipp, clearly and consistently.
These are the building blocks of the Zipp identity — our wordmark, app icon, colors, type, and the embeddable Zipp badge. Using them as shipped keeps the brand instantly recognizable everywhere it appears. Grab what you need below, and stick to the guidelines so Zipp always looks like Zipp.
The wordmark is our primary identity
The Zipp wordmark is the first thing people should recognize. Use the full-color version on light backgrounds and the light version on dark backgrounds. Always use the original files — never redraw, recolor, retype, or rebuild the wordmark.
Clear space
Keep a margin of at least the height of the “Z” on every side. Don’t let other graphics, text, or edges crowd the wordmark.
Minimum size
Don’t use the wordmark below 88 px wide on screen (or 20 mm in print). Smaller than that, switch to the app icon instead.
The compact mark for tight spaces
When the wordmark won’t fit, use the icon — the favicon, an avatar, a social-profile picture, or an app tile. Keep its rounded corners intact: never square them off, crop them, or place the mark on a different background shape.
Icon files
The rounded square is the default app icon. A circular “eyes” variant ships for round avatars and favicons.
The palette
Lavender and yellow are the signature pair — together they form the bicolor mark. Ink and slate do the quiet work. Click any swatch to copy its hex.
Two open-source typefaces
Zipp pairs Fraunces for editorial headlines with Inter for everything else — UI, body, and captions. Headlines sit at Medium / Semibold weight, body text at Regular. Both families are free and open source.
The embeddable Zipp badge
Showing Zipp coverage on your site? The badge is a one-line embed from
the Developer Platform.
Pick a form, theme, and size to preview it — then create an instance to
get your snippet. Shape, theme, and size are saved on the instance, so
the pasted snippet only carries its bdg_ id.
<script src="https://zippfeed.com/embed/v1/widget.js"
data-embed-id="bdg_xxxxxxxxxxxx" async></script>Do & Don’t
A quick gut-check before you ship anything with our marks.
Do
- Use the original, unmodified logo files.
- Give the mark plenty of breathing room.
- Scale it proportionally — lock the aspect ratio.
- Pick the version with enough contrast for the background.
- Use the app icon when space is tight.
Don’t
- Recolor or apply gradients to the wordmark.
- Stretch, squash, or distort the proportions.
- Rotate or skew the mark.
- Add drop shadows, glows, or outlines.
- Place it on a busy background or low-contrast color.
Logo misuse — don’t do these
Brand or press questions?
Need a vector you don’t see here, a custom lockup, or a quick sign-off on how you’re using the brand? We’re happy to help.
[email protected]