Tp Style Guide 110308

style guide v0.1 | 11.03.2008

Home Pg

TakePart.com | Style Guide | 11.03.2008 | pg.2

fade left/right edges to 9EAA3E when browser window is >1900 wide in general, 30px padding above and below content

img 221x173px

img 227x86px

img 420x236px

fade left/right edges to 414B0E when browser window is >1900 wide

bkgd img height 1200px

bottom edge of bkgd img fades to black

site width 927px bkgd img width 1900px

Landing Pg, Issue

TBD

thumbnail 48x48px icon 16x16px

TakePart.com | Style Guide | 11.03.2008 | pg.3

Content View Pg

TakePart.com | Style Guide | 11.03.2008 | pg.4

thumbnail 48x48px

hero/main content width = 640px height = variable

list width = 927px height = variable

related/supporting media

Content Type / Video

TakePart.com | Style Guide | 11.03.2008 | pg.5

TakePart player

video player 16:9 ratio 640x360px

column width 640px

Content Type / Audio

TakePart.com | Style Guide | 11.03.2008 | pg.6

TakePart player

img 4:3 ratio 640x480px only appears if img is uploaded with audio; “Play Audio “ bug is added to img; entire img is clickable to play audio

column width 640px

Content Type / Photo Gallery - Multiple Photos

thumbnail 48x48px

column width 640px

TakePart.com | Style Guide | 11.03.2008 | pg.7

Content Type / Photo Gallery - Enlarged Photo

TakePart.com | Style Guide | 11.03.2008 | pg.8

img 4:3 ratio max 640px wide max 480px tall

base 987x700px

column width 640px landscape

lightbox

portrait

Content Type / Photo Gallery - Single Photo

img 4:3 ratio max 640px wide max 480px tall see previous pg for treatment of landscape vs. portrait imgs

column width 640px

TakePart.com | Style Guide | 11.03.2008 | pg.9

Content Type / Text

TakePart.com | Style Guide | 11.03.2008 | pg.10

img 4:3 ratio max 360px wide max 270px tall

when text has no related/supporting content, column width = 927px

Content Type / Video

TakePart.com | Style Guide | 11.03.2008 | pg.11

TakePart player

video player 16:9 ratio 640x360px

column width 640px

Content List, default

TakePart.com | Style Guide | 11.03.2008 | pg.12

content bar minimized width = 927px height = 52px thumbnail 48x48px icon 16x16px

numbered list

non-numbered list

Content List, expanded bar

TakePart.com | Style Guide | 11.03.2008 | pg.13

all content types fit here and follow the specs on previous pgs

expanded panel width 987px

Profile - Person Pg

avatar 115x115px

img 234x95px

thumbnail 48x48px icon 16x16px prioritized content bar see content bar states

no background img as in home, landing pg, etc.

TakePart.com | Style Guide | 11.03.2008 | pg.14

Dashboard Home Pg

img 234x95px prioritized content bar see content bar states

no background img as in home, landing pg, etc.

TakePart.com | Style Guide | 11.03.2008 | pg.15