cafemom mobile style guide - jessewillmon.com€¦ · cafemom colors mobile style guide d4e4a3...
TRANSCRIPT
CAFEMOMMOBILESTYLEGUIDE
AUGUST 13, 2012
Phase 1
COLORSCAFEMOMMOBILESTYLEGUIDE
d4e4a3 77a208 f5fce0 e7f2c5 ffffff
ffcc66 a98130
ff6c64 d13e3e fbeeee
444444 666666 999999
faf8ef
29b6bf c6e9ed
f0e7d8
cccccc
Phase 1
FONTS
ASAP BOLD
Arial BoldArial Regular
CAFEMOMMOBILESTYLEGUIDE
20px
9px
20px
10px
PATTERN SPACERS
REPEATING PATTERN
Spacers come in 2 varieties on the mobile site. Either they are 20px tall or 10px tallIt is a repeting pattern that goes behind individual modules dropshadows
Phase 1
CAFEMOMMOBILESTYLEGUIDE
Phase 1
01 NAV BARCAFEMOMMOBILESTYLEGUIDE
01 NAV BAR LOGGED IN
01A NAV BAR NOT LOGGED IN ON HOMEPAGE
01B NAV BAR LOGGED IN BUTWITH NO USER NOTIFICATIONS
01D NAV BAR FOR REGISTRATIONPAGES ONLY
01C NAV BAR NOT LOGGED IN ONEVERY PAGE BUTHOME PAGE
Phase 1
01 NAV BARCAFEMOMMOBILESTYLEGUIDE
50px
40px
79px115px 5125px 25px
23px
5px drop shadow
6px
5px
5px
6px
3px
5px5px5px
ASAP bold 15px.025em letter spacingBox #d4e4a3copy #77a208
arial bold 14px0em letter spacingbox #ff6c64copy #ffffff
all menu items centered verticaly in box
5px defaultthis is the expand point
Phase 1
01E NAV BAR DROP DOWNSMY STUFF
CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
5px drop shadowBox #d4e4a3
ASAP bold 15px.025em letter spacingBox #77a208copy #ffffff
arrow goes over the shadow ALWAYS
ASAP bold 13px.025em letter spacingcopy #77a208
arial bold 12pxl14px line height0em letter spacingcopy 77a208
This nav bar should be 3 evenly distributed columns to the width of the phonebut not matter what each columns of items should be indented 10 px from the edge of the column with a 10px buffer for the font to wrap on each column
Phase 1
01E NAV BAR DROP DOWNSMY STUFF
CAFEMOMMOBILESTYLEGUIDE
26px3px
15px
18px
20px
15px
10px 10px
10pxbuffer
10pxbuffer
10pxbuffer
10px
Box #f5fce0
Box & line #77z208
10pxfor closebuton aswell
Phase 1
01F NAV BAR DROP DOWNSNOTIFICATIONS
CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
5px drop shadow
Box #d4e4a3
Arial bold 13px0 em letter spacingBox #ff6c4copy #ffffff
arrow goes over the shadow ALWAYS
ASAP bold 13px.025em letter spacingcopy #77a208
This nav bar should be 2 evenly distributed columns to the width of the phonebut not matter what each columns of items should be indented 10 px from the edge of the column with a 10px buffer for the font to wrap on each column
Phase 1
01F NAV BAR DROP DOWNSNOTIFICATIONS
CAFEMOMMOBILESTYLEGUIDE
26px3px
15px
18px
20px
15px
19px
10px
30px3px
text centerd to pink box
box #e7f2c5
10px
10pxbuffer
10pxbuffer
Box #f5fce0
Box & line #77z208
arial bold 14px0em letter spacingbox #ff6c64copy #ffffff
arial bold 14px0em letter spacingbox #77a208copy #ffffff
WITH NUMBER NO NUMBER
arial bold 12px14px line height0em letter spacingcopy 77a208
LINK STYLE
Phase 1
01GNAV BAR DROP DOWNSMY MENU
CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
5px drop shadow
Box #d4e4a3
ASAP bold 15px.025em letter spacingBox #77a208copy #ffffff
arrow goes over the shadow ALWAYS
ASAP bold 13px.025em letter spacingcopy #77a208
This nav bar should be 3 evenly distributed columns to the width of the phonebut not matter what each columns of items should be indented 10 px from the edge of the column with a 10px buffer for the font to wrap on each column
Phase 1
01GNAV BAR DROP DOWNSMY MENU
CAFEMOMMOBILESTYLEGUIDE
26px3px
15px
18px
20px
15px
15px
10px 10px
10pxbuffer
10pxbuffer
10pxbuffer
10pxfor closebuton aswell
10px
Box & line #77z208
arial bold 12px14px line height0em letter spacingcopy 77a208
10 LINK STYLE
Phase 1
01H NAV BAR DROP DOWNSSEARCH
CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
5px drop shadow
Box #d4e4a3
Box #77a208icon #f5fce0
arrow goes over the shadow ALWAYS
ASAP bold 13px.025em letter spacingcopy #77a208
Phase 1
01H NAV BAR DROP DOWNSSEARCH
CAFEMOMMOBILESTYLEGUIDE
26px3px
15px
18px
20px
10px
search box stretches full width
10pxbuffer
10pxfor closebuton aswell
Box #f5fce0
Box & line #77z208
arial bold 12px#999999
20 SQUARE BUTTON STYLE
Phase 1
02 FOOTERCAFEMOMMOBILESTYLEGUIDE
5px drop shadow
15px
15px
Box #f5fce0
10px
Phase 1
02 FOOTERCAFEMOMMOBILESTYLEGUIDE
20px
20px
10px
20px
09 LINK STYLE
12 COPY STYLE
Phase 1
03 WELCOME BARCAFEMOMMOBILESTYLEGUIDE
03 WELCOME BARDEFAULT
03A WELCOME BARLOGGED INWITH THANKS
03B WELCOME BARNOT LOGGED IN
max width 60picture shrinks to fit
this is the expand point
5px side shadow5pxdrop shadow
5px
10px 40px
Box #faf8ef
5pxdrop shadow
5pxdrop shadow
arial bold 12px14px line height0em letter spacingcopy #444444
arial regular 10px0em letter spacingcopy #a98130
5px
DEFAULT
WITH THANKS
PRELOG IN
Phase 1
03 WELCOME BARCAFEMOMMOBILESTYLEGUIDE
10px
10px
10px
10px 10px
10px
10px 10px
20 SQUARE BUTTON STYLE
19 ARROW BUTTON STYLE
12 COPY STYLE
Box #ffcc66
Box #d4e4a3
10px
10px
5pxdrop shadow
10px
10px 5px
10px
10px
5pxdrop shadow
10px
10px
Phase 1
04 NOTIFICATION BARCAFEMOMMOBILESTYLEGUIDE
Box #ffcc66
arial bold 12px14px line height0em letter spacingcopy #444444
Arial bold 13px0 em letter spacingBox #ff6c4copy #ffffff
This nav bar should be 2 evenly distributed columns to the width of the phonebut not matter what each columns of items should be indented 10 px from the edge of the column with a 10px buffer for the font to wrap on each column
10px 10px
10pxbuffer
10pxbuffer
19px
30px
Arial bold 13px0 em letter spacingBox #ffcc00copy #a98130
19px
30px
Phase 1
05 MESSAGE INDICATORCAFEMOMMOBILESTYLEGUIDE
arial bold 12px14px line height0em letter spacingcopy #999999
5pxdrop shadow
10px
10px
5px 5px
10px10px
5px
5px
ASAP bold 24px.025em letter spacing24 line heightBox #29b6bfcopy #ffffff
5px drop shadow
Phase 1
06 MAIN HEADERSCAFEMOMMOBILESTYLEGUIDE
10px
10px
10px 10px
10px 10px
5px drop shadow
10px
10px
5px5px drop shadow
10px
10px
SPONSOR LOGO AREA 120x50
ASAP bold 17px.025em letter spacing17line heightBox #c6e9edcopy #29b6bf
Arial bold 14px0em letter spacing16 line heightcopy #29b6bf
Phase 1
07 SUBHEADER
08 THIRD LEVEL HEADER
CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
10px
20px
10px
Zip Code
Phase 1
09 TO 15 STYLESCAFEMOMMOBILESTYLEGUIDE
arial bold 12px14px line height0em letter spacingcopy 77a208
arial bold 12px14px line height0em letter spacingcopy 666666
10 LINK STYLE
arial regular 11px12px line height0em letter spacing#d4e4a3
arial bold 11px12px line height0em letter spacing#ff6c64
#ff6c64
09 SMALLLINK STYLE
arial regular 12px18px line height0em letter spacingcopy #666666
12 COPY STYLE
13 FORM ERROR STYLE
Arial bold 13px0 em letter spacingBox #ffcc00copy #a98130
11 FORMFIELD STYLE
arial bold 11px12px line height0em letter spacing#ff6c64
arial bold 11px12px line height0em letter spacing#aa8131
NOTE:ALL INDICATOR TEXT SHOULD BE OFF SET TO CENTER WITH THE LINE OF TEXT THAT IT IS NEXT TO
NOTE:ALWAYS CENTERNUMBER VERTICALLY AND HORIZONTALLY
14 INDICATOR TEXT
15 IN NAVIGATION INDICATOR
Arial bold 13px0 em letter spacingBox #ff6c64copy #ffffff
19px
30px box #e7f2c5
3px
15px
15px
15px
NOTE:ALWAYS CENTERNUMBER VERTICALLY AND HORIZONTALLYIN THE BOX
16 IN PAGE INDICATOR 17 FORM FIELD ACTIVE INSTRUCTIONS
Arial bold 13px0 em letter spacingBox #f0e7d8copy #ff6c4
Arial regular 12pxline height 16px0 em letter spacingBox #29b6bfcopy #ffffff
02 LINK STYLE
19px7px voicebubble
20 px
30px
Phase 1
16 TO 20 STYLESCAFEMOMMOBILESTYLEGUIDE
ASAP bold 13px.025em letter spacingcopy #a98130box # ffcc66
18px
10px 10px
20 SQUARE BUTTON STYLE
18 LIST STYLE
ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3
ASAP bold 13px.025em letter spacingcopy #f5fce0
22 px
10px
5px
11px arrow
19 ARROW BUTTON STYLE
22 px
10px
5px
11px arrow
INACTIVE STYLE
ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3
18px
10px 10px
ASAP bold 13px.025em letter spacingcopy #ff6c64box # fbeeee
18px
10px
10px 10px
10px
ASAP bold 13px.025em letter spacingcopy #999999box #f0e7d8
5px5px
15px
10px 3px
ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3
Phase 1
21 IN PAGE EXPANDER CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
23px
Phase 1
22 VERTICAL SLIDERCAFEMOMMOBILESTYLEGUIDE
arrow goes over the shadow ALWAYS
19 ARROW BUTTON STYLE
Phase 1
22 VERTICAL SLIDERCAFEMOMMOBILESTYLEGUIDE
10px
20 px to start of arrow
20px
20px
10px
10px
10px
20px
ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3
ASAP bold 13px.025em letter spacingBox #77a208copy #ffffff
5px drop shadow
23px
5px drop shadow
5px drop shadow
23px
23px
18 LIST STYLE
3px
10 LINK STYLE
10px
10px
Arial bold 18px0 em letter spacingcopy #999999NOTEarrow is not a >but is a › like on the moms matter siteand should be set to be 1px lower than the links so it lines up right
10px 5px 5px 5px
Phase 1
23 BREADCRUMBCAFEMOMMOBILESTYLEGUIDE
5px drop shadow
29px
10px
10px
arrow goes over the shadow ALWAYS
23px
ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3
ASAP bold 13px.025em letter spacingBox #77a208copy #ffffff
Phase 1
24 TAB NAVIGATIONCAFEMOMMOBILESTYLEGUIDE
Box #f5fce0
20px
20 px to start of arrow
5px drop shadow3px
10px 10px5px
10px
3px
20 SQUARE BUTTON STYLE
30 px to start of arrow
10px
10px
arrow goes over the shadow ALWAYS
26px
ASAP bold 13px.025em letter spacingBox #77a208copy #ffffff
Phase 1
25 PULL DOWN NAVIGATIONCAFEMOMMOBILESTYLEGUIDE
Box #f5fce0
5px drop shadow4px
4px
10px 10px10px
3px 3px 3px 3px
20 SQUARE BUTTON STYLE
20px
28px
Phase 1
26 EXPANDER WITH MULTIPLE OPTIONSCAFEMOMMOBILESTYLEGUIDE
Box #f5fce0
5px drop shadow5px
5px
10px 10px
arrow goes over the shadow ALWAYS
ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3
ASAP bold 13px.025em letter spacingBox #77a208copy #ffffff
10 LINK STYLE
3px
20 SQUARE BUTTON STYLE
28px
Phase 1
27 EXPANDED MODULECAFEMOMMOBILESTYLEGUIDE
5px
5px
20px 10px 10px
10px
10px
20px
10px10px
5px drop shadow
18px
5px drop shadow
arrow goes over the shadow ALWAYS
copy #ffffffbox #d13e3e
icon #fbeeeebox # ff6c64
20 SQUARE BUTTON STYLE
10px
20px
23px
5px drop shadow
18px
3px5px drop shadow
Phase 1
28 ADMIN INDICATOR
29 ADMIN EXPANDED
CAFEMOMMOBILESTYLEGUIDE
20 SQUARE BUTTON STYLE
10px 10px 10px 10px 10px
Box #f5fce0
19 ARROW BUTTON STYLE
10 LINK STYLEarial regular 11px12px line height0em letter spacing#999999
5px drop shadow
10px
10px
10px
20px
Phase 1
30 PREVIOUS NEXT WITH POSITION INDICATORCAFEMOMMOBILESTYLEGUIDE
Box #f5fce0
19 ARROW BUTTON STYLE
23 BREADCRUMB
5px drop shadow
5px drop shadow
10px
10px
10px
20px
20px
Phase 1
31 PREVIOUS NEXT WITH BREADCRUMBCAFEMOMMOBILESTYLEGUIDE
12 COPY STYLE
16 IN PAGE INDICATOR
Arial bold 14pxline height 16px0 em letter spacingcopy #444444
Arial bold 14pxline height 16px0 em letter spacingcopy #444444
Picture 134 x 81px 10px
10px
10px
NOTE:DOTS CENTER VERTICALLY AND HORIZONTALLY IN BAR
10px 10px
15px5px drop shadow
Phase 1
32 HORIZONTAL SCROLLERCAFEMOMMOBILESTYLEGUIDE
dot #77a208active dot #faf8efbox # d4e4a3
4px4px
Phase 1
CAFEMOMMOBILESTYLEGUIDE
10px
10px10px
10px10px
10px10px
10px
Arial bold 14pxline height 16px0 em letter spacingcopy #444444
20px 10px
33 LIST WITH PICTURES
14 INDICATOR TEXT
Box #faf8ef
10px
10px10px
10px
20px 10px
34 LIST WITHOUT PICTURES
16 IN PAGE INDICATORBox #faf8ef
Phase 1
CAFEMOMMOBILESTYLEGUIDE
Phase 1
CAFEMOMMOBILESTYLEGUIDE
35 POST STYLE
Phase 1
CAFEMOMMOBILESTYLEGUIDE
35 POST STYLE
20px
10px
10px10px
10px 10px10px
26 EXPANDER WITH MULTIPLE OPTIONS
Phase 1
CAFEMOMMOBILESTYLEGUIDE
35 POST STYLE
09 SMALLLINK STYLE
12 COPY STYLE
Phase 1
CAFEMOMMOBILESTYLEGUIDE
36 REPLY STYLE
Phase 1
CAFEMOMMOBILESTYLEGUIDE
36 REPLY STYLE
20px
20px
10px
10px
10px
10px
10px
10px 10px10px
26 EXPANDER WITH MULTIPLE OPTIONS
5px drop shadow
5px drop shadow5px drop shadow
26 EXPANDER WITH MULTIPLE OPTIONS
10px10px
10px
Box #faf8ef
Phase 1
CAFEMOMMOBILESTYLEGUIDE
36 REPLY STYLE
09 SMALLLINK STYLE
12 COPY STYLE
26 EXPANDER WITH MULTIPLE OPTIONS
Phase 1
CAFEMOMMOBILESTYLEGUIDE
5px drop shadow
50px
20px
37 MIDPAGE AD
Phase 1
CAFEMOMMOBILESTYLEGUIDE
100px15px
30px
57 x 57 px icon with 1px stroke5px drop shadow
38 HOME SCREEN MODULE
ASAP bold 13px.025em letter spacingcopy #77a208
ASAP bold 14pxline height 14px.025em letter spacingcopy #77a208
ASAP bold 14pxline height 14px.025em letter spacingcopy #ffffffCafeMom Mobile Text #ffcc66
Arial bold 14pxline height 14px0em letter spacingcopy #444444
Box #77a208
Box #d4e4a3