/ 
1 Add click sound timing 2 Add typing sound timing Finished
Shared under Creative Commons BY-SA
EMPPLQAHEBrand
Zipier brand book



 

Zipier brand book

 

Nice of you to stop by...

We hope you enjoy this short collection of tips on how to present the Zipier brand.

Zipier's brand team :)


 

1. Colors

Zipier loves color. Where possible stick to the middle row below. That's the row with the dark borders.

Lighter and darker shades are fine too.

Zipier's not too fond of black, so try to avoid it wherever possible (dark shades of gray make a nicer alternative).

See the full size version

red90
rgb(183,28,28)
#B71C1C
pnk90
rgb(136,14,79)
#880E4F
pur90
rgb(74,20,140)
#4A148C
pud90
rgb(49,27,146)
#311B92
ind90
rgb(26,35,126)
#1A237E
blu90
rgb(13,71,161)
#0D47A1
bll90
rgb(1,87,155)
#01579B
cyn90
rgb(0,96,100)
#006064
tal90
rgb(0,77,64)
#004D40
grn90
rgb(27,94,32)
#1B5E20
grl90
rgb(51,105,30)
#33691E
lim90
rgb(130,119,23)
#827717
yel90
rgb(245,127,23)
#F57F17
amb90
rgb(255,111,0)
#FF6F00
oge90
rgb(230,81,0)
#E65100
ogd90
rgb(191,54,12)
#BF360C
bwn90
rgb(62,39,35)
#3E2723
grb90
rgb(38,50,56)
#263238
gry90
rgb(33,33,33)
#212121

red80
rgb(198,40,40)
#C62828
pnk80
rgb(173,20,87)
#AD1457
pur80
rgb(106,27,154)
#6A1B9A
pud80
rgb(69,39,160)
#4527A0
ind80
rgb(40,53,147)
#283593
blu80
rgb(21,101,192)
#1565C0
bll80
rgb(2,119,189)
#0277BD
cyn80
rgb(0,131,143)
#00838F
tal80
rgb(0,105,92)
#00695C
grn80
rgb(46,125,50)
#2E7D32
grl80
rgb(85,139,47)
#558B2F
lim80
rgb(158,157,36)
#9E9D24
yel80
rgb(249,168,37)
#F9A825
amb80
rgb(255,143,0)
#FF8F00
oge80
rgb(239,108,0)
#EF6C00
ogd80
rgb(216,67,21)
#D84315
bwn80
rgb(78,52,46)
#4E342E
grb80
rgb(55,71,79)
#37474F
gry80
rgb(66,66,66)
#424242

red70
rgb(211,47,47)
#D32F2F
pnk70
rgb(194,24,91)
#C2185B
pur70
rgb(123,31,162)
#7B1FA2
pud70
rgb(81,45,168)
#512DA8
ind70
rgb(48,63,159)
#303F9F
blu70
rgb(25,118,210)
#1976D2
bll70
rgb(2,136,209)
#0288D1
cyn70
rgb(0,151,167)
#0097A7
tal70
rgb(0,121,107)
#00796B
grn70
rgb(56,142,60)
#388E3C
grl70
rgb(104,159,56)
#689F38
lim70
rgb(175,180,43)
#AFB42B
yel70
rgb(251,192,45)
#FBC02D
amb70
rgb(255,160,0)
#FFA000
oge70
rgb(245,124,0)
#F57C00
ogd70
rgb(230,74,25)
#E64A19
bwn70
rgb(93,64,55)
#5D4037
grb70
rgb(69,90,100)
#455A64
gry70
rgb(97,97,97)
#616161

red60
rgb(229,57,53)
#E53935
pnk60
rgb(216,27,96)
#D81B60
pur60
rgb(142,36,170)
#8E24AA
pud60
rgb(94,53,177)
#5E35B1
ind60
rgb(57,73,171)
#3949AB
blu60
rgb(30,136,229)
#1E88E5
bll60
rgb(3,155,229)
#039BE5
cyn60
rgb(0,172,193)
#00ACC1
tal60
rgb(0,137,123)
#00897B
grn60
rgb(67,160,71)
#43A047
grl60
rgb(124,179,66)
#7CB342
lim60
rgb(192,202,51)
#C0CA33
yel60
rgb(253,216,53)
#FDD835
amb60
rgb(255,179,0)
#FFB300
oge60
rgb(251,140,0)
#FB8C00
ogd60
rgb(244,81,30)
#F4511E
bwn60
rgb(109,76,65)
#6D4C41
grb60
rgb(84,110,122)
#546E7A
gry60
rgb(117,117,117)
#757575

red50
rgb(244,67,54)
#F44336
pnk50
rgb(233,30,99)
#E91E63
pur50
rgb(156,39,176)
#9C27B0
pud50
rgb(103,58,183)
#673AB7
ind50
rgb(63,81,181)
#3F51B5
blu50
rgb(33,150,243)
#2196F3
bll50
rgb(3,169,244)
#03A9F4
cyn50
rgb(0,188,212)
#00BCD4
tal50
rgb(0,150,136)
#009688
grn50
rgb(76,175,80)
#4CAF50
grl50
rgb(139,195,74)
#8BC34A
lim50
rgb(205,220,57)
#CDDC39
yel50
rgb(255,235,59)
#FFEB3B
amb50
rgb(255,193,7)
#FFC107
oge50
rgb(255,152,0)
#FF9800
ogd50
rgb(255,87,34)
#FF5722
bwn50
rgb(121,85,72)
#795548
grb50
rgb(96,125,139)
#607D8B
gry50
rgb(158,158,158)
#9E9E9E

red40
rgb(239,83,80)
#EF5350
pnk40
rgb(236,64,122)
#EC407A
pur40
rgb(171,71,188)
#AB47BC
pud40
rgb(126,87,194)
#7E57C2
ind40
rgb(92,107,192)
#5C6BC0
blu40
rgb(66,165,245)
#42A5F5
bll40
rgb(41,182,246)
#29B6F6
cyn40
rgb(38,198,218)
#26C6DA
tal40
rgb(38,166,154)
#26A69A
grn40
rgb(102,187,106)
#66BB6A
grl40
rgb(156,204,101)
#9CCC65
lim40
rgb(212,225,87)
#D4E157
yel40
rgb(255,238,88)
#FFEE58
amb40
rgb(255,202,40)
#FFCA28
oge40
rgb(255,167,38)
#FFA726
ogd40
rgb(255,112,67)
#FF7043
bwn40
rgb(141,110,99)
#8D6E63
grb40
rgb(120,144,156)
#78909C
gry40
rgb(189,189,189)
#BDBDBD

red30
rgb(229,115,115)
#E57373
pnk30
rgb(240,98,146)
#F06292
pur30
rgb(186,104,200)
#BA68C8
pud30
rgb(149,117,205)
#9575CD
ind30
rgb(121,134,203)
#7986CB
blu30
rgb(100,181,246)
#64B5F6
bll30
rgb(79,195,247)
#4FC3F7
cyn30
rgb(77,208,225)
#4DD0E1
tal30
rgb(77,182,172)
#4DB6AC
grn30
rgb(129,199,132)
#81C784
grl30
rgb(174,213,129)
#AED581
lim30
rgb(220,231,117)
#DCE775
yel30
rgb(255,241,118)
#FFF176
amb30
rgb(255,213,79)
#FFD54F
oge30
rgb(255,183,77)
#FFB74D
ogd30
rgb(255,138,101)
#FF8A65
bwn30
rgb(161,136,127)
#A1887F
grb30
rgb(144,164,174)
#90A4AE
gry30
rgb(224,224,224)
#E0E0E0

red20
rgb(239,154,154)
#EF9A9A
pnk20
rgb(244,143,177)
#F48FB1
pur20
rgb(206,147,216)
#CE93D8
pud20
rgb(179,157,219)
#B39DDB
ind20
rgb(159,168,218)
#9FA8DA
blu20
rgb(144,202,249)
#90CAF9
bll20
rgb(129,212,250)
#81D4FA
cyn20
rgb(128,222,234)
#80DEEA
tal20
rgb(128,203,196)
#80CBC4
grn20
rgb(165,214,167)
#A5D6A7
grl20
rgb(197,225,165)
#C5E1A5
lim20
rgb(230,238,156)
#E6EE9C
yel20
rgb(255,245,157)
#FFF59D
amb20
rgb(255,224,130)
#FFE082
oge20
rgb(255,204,128)
#FFCC80
ogd20
rgb(255,171,145)
#FFAB91
bwn20
rgb(188,170,164)
#BCAAA4
grb20
rgb(176,190,197)
#B0BEC5
gry20
rgb(238,238,238)
#EEEEEE

red10
rgb(255,205,210)
#FFCDD2
pnk10
rgb(248,187,208)
#F8BBD0
pur10
rgb(225,190,231)
#E1BEE7
pud10
rgb(209,196,233)
#D1C4E9
ind10
rgb(197,202,233)
#C5CAE9
blu10
rgb(187,222,251)
#BBDEFB
bll10
rgb(179,229,252)
#B3E5FC
cyn10
rgb(178,235,242)
#B2EBF2
tal10
rgb(178,223,219)
#B2DFDB
grn10
rgb(200,230,201)
#C8E6C9
grl10
rgb(220,237,200)
#DCEDC8
lim10
rgb(240,244,195)
#F0F4C3
yel10
rgb(255,249,196)
#FFF9C4
amb10
rgb(255,236,179)
#FFECB3
oge10
rgb(255,224,178)
#FFE0B2
ogd10
rgb(255,204,188)
#FFCCBC
bwn10
rgb(215,204,200)
#D7CCC8
grb10
rgb(207,216,220)
#CFD8DC
gry10
rgb(245,245,245)
#F5F5F5

red05
rgb(255,235,238)
#FFEBEE
pnk05
rgb(252,228,236)
#FCE4EC
pur05
rgb(243,229,245)
#F3E5F5
pud05
rgb(237,231,246)
#EDE7F6
ind05
rgb(232,234,246)
#E8EAF6
blu05
rgb(227,242,253)
#E3F2FD
bll05
rgb(225,245,254)
#E1F5FE
cyn05
rgb(224,247,250)
#E0F7FA
tal05
rgb(224,242,241)
#E0F2F1
grn05
rgb(232,245,233)
#E8F5E9
grl05
rgb(241,248,233)
#F1F8E9
lim05
rgb(249,251,231)
#F9FBE7
yel05
rgb(255,253,231)
#FFFDE7
amb05
rgb(255,248,225)
#FFF8E1
oge05
rgb(255,243,224)
#FFF3E0
ogd05
rgb(251,233,231)
#FBE9E7
bwn05
rgb(239,235,233)
#EFEBE9
grb05
rgb(236,239,241)
#ECEFF1
gry05
rgb(250,250,250)
#FAFAFA

 

2. Dates and time

At Zipier we keep times as simple as possible.

  • Good   'am' or 'pm'.
  • Avoid   'AM', 'PM', 'a.m.', 'p.m.'.

Combine 'am' or 'pm' with a space between the time. For 'noon', and 'midnight', also have a space.

  • Good   7:30-8:00 pm.
  • Good   7-8 pm.
  • Good   7:30 am to 8:00 pm (separate 'am' and 'pm' times with the word 'to').
  • Good   7 am to 8 pm.
  • Good   12 noon to 8 pm.
  • Avoid   7:00 pm - 8:00 pm (no spaces around dash).
  • Avoid   7:00 pm-8:00 pm (if both are 'pm' then leave the 1st off).
  • Avoid   7:00-8:00 pm (if both times are ':00' then leave them off).
  • Avoid   7-8:30 pm (if one time shows minutes, both should).
  • Avoid   7–8 pm (we don't use –).
  • Avoid   7—8 pm (we don't use —).
  • Avoid   2noon to 8pm (have a space before 'noon' and 'pm').
  • Avoid   noon (don't just write 'noon', put '12 noon').
  • Avoid   12 pm ('12 am' or '12 pm' is confusing, put '12 midnight' or '12 noon').

For day ranges:

  • Good   Mon-Fri.
  • Avoid   Monday to Friday (too verbose).

List the time zone at the end:

  • Good   Mon-Fri, 9 am to 5 pm ET.
  • Avoid   Mon-Fri, PT 9 am to 5 pm.
  • Avoid   'EST', 'EDT' (ET is fine in most cases).
 

3. Font

Zipier's big on keeping things simple.

Zipier uses the same plain sans-serif fonts for all online and print publications.

For main and sub headings use RobotoDraft 400. For paragraphs also use RobotoDraft 400 for a simple clean look.

Also, avoid bold whenever possible (even for headings).

RobotoDraft 100

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

(.,:;?!$&@*) 0123456789

RobotoDraft 400

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

(.,:;?!$&@*) 0123456789

RobotoDraft 900

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

(.,:;?!$&@*) 0123456789

 

4. Icons

Feel free to use any of Zipier's extensive selection of vector icons. Most are from Google's Material Design "Rounded".

See the full size version

 

Here's two different ways to put an icon onto a page.

Example 1

<span class="msk msk_settings red50" style="font-size: 1.55rem; vertical-align: -0.4rem;"></span>

Example 2

<img src="&lt;?=$Z->HTTPS_APPS_HOST?>/msk/versioned/msk_settings/red50/24" style="vertical-align: -0.4rem; font-size: 2rem;">

Example 3

<img src="&lt;?=$Z->HTTPS_APPS_HOST?>/s.png" class="svg_SIGNED" style="width: 1.5rem; height: 1.5rem;" />
 

5. Illustrations

Zipier's commissioned our own set of product illustrations. Feel free to use them in Zipier products as much as you like. If adding to the illustrations library, please follow these guidelines.

 
  1. People: show lots of people.
  2. Happy: smiling, laughing, talking.
  3. Movement: walking, jumping, working.
  4. Everday objects: letter, dog, smart phone, laptop.
  5. Engaged in what they're doing. No awkward smiling at the "audience".
  6. Simple:
    • Keep lines and objects to a minimum.
    • Use lines for people's arms and legs (animals can have full shapes).
    • Use very basic shapes for clothing.
    • Minimal facial features (mouth only).
 
  1. Avoid straight lines.
  2. Line style:
    1. Thickness: 6pt for all lines.
    2. Line shape: Illustrator width profile 1 (pointed oval shape).
    3. Color: grb50, rgb( 96,125,139), #607D8B.
  3. Add lines to indicate motion.
 
  1. Only have shadows on the ground (not on clothing or objects).
  2. Shadows:
    • For white bgs: gry10, rgb( 245,245,245), #F5F5F5.
    • For gray bgs: gry20, rgb( 238,238,238), #EEEEEE.
 
  1. Solid objects: white.
  2. Hair: pnk50, rgb( 233,30,99), #E91E63.
  3. Two complimentary colors (max) from 5% range (below):
red05
rgb(255,235,238)
#FFEBEE
tal05
rgb(224,242,241)
#E0F2F1

pnk05
rgb(252,228,236)
#FCE4EC
grn05
rgb(232,245,233)
#E8F5E9

pur05
rgb(243,229,245)
#F3E5F5
grl05
rgb(241,248,233)
#F1F8E9

bll05
rgb(225,245,254)
#E1F5FE
oge05
rgb(255,243,224)
#FFF3E0

cyn05
rgb(224,247,250)
#E0F7FA
ogd05
rgb(251,233,231)
#FBE9E7

 
  1. Select all, then Object > Path > Simplify: 95%.
  2. .svg file.
  3. Saved to: ..\Dropbox\login images\finals\.
 

Click to enlarge.





 

6. Logo

Zipier's logo is one of our most valuable assets. Give it the space it deserves. Invite it along to all your masterpieces. It could be the start of a beautiful friendship.

On a white or light background, use the dark font logo.

Download logos here



On a black or dark background, use the light font logo.

Please note:

  • Avoid   Don't put the logo over a noisy background image.
  • Avoid   Don't put one color on top of another.
  • Avoid   Don't use black as a background (avoid if possible).
  • Avoid   Don't put on an angle.
  • Avoid   Don't add embelishments like shadows, embossing, etc.
 

7. Scenarios

In some parts of our products or handbooks we put the names of imaginary people to help the sentance flow. Here is our standard list:

  • Carol Customer.
  • Selwyn Self.
  • Zac Zipi.
  • Alex Applicant.
  • Emma Employee.
  • Mandy Manager.
  • Ryan Rule-breaker.
  • Alan Alternative.
 

8. TM symbol

Legal symbols can be a distraction and breaks the flow of the Zipier message.

The TM symbol shouldn't appear in the Zipier logo, or any of the copy. All the legal stuff's covered at the bottom of Zipier's webpages in the fineprint. E.g.:

  • Good   "Zipier Payroll."
  • Avoid   "Zipier™ Payroll."
  • Avoid   "Zipier Payroll™."
 

9. To cap or not to cap

 

Try to not capitalize object types like: org, person, pay batch, project, etc.

 

When writing headings, avoid a capital letter at the front of each word. It seems overkill. No need for a period on the end of a heading either. Proper nouns deserve a capital though.

Wikipedia's got you covered on this: en.wikipedia.org/wiki/Capitalization_in_English. E.g.:

  • Good   "This heading is much nicer"
  • Avoid   "This Heading Has Too Many Capitals"

Also, headings shouldn't have a period (full stop) at the end.

 

If you're doing art work and want to do "ALL CAPITALS" or "all lower case" for effect... that's great. GO FOR IT!

 

The word "FREE" should always be written in full caps if it's mentioned in the context of being a benefit to the customer. E.g.:

  • Good   "Enjoy having FREE payroll."
  • Avoid   "Enjoy having free payroll."
  • Avoid   "Feel FREE to call us." (not a benefit to customer context)
 

For headings or sentances that start with a number, the word following should be capitalized. E.g.:

  • Good   "100 Ways to solve a problem."
  • Avoid   "100 ways to solve a problem."

For headings or sentances that start with a money amount, the word following SHOULDN'T be capitalized. E.g.:

  • Good   "$100 is the cost."
  • Avoid   "$100 Is the cost."

If it's not a full sentance, the word following SHOULDN'T be capitalized. E.g.:

  • Good   "100 hrs"
  • Avoid   "100 Hrs"
 

10. Wording

 

Try to avoid prefixing product names with the word "the". E.g.:

  • Good   "Next download Zipier Desktop and...".
  • Avoid   "Next download the Zipier Desktop and...".
 

Use contractions whenever possible. Be informal. Where possible, use: I'm, they're, it'll, we're, you'll, you're, they'll, etc.

  • Good   "OK".
  • Avoid   "Okay".
  • Avoid   "ok".
 

Numbers below 11 should be written as a word. E.g.:

  • Good   "ten".
  • Avoid   "10".
 

Keyboard shortcuts should be written with:

  • No spaces
  • Use the key CSS class.
  • Use the reference to $Z->ctrlKeyText.

E.g.:

Ctrl+Alt+L

<span class="key"><?=$Z->ctrlKeyText?></span>+<span class="key">Alt</span>+<span class="key">L</span>
 
$SharedPage->metaDescriptionText = "Your description here";
$SharedPage->metaKeywordsText = "your, keywords, here";
 

Linking directly to Zipier features helps the customer folow the documentation more easily. E.g.:

Code:

<?=\Func\ZipierLink::build('project', 'reviewers')?>
  • The 1st parameter must be one of: device, desk, location, bookmark, project, org, person, batch, paystub, applicant, timesheet, ap.
  • The 2nd parameter can be found from the last part of the URL or from the field name on the side of the form.
 

All numbered and bullet lists should start with a capital letter, and end with a period (full stop).

Why: When the text from lists gets pushed into Zipier's live chat, the line breaks and other formatting gets lost. By starting each with a capital, and ending with a period, it helps distinguish each as a distinct item.

 

The following CAN'T be used in FAQ headings or help file names:

  • / or \ (forward or back slash).
  • $ (dollar).
  • £ (pound).
  • # (hash).
  • ? (question).
  • " (double quote).
  • & (ampersand).
  • * (asterisk).
  • {} (curly brackets).
  • <> (angle brackets).
  • -- (double dash).
  • _ (underscore).
  • : (colon).
  • ^ (caret).
  • + (plus).
  • | (pipe).
  • % (percent).

The following CAN be used:

  • ! (exclamation).
  • ' (single quote).
  • () (normal brackets).
  • [] (square brackets).
  • - (single dash).
  • ; (semicolon).
  • @ (at sign).
  • ~ (tilde).
 
  • Full product name:
    • "Zipier Cloud Co-workers".
  • Referring to the service (use lower case):
    • "..no matter which co-worker service you choose..."
  • Referring to the phone line:
    • "Zipier's FREE Cloud Co-workers sales line..."
  • No need to reapeat the word "Zipier" if used earlier in the sentance:
    • "Only Zipier gives you quality Cloud Co-workers."
  • No need to state the word "Zipier" if referring to co-workers belonging to the client:
    • "All clients must provide a uniform for their Cloud Co-workers."
    • "...you've got the option for your Cloud Co-workers to..."
   

11. Z. Conclusion

We hope you found these brand guidelines clear and useful.

Thanks again to all our artists, design teams, and partners for all your hard work.

For suggestions or clarifications, just reach out to your regular Zipier contact or email us at hello@zipier.com.

Share this:

Was this article helpful?

Yes No

Shared under Creative Commons BY-SA
www.zipier.com/handbook/Zipier_brand_book/