Style Guide & Ressources

These are official ZIP style rules and graphical resources that should be used on all online materials (websites, landing pages, social profiles and advertisings).

Typography

Lorem ipsum dolor sit amet

H1

Lorem ipsum dolor sit amet

H2

Lorem ipsum dolor sit amet

H3

Lorem ipsum dolor sit amet

H4
Lorem ipsum dolor sit amet
H5
Lorem ipsum dolor sit amet
H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Suspendisse cursus dolor nec libero placerat, et consectetur est aliquet. Etiam lacus nisl, sodales a convallis quis, placerat ac neque. Aenean tempus varius sem vitae dapibus.

Paragraphs
Lorem ipsum dolor sit amet
Block Quote
Lorem ipsum
Text Link
  1. Lorem ipsum
  2. Dolor sit
  3. Amet consectetur
ordered List & List items
  • Lorem ipsum
  • Dolor sit
  • Amet consectetur
Unordered List & List items
Image

Color

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.

Text Colors

font color - dark
#222222
font color - Light
#aaaaaa

ZIP Software – Main Colors

BRAND COLOR 1
Teal
#0a7e8c
BRAND COLOR 3
Turquoise
#0cc0cc
BRAND COLOR 2
Deep Teal
#00515e
BRAND COLOR 4
Frosty Mint
#e1f5f5

ZIP Institute – Main Colors

BRAND COLOR 1
Gold
#ffbf00
BRAND COLOR 3
Yellow
#ffe000
BRAND COLOR 2
Ochre
#d9a100
BRAND COLOR 4
Cream
#fff8de

Neutral Colors

LIGHT GREY 1
#ebebeb
DARK GREY 1
#636363
LIGHT GREY 2
#cccccc
DARK GREY 2
#333333

Logo

ZIP Software LOGO
DOWNLOAD
ZIP Institute LOGO
DOWNLOAD
ZIP Software Logo – WHITE
DOWNLOAD
ZIP Institute LOGO – WHITE
DOWNLOAD

Components

These are a few example components.

Name
Email
Message
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.