Zippa Brand

The official branding guidelines for Zippa

Colors

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.

Primary

Neutral

Accent

Success

Warning

Danger

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

Brand

Prot.

Deut.

Trit.

Colorblind-safe Palette

Brand

Prot.

Deut.

Trit.

Contrast

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

Logos

Zippa has two logo varients available to use.

Wordmark

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.

Glyph

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

Typography

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

Headings

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.