Re le ase Date : May 1 st , 2008
The Menu
What’s Cookin’? 2
The Menu
APPETIZERS 4
Grid
5
Color Palette
6
Fonts
8
Images
MAIN COURSE 11
Ad Units
12
Icons
13
GUI Elements (buttons, sliders, forms)
DESSERT 17
Global Header & Footer Documentation
page 2
Grid, Color Palette, Fonts, Images
The Grid
The Global Header is flexible and extends to full width of the browser. Minimum viewable area for the header is 994px. This width includes all of the functionality of the header: logo, search, utility links, and global navigation. The Rules that apply to the global header apply the same way to the global footer. The Content Area divides into two large columns. The Left column’s width is 630px, the column can split into two smaller columns, sub left is 210px and sub right is 420 with a gap of 1 px dotted line in between. The Right Column has a consistent width of 364px and never splits. There is a 14px padding from the edges of the page to both left and right column. Two large columns are divided by a soft shadow line that is located in the middle of 28px gap between columns.
page 4
Color Palette Text that needs
Most of the body
Selected state
Used for callouts
Used for titles of
Darker red is
to be emphasized
copy is the darker
color for toggle
of asset titles,
pages as well as
mostly used in
less.
grey color.
button and other
and sections
callouts of high
buttons, header
elements: prog-
within body copy.
importance.
and footer.
ress bars & fillers.
#676767
#CDCCCC
#3D3D3D
#FECD4E
#C66D29
#c4110a
#9F1D20
#FFFBF3
#F7F6E5
#C4BC9C
#D8EBE6
#207CAD
Global link color.
Lines, boxes,
Small modules:
Larger modules
Tools icon color
TV modules back-
containers,
recipe search,
and containers:
and icon support
ground: show,
dotted lines.
view video gal-
accordions, dy-
text.
don’t miss, tv
lery, encyclope-
namic & static
schedule, what’s
dia search and
leads, footer car-
on tv.
browse
ousel, etc.
page 5
Header & Footer Fonts
Global Nav Regular Link: Trebuchet, Bold, 14 pt, Kerning 30 pt, #fbf7e3 Selected Link: Trebuchet, Bold, 14 pt, Kerning 30 pt, #ffffff Selected Link Background: Gradient #a5140a to #ec1f27. Color overlay: #ec2027, 25% opacity
Dynamic Lead Regular Link: Trebuchet, Bold, 14 pt, Leading 18 pt, #464646 Selected Link: Trebuchet, Bold, 18 pt, Leading 18 pt, #c4110a
Tabs Regular Tab Link: Trebuchet, Regular, 13 pt, #666666 Selected Tab Link: Trebuchet, Bold, 13 pt, #c4110a
Page Title: Trebuchet, Bold, 22 pt, #c4110a Headlines: Trebuchet, Bold, 22 pt, Kerning: -10, Leading: 18 pt within headline, Leading: 22 pt between headline and body text, #3d3d3d Headlines (of lesser prominence): Trebuchet, Bold, 17 pt, Kerning: -10, Leading: 18 pt within headline, Leading: 22 pt between headline and body text, #3d3d3d Body Copy: Arial, Regular, 12 pt, Kerning: 0, Leading: 18 pt, #3d3d3d “Warning” on Recipe Page: Arial, Regular, 11 pt, Kerning: 0, Leading: 13 pt, #3d3d3d Captions, Sponsor’s Rec. Text: Arial, Regular, 11 pt, Kerning: 0, Leading: 18 pt, #666666
page 6
Header & Footer Fonts
Links All Links: Arial, Regular, 12 pt, Kerning: 0 pt, Leading: 22 pt, #1e7bac Bullets, to accompany lists of links: Arial, Bold, 12 pt, Kerning: 0, Leading: 22 pt, #c0c0c0 Lists of Links in Footer: Arial, Regular, 11 pt, Kerning: 0 pt, Leading: 22 pt, #1e7bac “See More� type of links: Arial, Regular, 10 pt, Kerning: 0 pt, Leading: 22 pt, #1e7bac
Accordion Regular Header: Trebuchet, Bold, 13 pt, #666666 Selected Header: Trebuchet, Bold, 13 pt, #c4110a Regular Link: Trebuchet, Regular, 12 pt, #3d3d3d Selected Link: Trebuchet, Regular, 12 pt, #3d3d3d
page 7
Images
2. Medium size image is used on pages such as: home (no DL layout), recipe, package and article: 266x200px (3px border around)*
* All images and thumbnails for the exception of dynamic lead
1. Largest image size on the site is used for primarily
image (400x300) have a 3 pixel border around them.
dynamic and static lead modules:
Outter pixel: Grey #CDCCCC, 2 inner pixels: White #FFFFFF,
400x300px (no border) ! Small size thumbnail has a 2 pixel border. Outter: Grey, inner: White. Avatar: 1 pxel boder. Grey.
3. Large thumbnail:
4. Medium thumbnail:
5. Small size thumbnail:
6. Avatar
160x120px
120x90px
92x69px
48x48
(3px border around*)
(3px border around*)
(2px border around*)
(1px border around*)
page 8
Images
1. My Recipe Box Sub Header: 994x110px
2. Show Pages Sub Header: 994x110px
3. Package Pages Sub Header: 994x110px
4. Internal Promotions Banner: 234x60px
page 9
Ad Units, Icons, Tabs, Accordions
Ad Units
2. Medium Right Rail Banner: 336x280px
3. Small Right Rail Banner: 300x250px
4. Leader Board Banner: 728x90px
5. Sponsor Banner: 88x31px
6. Horizontal Google Ads: 3
7. Vertical Google Ads: 3
page 11
Icons
page 12
GUI Elements
Buttons and Other GUI Elements Selected Radial Button Ratings Stars Recipe Page Bubble (Ajax Layer) Advance Right, Left, Up, Down Buttons
Small Button (Used in Video Player) Standard Button
Large Button (Used in Global Search) Comments Bubble (Photo/Video Galleries) Video Player Controls
Time Slider with 1 Marker
Range Slider
Content Slider - Small Runner
Standard Form, with Button inside, Dropdown
Content Slider (Chef’s Spotlight)
page 13
GUI Elements
Accordion Module Red Arrow 14px
7px
7px
Width: 9px
7px 60px
Height: 7px Color: #c4110a Inner Shadow: #000000, 35% opacity
21px
Distance from Text: 7 px
Blue Arrow Width: 9px Height: 7px Color: #1e7bac Inner Shadow: #000000, 35% opacity 34px
Distance from Text: 7 px
Regular Toggle Button Color: clear Inner Glow: #000000, 15% opacity 14px
Stroke: #ffffff 1 px
Accordion Background
Selected Toggle Button
Gradient: #d2d2d2 to #f0f0f0
Color: #fecc4e
Open Selected Area
Inner Glow: #000000, 15% opacity
Color: #fbf7e3
Stroke: #ffffff 1 px
Inner Glow: #262626, 15%
page 14
GUI Elements
Module with Tabs and Search Form Tabs Background 14px 14px 14px
Gradient: #d2d2d2 to #f0f0f0 Dotted Lines
14px 14px
14px
Color: #cccccc
14px
10px 14px
10px
10px
page 15
Global Header & Footer Documentation
Header & Footer
1. Global Header + Navigation
2. Footer + Navigation 994 28 14
21 734 14
284
14 14 1 14
28
152
86
156
156
133
75
70
63
66
37
28 31 350
16
10 0
93
16
page 17