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