cafemom mobile style guide - jessewillmon.com€¦ · cafemom colors mobile style guide d4e4a3...

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


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


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


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


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


5px drop shadow

5px drop shadow

Box #d4e4a3

Arial bold 13px0 em letter spacingBox #ff6c4copy #ffffff




Phase 1

01F NAV BAR DROP DOWNSNOTIFICATIONS


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


5px drop shadow

5px drop shadow

Box #d4e4a3





Phase 1

01GNAV BAR DROP DOWNSMY MENU


26px3px

15px

18px

20px

15px

15px

10px 10px

10pxbuffer

10pxbuffer

10pxbuffer


10px

Box & line #77z208


10 LINK STYLE

Phase 1

01H NAV BAR DROP DOWNSSEARCH


5px drop shadow

5px drop shadow

Box #d4e4a3

Box #77a208icon #f5fce0



Phase 1

01H NAV BAR DROP DOWNSSEARCH


26px3px

15px

18px

20px

10px

search box stretches full width

10pxbuffer


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


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




10px 10px

10pxbuffer

10pxbuffer

19px

30px

Arial bold 13px0 em letter spacingBox #ffcc00copy #a98130

19px

30px

Phase 1

05 MESSAGE INDICATORCAFEMOMMOBILESTYLEGUIDE


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


5px drop shadow

10px

20px

10px

Zip Code

Phase 1

09 TO 15 STYLESCAFEMOMMOBILESTYLEGUIDE


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


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


18 LIST STYLE

ASAP bold 13px.025em letter spacingcopy #77a208box # d4e4a3

ASAP bold 13px.025em letter spacingcopy #f5fce0

22 px

10px

5px

11px arrow


22 px

10px

5px

11px arrow

INACTIVE STYLE


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


Phase 1

21 IN PAGE EXPANDER CAFEMOMMOBILESTYLEGUIDE

5px drop shadow

23px

Phase 1

22 VERTICAL SLIDERCAFEMOMMOBILESTYLEGUIDE



Phase 1

22 VERTICAL SLIDERCAFEMOMMOBILESTYLEGUIDE

10px

20 px to start of arrow

20px

20px

10px

10px

10px

20px



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


23px



Phase 1

24 TAB NAVIGATIONCAFEMOMMOBILESTYLEGUIDE

Box #f5fce0

20px


5px drop shadow3px

10px 10px5px

10px

3px



10px

10px


26px


Phase 1

25 PULL DOWN NAVIGATIONCAFEMOMMOBILESTYLEGUIDE

Box #f5fce0

5px drop shadow4px

4px

10px 10px10px

3px 3px 3px 3px


20px

28px

Phase 1

26 EXPANDER WITH MULTIPLE OPTIONSCAFEMOMMOBILESTYLEGUIDE

Box #f5fce0

5px drop shadow5px

5px

10px 10px




10 LINK STYLE

3px


28px

Phase 1

27 EXPANDED MODULECAFEMOMMOBILESTYLEGUIDE

5px

5px

20px 10px 10px

10px

10px

20px

10px10px

5px drop shadow

18px

5px drop shadow


copy #ffffffbox #d13e3e

icon #fbeeeebox # ff6c64


10px

20px

23px

5px drop shadow

18px

3px5px drop shadow

Phase 1

28 ADMIN INDICATOR

29 ADMIN EXPANDED



10px 10px 10px 10px 10px

Box #f5fce0


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


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


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


10px

10px10px

10px10px

10px10px

10px


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


Phase 1


35 POST STYLE

Phase 1


35 POST STYLE

20px

10px

10px10px

10px 10px10px

26 EXPANDER WITH MULTIPLE OPTIONS

Phase 1


35 POST STYLE

09 SMALLLINK STYLE

12 COPY STYLE

Phase 1


36 REPLY STYLE

Phase 1


36 REPLY STYLE

20px

20px

10px

10px

10px

10px

10px

10px 10px10px


5px drop shadow

5px drop shadow5px drop shadow


10px10px

10px

Box #faf8ef

Phase 1


36 REPLY STYLE

09 SMALLLINK STYLE

12 COPY STYLE


Phase 1


5px drop shadow

50px

20px

37 MIDPAGE AD

Phase 1


100px15px

30px

57 x 57 px icon with 1px stroke5px drop shadow

38 HOME SCREEN MODULE


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

cafemom mobile style guide - jessewillmon.com€¦ · cafemom colors mobile style guide d4e4a3...

Documents