Zippa Brand

The official branding guidelines for Zippa


Zippa has a single primary color, with additional neutral and accent colors.

Each color is available in a variety of shades to use in different contexts.

Tip: Click the colors to copy the hex color code.







Accessible Colors

Because not every user perceives color in the same way, it is important to use colors with high contrast in lightness, or a carefully-picked subset of the standard colors when distinguishing colors is critical to the interface, for example in charts.

Colorblind effects

Our standard palette is fairly clear in most cases for colorblind users, but when distinguishing colors is critical, we have an alternate color palette that should be used.

Standard Palette





Colorblind-safe Palette






For users with limited sight, high contrast is important to readability.


Zippa has two logo varients available to use.


When space permits, the wordmark is the preferred way to represent the brand. It should be used whenever there is enough horizontal space to fit and remain legible.


When space is limited or a square icon is required, the "Zi" glyph is ideal. It should typically be displayed on a solid white background, and should either be white, black or the brand gradient.

Download Logo Pack


Zippa uses Open Sans for all UI elements, and Nunito for logo marks.


Headings should be set in Open Sans, at a 500 weight. Headings should only be used to designate the start of a content section or subsection. Using headings for styling alone without context should be avoided, and lead text should be used instead.

Only three levels of headings should typically be used, at 2.5rem, 1.75rem, and 1.25 rem.

Heading Level 1
Heading Level 2
Heading Level 3

Body type

Body type should be set in Open Sans at 1rem (16px), at a 400 weight. Emphasized content should be oblique, with a heavier weight of 700 available to use when oblique style isn't desired.

Lead text can be used to emphasize taglines and other longer text blocks, but should typically be kept to 1–2 lines. It has a slightly larger size at 1.25rem (20px).

Lead text used to emphasize a tagline or describe a section

General body text, used throughout the exprience. Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut consequuntur recusandae, earum praesentium autem tempora numquam sunt odio sequi rerum ex veritatis officiis cumque adipisci dolores quos voluptate quis. Ab tempore tempora molestiae, obcaecati voluptas.