frontdoor.com
style guide version 1.0
POWERED BY HGT V
Frontdoor.com Style Guide: Grids
Frontdoor.com Style Guide: Grids home page
Header 988px by 86px
The homepage employs a 2-column grid with a feature area spanning both columns. The page width is 988 pixels total; column 1 is 621 pixels wide and column 2 is 425 pixels wide. All columns are separated with a 10 pixel margin and are indented 10 pixels from either edge.
Search, DL and Video 968px by 270px
Home Page Column 1 622px
Homepage Column 2 336px
The header at the top of the page is 988 pixels by 86 pixels. The feature area, including the DL and the Video player is 968 pixels by 270 pixels. All other columns vary in height depending on which modules are placed on the page. The page footer is 988 pixels by 142 pixels and anchors all pages of the site.
Footer 988px by 142px
3
Frontdoor.com Style Guide: Grids secondary pages
header 988px by 84px
breadcrupmbs, subpage title, search bar 968px by 140px
Column 1 156px
Column 2 450px
Column 3 336px
Some secondary pages employ a 3-column grid with a feature area spanning both columns. Column 1 is 156px wide, column 2 is 450 pixels wide and column 3 is 336px wide. The header at the top of the page is 988px by 84px. It is followed by a secondary page header that is 988px by 140px. this page header describes the name of the section you are on, shows you the breadcrumbs, and includes a global search module. Column 3 always overlaps the secondary page header starting 10px below the main header and extending to the bottom of the page. The page footer is 988 pixels by 142 pixels and anchors all pages of the site.
Footer 988px by 142px
4
Frontdoor.com Style Guide: Colors
Frontdoor.com Style Guide: Colors primary colors page background
content area background
#737069
#FFFFAFF
search box outline
selected tabs
#FFFFFF
#A41D21
footer background
logo lockup
unselected tabs vertical gradient
#A41D21
#5C5C5C
global navigation background
#F0F9F9
buttons
secondary neutral
vertical gradient
outlines and dividers
#EA6B24
primary module background
top swoosh
#FFFFFF
#FFECD3
vertical gradient
vertical gradient
#FF8221
bottom swoosh
#F9F2E5
#FFFFFF
#D9D9D1
text
#828271
community module background
middle swoosh
#FFFFFF
links
#4A8DBB
followed links
#586269
bottom swoosh module background
horizontal gradient
#C30005
#F5F5F4
#A41D21
#FFFFFF
#C30005
#D1D2D4
#FF8221
#E4E5F1
6
Frontdoor.com Style Guide: Colors section colors buy section gradient
#FFEDD5
broker/agent section gradient
#FFFFFF
#FFFFFF
my frontdoor section gradient
sell section gradient
#DBEAF1
TBA
#FFFFFF
TBA
#FFFFFF
move section gradient
TBA
#FFFFFF
home finance section gradient
#DFF0DD
#FFFFFF
tools section gradient
#DFE1EF
#FFFFFF
neighborhood section gradient
#F5EBB7
#FFFFFF
7
Frontdoor.com Style Guide: Typography
Frontdoor.com Style Guide: Typography
system text
key colors:
#EA6923
#828271
#A41D21
#4A8DBB
Main links are Arial Regular, size: 12pt, leading: 20pt, kearning: 0pt, color: #4A8DBB A list of links appear with a graphic bug, color #EA6923 Breadcrumbs links are Arial Regular, size 10pt, leading: 0pt, kearning: 0pt, color: #4A8DBB Links as part of content summary are Arial Regular 11pt
Rollover links are Arial Regular, size: 12pt, leading: 20pt, kearning: 0pt, color: #4A8DBB, underlined Visited links are #586269 Standard Summary text for modules is Arial Regular, size:12pt, leading: 16pt, kearning: 0pt, color: #828271
Article text is Arial Regular, size: 12pt, leading: 15pt, kerning: 0, color: #828271 Article header is Arial Regular, size: 17pt, leading: 19pt, kerning: 0pt, color: #4A8DBB, Article Byline is Arial Regular, size: 10pt, leading: 0pt, kerning: 0, color: #828271 Article subheader is Arial Bold, size: 12pt, leading: 0pt, kerning: 0pt, color: #828271
Article caption is Arial Regular, size: 9, leading: 0pt, kerning: 0pt, color #828271 “More� link in modules is Arial Regular, size: 10pt, leading: 0pt, kerning: 0pt, color: #4A8DBB, case: all upper
9
Frontdoor.com Style Guide: Typography
graphic text personolized header toolbar
page title
font face: Din Schriften, size: 11pt, kerning: 43pt, case: all upper, color: #828271
font face: Din Schriften, size: 15pt, kerning: 0pt, case: all upper, color: #A41D21
dynamic lead tabs unselected tab: font face: Din Schriften, size: 11pt, kerning: 63pt, case: all upper, color: #828271
selected tab: font face: Din Schriften, size: 11pt, kerning: 63pt, case: all upper, color: #A41D21
module titles
font face: Serifa, size: 20pt, kerning: 0pt, case: all lower, color: #A41D21
numbers for top 10 modules
font face: Serifa, size: 25pt, kerning: 63pt, color: #EA6923
10
Frontdoor.com Style Guide: Global Page Elements
Frontdoor.com Style Guide: Global Page Elements global header and navigation 254
85
23
83
70
23
450
10 84 111
27
25
67
44
23
44
31
44
34
44
95
44
40
44
100
44
98
44
98
25
988 32
179
42
45
10 10 1
75
594
10 54
8 10 9
46
global header banner location 10
90
10
12
Frontdoor.com Style Guide: Global Page Elements global header with secondary page header 10
50
464
507
62
346
10 9 12 11 6 15
4
28
137
35 15
10 10
170
4
109 433
346
349 7
92
5
85
10
global footer
31 14
33
12
964
12
13
Frontdoor.com Style Guide: Global Page Elements
global menu item states
state: 1 - this state of the global menu is common to pages that do not have a section assigned to them (example: search results page)
state 2 - this state of the global menu is common to pages that have a section assigned to them (homepage, buy, sell, move, home finance, etc...)
state 3 - this appearance shows a rollover action for the “home finance“ section
14
Frontdoor.com Style Guide: Images and Graphics
Frontdoor.com Style Guide: Global Page Elements advertising units
web standard ad units
network wide units
house made units
leaderboard 728px by 90px
rectangle
large rectange
sponsor logo
300px by 250px
336px by 280
88px by 31px
broker logo 88px by 31px
network wide unit #1 207px by 93px
network wide unit #2 234px by 60px homepage only
homepage only
16
Frontdoor.com Style Guide: Images and Graphics image specifications standard video
medium size image
320px by 240px
160px by 110px
M
S
XS extra small size image
small size image
32px by 32px
89px by 61px
large image 422px by 290px
L extra large image 600px by 413px
XL
subpage dynamic lead image 484px by 240px
17
Frontdoor.com Style Guide: Images and Graphics button styles There are two types of graphical buttons on frontdoor.com. The large size button is only used in the global search module, all other buttons on the site are the smaller size. large button 15
254
15
height: 41px width: 92px type face: DIN Schrift, size: 16pt, kerning: 50, color: white with dropshadow, case: all upper verticle gradient: #F18631 to #EA6B24 border: 3px white border + outer glow usage: global search module only
14 14
small button 15
15
height: 32px width: variable depending on the amount of type inside type face: DIN Schrift, size: 14pt, kerning: 50, color: white with dropshadow, case: all upper verticle gradient: #F18631 to #EA6B24 border: 3px white border + outer glow usage: thoughout the site
11 10
links with arrows certain links on the site have a small graphical arrow next to them, suggesting more information/functionality is available upon clicking height of the arrow graphic: 7px width of the arrow graphic: 7px location of the arrow graphic: 4px away from the last letter
carousel navigation buttons 25 25
9
25
9
25
carousel type modules are controlled by previous and next arrows, as well as itunes type dots for advancing to the next or previous set of content.
11
18
Frontdoor.com Style Guide: Images and Graphics button styles video & photo buttons are identifiers of content type; they usually follow a standard link anywhere on the site. video stands for motion video content and photo stands for photo gallery content alternative video and photo icons, used in a similar fashion but in places with less real estate standard drop down box features rounded corners; inside gradient; dotted line-separator and orange arrow standard form field box features a grey border and inside gradient
standard share or grab it button is resident to all tool modules
standard popularity/rating tool standard rss feed identifier
standard map marker for larger maps with multiple points of interest
map marker for maps with single point of interest
standard icon identifiers for article page tools
large and small icons represent tools and calculator applications
19
Frontdoor.com Style Guide: Images and Graphics tabs The website utilizes tabs for many of its modules. There are two types of tabs, large and small.
large tabs 7
small tabs 170
7 4
7
109
7
4
7
7 25 7
28 7
97
4
97
4
97
7 24 7
selected tab: font face: serifa font size: 18pt kerning: -25 case: all lower font color: #A41D21 background: #FFFFFF 1px outline: #D9D9D1
selected tab: font face: din shrift 1451 Mittelshrift font size: 14pt kerning: 0 case: all lower font color: #A41D21 background: #FFFFFF 1px outline: #D9D9D1
unselected tab: font face: din shrift 1451 Mittelshrift font size: 14pt kerning: 0 case: all lower font color: #EA6923 background: vertical gradient #F0F9F9 to #FFFFFF 1px outline: #D9D9D1
unselected tab: font face: din shrift 1451 Mittelshrift font size: 14pt kerning: 0 case: all lower font color: #EA6923 background: vertical gradient #F0F9F9 to #FFFFFF 1px outline: #D9D9D1
20