CAFEMOM MOBILE STYLE GUIDE

Transcription

1 AUGUST 13, 2012

2 COLORS d4e4a3 77a208 f5fce0 e7f2c5 ffcc66 a98130 f0e7d8 faf8ef cccccc 29b6bf c6e9ed ff6c64 d13e3e ffffff fbeeee

3 FONTS ASAP BOLD Arial Bold Arial Regular

4 PATTERN SPACERS Spacers come in 2 varieties on the mobile site. Either they are tall or tall It is a repeting pattern that goes behind individual modules dropshadows REPEATING PATTERN 9px

5 01 NAV BAR 01 NAV BAR LOGGED IN 01A NAV BAR NOT LOGGED IN ON HOMEPAGE 01B NAV BAR LOGGED IN BUT WITH NO USER NOTIFICATIONS 01C NAV BAR NOT LOGGED IN ON EVERY PAGE BUT HOME PAGE 01D NAV BAR FOR REGISTRATION PAGES ONLY

6 01 NAV BAR 50px 6px 23px 3px 11 40px 6px 79px default this is the expand point all menu items centered verticaly in box ASAP bold 1 Box #d4e4a3 copy #77a208 arial bold 14px 0em letter spacing box #ff6c64 copy #ffffff

7 01E NAV BAR DROP DOWNS MY STUFF

8 01E NAV BAR DROP DOWNS MY STUFF 26px Box & line #77z px 1 Box #f5fce0 18px Box #d4e4a3 for close buton as well buffer buffer buffer This nav bar should be 3 evenly distributed columns to the width of the phone but not matter what each columns of items should be indented 10 px from the edge of the column with a buffer for the font to wrap on each column arial bold 12px l14px line height 0em letter spacing copy 77a208 ASAP bold 13px copy #77a208 ASAP bold 1 Box #77a208 copy #ffffff arrow goes over the shadow ALWAYS

9 01F NAV BAR DROP DOWNS NOTIFICATIONS

10 01F NAV BAR DROP DOWNS NOTIFICATIONS 26px Box & line #77z px 1 Box #f5fce0 18px Box #d4e4a3 LINK buffer arial bold 12px 14px line height 0em letter spacing copy 77a208 buffer This nav bar should be 2 evenly distributed columns to the width of the phone but not matter what each columns of items should be indented 10 px from the edge of the column with a buffer for the font to wrap on each column WITH NUMBER 19px arial bold 14px 0em letter spacing box #ff6c64 copy #ffffff box #e7f2c5 30px 3px text centerd to pink box arial bold 14px 0em letter spacing box #77a208 copy #ffffff Arial bold 13px 0 em letter spacing Box #ff6c4 copy #ffffff ASAP bold 13px copy #77a208 arrow goes over the shadow ALWAYS NO NUMBER

11 01GNAV BAR DROP DOWNS MY MENU

12 01GNAV BAR DROP DOWNS MY MENU 26px Box & line #77z px 1 1 Box #d4e4a3 18px for close buton as well buffer buffer buffer This nav bar should be 3 evenly distributed columns to the width of the phone but not matter what each columns of items should be indented 10 px from the edge of the column with a buffer for the font to wrap on each column 10 LINK arial bold 12px 14px line height 0em letter spacing copy 77a208 ASAP bold 13px copy #77a208 ASAP bold 1 Box #77a208 copy #ffffff arrow goes over the shadow ALWAYS

13 01H NAV BAR DROP DOWNS SEARCH

14 01H NAV BAR DROP DOWNS SEARCH 26px Box & line #77z px Box #f5fce0 18px Box #d4e4a3 search box stretches full width for close buton as well arial bold 12px # buffer 20 SQUARE BUTTON ASAP bold 13px copy #77a208 Box #77a208 icon #f5fce0 arrow goes over the shadow ALWAYS

15 02 FOOTER

16 02 FOOTER 1 1 Box #f5fce0 12 COPY 09 LINK

17 03 WELCOME BAR 03 WELCOME BAR DEFAULT 03A WELCOME BAR LOGGED IN WITH THANKS 03B WELCOME BAR NOT LOGGED IN

18 03 WELCOME BAR DEFAULT Box #d4e4a3 drop shadow side shadow max width 60 picture shrinks to fit arial regular arial bold 12px 40px 0em letter spacing 14px line height copy #a em letter spacing copy # Box #ffcc66 this is the expand point WITH THANKS 12 COPY drop shadow Box #faf8ef PRELOG IN drop shadow 19 ARROW BUTTON 20 SQUARE BUTTON

19 04 NOTIFICATION BAR drop shadow arial bold 12px 14px line height 0em letter spacing copy # Box #ffcc66 drop shadow

20 05 MESSAGE INDICATOR drop shadow buffer buffer This nav bar should be 2 evenly distributed columns to the width of the phone but not matter what each columns of items should be indented 10 px from the edge of the column with a buffer for the font to wrap on each column 19px 30px Arial bold 13px 0 em letter spacing Box #ff6c4 copy #ffffff 19px 30px Arial bold 13px 0 em letter spacing Box #ffcc00 copy #a98130 arial bold 12px 14px line height 0em letter spacing copy #999999

21 06 MAIN HEADERS ASAP bold 24px 24 line height Box #29b6bf copy #ffffff SPONSOR LOGO AREA 120x50

22 07 SUBHEADER ASAP bold 17px 17line height Box #c6e9ed copy #29b6bf 08 THIRD LEVEL HEADER Zip Code Arial bold 14px 0em letter spacing 16 line height copy #29b6bf

23 09 TO 15 S 09 SMALL LINK arial regular 11px 12px line height 0em letter spacing #d4e4a3 10 LINK arial bold 12px 14px line height 0em letter spacing copy 77a FORM FIELD arial bold 12px 14px line height 0em letter spacing copy #ff6c64 12 COPY arial regular 12px 18px line height 0em letter spacing copy # FORM ERROR 14 INDICATOR TEXT arial bold 11px 12px line height 0em letter spacing #ff6c64 arial bold 11px 12px line height 0em letter spacing #aa8131 arial bold 11px 12px line height 0em letter spacing #ff6c64 NOTE: ALL INDICATOR TEXT SHOULD BE OFF SET TO CENTER WITH THE LINE OF TEXT THAT IT IS NEXT TO 15 IN NAVIGATION INDICATOR 19px 30px Arial bold 13px 0 em letter spacing Box #ff6c64 copy #ffffff box #e7f2c5 Arial bold 13px 0 em letter spacing Box #ffcc00 copy #a98130 NOTE: ALWAYS CENTER NUMBER VERTICALLY AND HORIZONTALLY

24 16 TO 20 S 16 IN PAGE INDICATOR 17 FORM FIELD ACTIVE INSTRUCTIONS 20 px 19px 7px voice bubble 18 LIST 1 30px Arial bold 13px 0 em letter spacing Box #f0e7d8 copy #ff6c4 1 Arial regular 12px line height 16px 0 em letter spacing Box #29b6bf copy #ffffff NOTE: ALWAYS CENTER NUMBER VERTICALLY AND HORIZONTALLY IN THE BOX LINK 20 SQUARE BUTTON 19 ARROW BUTTON 22 px ASAP bold 13px copy #77a208 box # d4e4a3 11px arrow 18px 18px 22 px 11px arrow 18px ASAP bold 13px copy #a98130 box # ffcc66 ASAP bold 13px copy #77a208 box # d4e4a3 ASAP bold 13px copy #ff6c64 box # fbeeee INACTIVE ASAP bold 13px copy #f5fce0 3px ASAP bold 13px copy # box #f0e7d8

25 21 IN PAGE EXPANDER 23px 3px ASAP bold 13px copy #77a208 box # d4e4a3

26 22 VERTICAL SLIDER

27 22 VERTICAL SLIDER ASAP bold 13px Box #77a208 copy #ffffff 23px 20 px to start of arrow 18 LIST 19 ARROW BUTTON 23px 23px 3px ASAP bold 13px copy #77a208 box # d4e4a3 arrow goes over the shadow ALWAYS

28 23 BREADCRUMB 29px 10 LINK Arial bold 18px 0 em letter spacing copy # NOTE arrow is not a > but is a like on the moms matter site and should be set to be 1px lower than the links so it lines up right

29 24 TAB NAVIGATION 23px 3px 20 px to start of arrow ASAP bold 13px copy #77a208 box # d4e4a3 ASAP bold 13px Box #77a208 copy #ffffff Box #f5fce0 arrow goes over the shadow ALWAYS

30 25 PULL DOWN NAVIGATION 4px 4px 26px 3px 30 px to start of arrow ASAP bold 13px Box #77a208 copy #ffffff 20 SQUARE BUTTON Box #f5fce0 arrow goes over the shadow ALWAYS

31 26 EXPANDER WITH MULTIPLE OPTIONS 28px 3px 3px 3px 3px 20 SQUARE BUTTON Box #f5fce0

32 27 EXPANDED MODULE ASAP bold 13px Box #77a208 copy #ffffff 28px 3px ASAP bold 13px copy #77a208 box # d4e4a3 18px 10 LINK 20 SQUARE BUTTON arrow goes over the shadow ALWAYS

33 28 ADMIN INDICATOR icon #fbeeee box # ff6c64 20 SQUARE BUTTON 29 ADMIN EXPANDED 20 SQUARE BUTTON copy #ffffff box #d13e3e 23px 3px 18px arrow goes over the shadow ALWAYS

34 30 PREVIOUS NEXT WITH POSITION INDICATOR 19 ARROW BUTTON Box #f5fce0 10 LINK arial regular 11px 12px line height 0em letter spacing #999999

35 31 PREVIOUS NEXT WITH BREADCRUMB 19 ARROW BUTTON Box #f5fce0 23 BREADCRUMB

36 32 HORIZONTAL SCROLLER Picture 134 x 81px Arial bold 14px line height 16px 0 em letter spacing copy # px 4px dot #77a208 active dot #faf8ef box # d4e4a3 16 IN PAGE INDICATOR 1 NOTE: DOTS CENTER VERTICALLY AND HORIZONTALLY IN BAR Arial bold 14px line height 16px 0 em letter spacing copy # COPY

37 33 LIST WITH PICTURES 14 INDICATOR TEXT Box #faf8ef Arial bold 14px line height 16px 0 em letter spacing copy #444444

38 34 LIST WITHOUT PICTURES Box #faf8ef 16 IN PAGE INDICATOR

39 35 POST

40 35 POST 26 EXPANDER WITH MULTIPLE OPTIONS

41 35 POST 12 COPY 09 SMALL LINK

42 36 REPLY

43 36 REPLY Box #faf8ef 26 EXPANDER WITH MULTIPLE OPTIONS 26 EXPANDER WITH MULTIPLE OPTIONS

44 36 REPLY 12 COPY 09 SMALL LINK 26 EXPANDER WITH MULTIPLE OPTIONS

45 37 MIDPAGE AD 50px

46 38 HOME SCREEN MODULE ASAP bold 14px line height 14px copy #ffffff CafeMom Mobile Text #ffcc66 Box #77a208 30px 100px 1 57 x 57 px icon with 1px stroke Box #d4e4a3 ASAP bold 13px copy #77a208 ASAP bold 14px line height 14px copy #77a208 Arial bold 14px line height 14px 0em letter spacing copy #444444