DESKTOP + MOBILE STYLE GUIDE
06.22.15 SITE BASICS
PRIMARY TYPEFACE PRIMARY COLORS SECONDARY COLORS
Helvetica, Arial, sans-serif R0 G70 B127 R0 G24 B46 HEX# 00467F HEX# 00182E
R255 G201 B57 R47 G107 B189 HEX# FFC939 HEX# 2F6BBD
R77 G79 B83 HEX# 4D4F53
R0 G0 B0 HEX# 000000
2 UNIVERSAL ELEMENTS
PRIMARY BUTTONS LINKS CARETS
IDLE ROLLOVER IDLE ROLLOVER ON CLEAN BACKGROUND
PRIMARY NAVIGATION ON BUSY BACKGROUND
IDLE ROLLOVER
3 HEADINGS AND LISTS
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 40px/48px Font Size 30px A Font Weight Bold Color #ffffff Color #000000 B
C C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 24px/34px D Font Size 24px/34px Color #000000 Color #2F6BBD E
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 24px/34px Font Size 24px/34px F Color #000000 Color #000000 Margin-bottom 34px Margin-bottom 17px
G Font Family Helvetica, Arial, sans-serif Font Size 24px/34px Color #000000 Margin-bottom 17px G
4 DESKTOP TYPOGRAPHY B
A A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif C Font Size 16px Font Size 16px Font Weight Bold Color #ffffff Color #cccccc Hover Underline Hover Underline
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 24px/30px D Font Size 22px/24px Color #000000 E Color #ffffff F
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 126 px Font Weight Bold Color #ffffff Font Size 136px Color #ffc939
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 17px/24px Font Size 17px/24px Color #ffffff G Color #ffffff Hover Underline H Hover Underline
I
I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif Font Size 17px/40px Font Size 56px/60px Color #ffffff Color #acacac
J
5 DESKTOP A TYPOGRAPHY B A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 26px/30px Font Size 60px Color #00467f Color #00467f C
D
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 18px Font Size 32px/36px Letter-spacing 0.2em Color #000000 E Color #4d4f53 F
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 48px/54px Font Size 18px Letter-spacing 0.05em Letter-spacing 0.2em Color #ffffff Color #ffffff
G Font Family Helvetica, Arial, sans-serif Font Size 17px/24px Color #ffffff Hover #ffc939 G
6 Flip Card
DESKTOP A TYPOGRAPHY B
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif C Font Size 18px Font Weight Bold Letter-spacing 0.2em Font Size 46px/48px D Color #5c5c5c Color #00182e
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif E Font Weight Bold Font Size 17px/24px Font Size 23px/27px Color #00182e Color #00182e
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Emergency Notification Font Size 37px/44px Font Size 14px F Color #00182e Color #ffffff
G
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Size 20px/22px Font Size 28px/38px Color #00182e Color #2f6bbd H Text-decoration Underline
7 DESKTOP TYPOGRAPHY A
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 22px/36px Font Weight Bold B Color #797979 Font Size 40px/44px Hover Underline Color #000000 C
D
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 20px/24px Font Size 24px/34px Color #000000 Color #454545 E
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 16px/18px Font Weight Bold F Color #000000 Font Size 18px Letter-spacing 0.2em G Color #ffffff Align Center
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Size 30px/34px Font Size Letter-spacing 0.05em Color 30px/34px H Color #ffffff #ffffff Align Center
I
I Font Family Helvetica, Arial, sans-serif Font Size 26px Color #000000
8 DESKTOP TYPOGRAPHY
A A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 20px Font Size 15px/30px Color #ffffff Color #ffffff B
C D E F C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif G Font Weight Bold Font Size 15px/19px Font Size 18px Color #cccccc Color #ffffff
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 15px Font Size 17px Color #797979 Color #ffffff
G Font Family Helvetica, Arial, sans-serif Font Size 15px Color #333333
9 DESKTOP TYPOGRAPHY
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 17px Font Size 18px/22px A Color #000000 Color #797979 B
C D E
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 14px/20px Font Size 18px/22px Color #797979 Color #00467f
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 16px/26px Font Size 15px Color #000000 Color #ffffff
F
10 DESKTOP TYPOGRAPHY A B A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif C Font Size 18px Font Size 32 D Color #ffc939 Color #ffffff Letter-spacing 0.05em Letter-spacing 0.5em Text-transform Uppercase
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 20px/24px Font Weight Bold Color #000000 Font Size 34px/36px Color #2f6bbd E F
G E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 24px/28px Font Size 24px/28px Color #2f6bbd Color #000000
G Font Family Helvetica, Arial, sans-serif Font Size 24px/34px Color #454545
11 DESKTOP TYPOGRAPHY
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 32px Font Size 18 Color #000000 Color #000000 A Letter-spacing 0.05em vertical-align middle
B C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 20px/24px Font Weight Bold Color #000000 Font Size 34px/36px Color #2f6bbd
12 MOBILE
TYPOGRAPHY A
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif B Font Weight Bold Font Weight Bold Font Size 20px Font Size 61px Color #ffffff Color #ffc939
C C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 14px/18px Font Weight Bold Color #000000 Font Size 24px/30px Color #000000
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif D Font Size 14px/16px Font Weight Bold Color #00467f Font Size 10px Letter-spacing 0.2em E Color #000000 Align Center F
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif G Font Size 16px/20px Font Size 10px Color #000000 Letter-spacing 0.2em Align Center Color #ffffff Align Center
I Font Family Helvetica, Arial, sans-serif H Font Size 17px/40px Color #ffffff I Align Center
13 MOBILE A TYPOGRAPHY
B A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 11px/16px Font Size 11px/16px Color #000000 Color #00467f Hover Underline C
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 8px/10px Font Size 10px Color #797979 Color #ffffff
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif D Font Weight Bold Font Size 10px Font Size 13px Color #cccccc Color #ffffff Align Center Align Center E F
G G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Size 10px Font Size 10/20px H Color #797979 Color #000000
I
J I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif Font Size 10px Font Size 10px Color #ffffff Color #333333
14 MOBILE A TYPOGRAPHY B C
D A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif E Font Size 11px Font Size 11px/16px Color #000000 Color #797979 F
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font weight Bold Font weight Bold Font Size 11px/16px Font Size 11px/15px Color #797979 Color #00467f
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 9px/12px Font Size 10px/14px G Color #797979 Color #000000 Hover Underline
G Font Family Helvetica, Arial, sans-serif Font Size 10px Color #ffffff
15 DESKTOP A TYPOGRAPHY B
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 26px Font Size 24px/34px Color #2f6bbd Color #454545
C
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 26px Font Size 25px/29px Color #000000 Color #ffffff
D
16 DESKTOP A B TYPOGRAPHY C D
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 26px Font Size 26px E Color #2f6bbd Color #000000 Align Center Align Center Active Underline
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 20px/30px Font Size 24px Color #000000 Color #2f6bbd
F Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif E G Font Weight Bold Font Size 15px H Font Size 22px Text-transform Uppercase Color #ffffff Color #6c6c6c
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Size 55px Font Size 17px Color #2f6bbd Color #2f6bbd I
J
I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif Font Size 20px Font Size 20px Color #ffffff Color #ffc939
17 DESKTOP TYPOGRAPHY A B
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif C Font Weight Bold Font Weight Bold D Font Size 26px/30px Font Size 26x/30px Color #000000 Color #2f6bbd E Align Center F G H C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif I Font Weight Bold Font Weight Bold Font Size 80px/84px Font Size 36px/52px Color #2f6bbd Letter-spacing 0.05em Color #000000 J K L
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 104px Font Size 20px/30px Color #7baa0b Color #000000
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Size 20px/30px Font Size 20px Color #000000 Color #ffffff
I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif K Font Family Helvetica, Arial, sans-serif L Font Family Helvetica, Arial, sans-serif Font Size 24px/34px Font Weight Bold Font Weight Bold Font Weight Bold Color #454545 Font Size 20px Font Size 140px Font Size 40px Color #000000 Color #ffffff Color #ffffff Opacity 85% Opacity 90% Box-shadow 1px 1px 2px 2px rgba(50, 50, Box-shadow 1px 1px 2px 2px rgba(50, 50, 50, 0.7) 50, 0.7) 18 MOBILE
TYPOGRAPHY A B
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 10px/12px Font Weight Bold Color #797979 Font Size 20px/24px Hover Underline Color #000000
C
D C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 9px/12px Font Size 11px/16px Color #000000 Color #454545
E E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 16px/20px F Font Size 10px Letter-spacing 0.05em Letter-spacing 0.2em Color #ffffff Color #ffffff Align Center Align Center
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif G Font Weight Bold Font Size 12px H Font Size 14px/18px Color #000000 Color #000000 I
I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif J Font Size 10px/13 Font Size 12px Color #000000 Color #000000
19 DESKTOP A B TYPOGRAPHY C D E A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif F Font Size 46px/60px Font Size 46px/60px Color #000000 Color #2f6bbd G
L
H C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 29px Font Size 50px Color #2f6bbd I Color #2f6bbd
J E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif K Font Weight Bold Font Size 20px/30px Font Size 46px/60px Color #000000 Color #2f6bbd Hover Underline / #00467f
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 104px Font Size 20px/30px Color #ffffff Color #000000 Opacity 85% Box-shadow 1px 1px 2px 2px rgba(50, 50, 50, 0.7)
I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif K Font Family Helvetica, Arial, sans-serif L Font Family Helvetica, Arial, sans-serif Font Weight Bold Text-transform Uppercase Font Size 20 Font Size 26p Font Size 40px Font Size 20px Text-transform Uppercase Color #2f6bbd Color #ffffff Color #ffffff Color #000000 Letter-spacing 0.125em Opacity 90% Box-shadow 1px 1px 2px 2px rgba(50, 50, 50, 0.7) 20 MOBILE A TYPOGRAPHY B
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif C Font Weight Bold Font Weight Bold Font Size 12/16px Font Size 12px/16px D Color #000000 Color #000000 Align Center E
F C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 60px Font Size 27px/16px G Color #2f6bdd Color #000000 H
I J E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif K Font Weight Bold Font Weight Bold Font Size 79px Font Size 12px Letter-spacing 0.2em Color #000000 L Color #7baa0b Align Center
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 46px Font Size 15px Color #ffffff Color #ffffff Opacity 85% Opacity 90% Box-shadow 1px 1px 2px 2px rgba(50, 50, Box-shadow 1px 1px 2px 2px rgba(50, 50, 50, 0.7) 50, 0.7)
I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif K Font Family Helvetica, Arial, sans-serif L Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 11px/15px Font Size 16px Font Size 10px/12px Font Size 11px/15px Color #000000 Text-transform Uppercase Color #000000 Color #000000 Color #ffffff
21 MOBILE
TYPOGRAPHY A
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 12px Font Size 12px/16px Color #000000 Color #ffffff E Active #2f6bbd
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif B Font Size 13px/15px Font Size 13px/17px Color #00182e Color #00182e
E Font Family Helvetica, Arial, sans-serif Font Size 12/16px Color #2f6bbd
C
D
22 DESKTOP TYPOGRAPHY
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 20px Font Size 17px Color #000000 Color 6c6c6c A
B
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 20px Font Size 20px C Color #ffffff Color #000000 Text-transform Uppercase Text-transform Uppercase D
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 17 Font Weight Bold Color #EE1F09 Font Size 136px E Color #FFC939
F G
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif Font Size 17px/19px Font Size 15px/19px Color #6C6C6C Color #797979 H J
I I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif Font Size 15px/19px Font Size 17px/19px Color #2F6BBD Color #000000
23 MOBILE TYPOGRAPHY
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 11px/15px Font Size 10px Font Weight Bold Color #6C6C6C A Color #2F6BBD B
C
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 10px Font Size 10px Color #000000 Color #797979 D
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Size 16px Font Size 12px Color #FFFFFF Color #00467F E
G Font Family Helvetica, Arial, sans-serif Font Size 12px Color #00467F Text-decoration Underline F
H Font Family Helvetica, Arial, sans-serif Font Size 12px G Color #000000 H
24 DESKTOP TYPOGRAPHY
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Size 20px A Font Size 20px Color #00467F Color #000000 B C
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 20px Font Weight Bold Color #ffffff Font Size 20px D Text-decoration Underline Color #FFFFFF
E
E Font Family Helvetica, Arial, sans-serif Font Size 20px Color #00467F
25 A MOBILE B TYPOGRAPHY C D
A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 14px Font Weight Bold Color #ffc939 Font Size 20px Color #ffffff
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Font Size 11px/15px Font Weight Bold Color #000000 Font Size 18px/22px Color #2f6bbd
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Font Weight Bold Font Weight Bold Font Size 11px/15px Font Size 11px Color #2f6bbd Color #000000 E F
G
G Font Family Helvetica, Arial, sans-serif Font Size 11px/15px Color #454545
26 A
MOBILE B TYPOGRAPHY
C A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif Font Size 20px/24px Font Size 12px D Color #000000 Color #2f6bbd
E
C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif F Font Size 11px/15px Font Weight Bold G Color #000000 Font Size 11px/15px Color #000000
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif Text-transform Uppercase Font Weight Bold Font Size 12px Font Size 46px Color #2f6bbd Color #ffffff Opacity 85% Box-shadow 1px 1px 2px 2px rgba(50, 50, 50, 0.7)
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif H Font Weight Bold Font Size 14px Font Size 15px Color #ffffff Color #ffffff Opacity 90% Box-shadow 1px 1px 2px 2px rgba(50, 50, 50, 0.7) I
J I Font Family Helvetica, Arial, sans-serif J Font Family Helvetica, Arial, sans-serif Font Size 14px Font Size 11px/14px Color #000000 Color #000000 Hover # 00467f underline
27 G MOBILE TYPOGRAPHY
A A Font Family Helvetica, Arial, sans-serif B Font Family Helvetica, Arial, sans-serif B Font Weight Bold Font Weight Bold Font Size 12px Font Size 12px Color #000000 Color #2f6bbd Align Center Align Center H I C Font Family Helvetica, Arial, sans-serif D Font Family Helvetica, Arial, sans-serif Text-transform Uppercase Text-transform Uppercase Font Weight Bold Font Weight Bold Font Size 10px Font Size 9px Color #2f6bdd Color #000000
E Font Family Helvetica, Arial, sans-serif F Font Family Helvetica, Arial, sans-serif C Font Size 10px Font Size 10px Color #000000 Color #00467f D E Text-decoration Underline Hover No underline
G Font Family Helvetica, Arial, sans-serif H Font Family Helvetica, Arial, sans-serif F Font Size 16px Font Weight Bold Color #ffffff Font Size 34px Color #2f6bbd
I Font Family Helvetica, Arial, sans-serif Font Size 20px Color #2f6bbd
28 DESKTOP GRID SYSTEM
A A Columns 12 Width 108px 6.75% B
B Gutter 24px 1.5%
C C Padding 20px 1.25%
* This is intended to be the starting point of a fluid grid. The content should expand and decrease with the browser.
29 Top Navigation Overview — 960px
Menu Menu expanded Search expanded
This shows the layout with a browser width at 960. Please note the logo change, font size decrease and decrease of the spacing between the navigation links and the shrinking of the search icon.
Please reference Home - 960.psd for exact specs.
With the menu expanded, please lose one promo tile. Please note the decrease of the font size.
Please reference Home - 960.psd for exact specs. Please reference Home - 960.psd for exact specs.
30 Home Page — 960px
At 960px wide, please scale the page accordingly.
Please reference Home - 960.psd for exact specs.
31 Top Navigation Overview — 768px
Menu Menu expanded Search expanded
This shows the layout with a browser width at 768px. At this width, please use following layout inspired by the mobile design.
Please reference Home - 768.psd for exact specs. Please note the decrease in the font size.
Please reference Home - 768.psd for exact specs.
When the menu is expanded, please use the following layout inspired by the mobile design.
Please reference Home - 768.psd for exact specs.
32 Home Page — 768px
At 768px wide, please scale the page accordingly.
Please reference Home - 960.psd for exact specs.
33 DESKTOP
DIMENSIONS/HEADER 128px
27px
124px 80px
20px 42px 42px 42px 42px 42px 20px padding padding
80px
28px
28px 28px 466px 20px
262px 26px 34 DESKTOP DIMENSIONS/FOOTER
20px 20px padding 24px 24px 70px 70px 70px 70px 70px padding
74px 104px
68px
194px 26px 26px 45px
282px 76px 90px 50px
358px
35 DESKTOP DIMENSIONS/HOME 278px 36px 71px
60px 120px 337px x 337px 49px 155px x 155px 10px stroke 900px 35px 15px stroke 15px 57px 52px 814px x 144px 18px 14px
86px
41px 41px
90px
102px 23px 28px
32px
23px 28px
32px
36 DESKTOP DIMENSIONS/HOME
24px 35px 19px 16px 345px x 308px
155px x 155px 24px 7px stroke
714px x 723px
714px x 386px
44px 354px x 62px 44px
37 Flip Card
30px DESKTOP 42px
DIMENSIONS/ 16px FLIP CARD & 26px 40px 860px 24px 35px 34px EMERGENCY 19px 16px 24px 44px NOTIFICATION 1080px x 756px
24px
30px 62px 430px x 270px 38px
Emergency Notification
90px x 34px
20px 22px 20px
42px
36px
36px w 8px
38 DESKTOP INTERACTIVITY: HOME PAGE CIRCLES
39 DESKTOP INTERACTIVITY: STALKER BAR
40 DESKTOP
DIMENSIONS/SEARCH 80px 20px 15px
54px 30px 30px 30px 16px 20px
30px 30px
24px
60px
30px 30px 50px
12px 24px
41 DESKTOP INTERACTIVITY: SEARCH
42 DESKTOP
DIMENSIONS/ 43px
98px 39px SECONDARY 39px 29px 22px 30px 85px
320 x 76px
420px x 350px
14px 12px
100px
528px x 480px
60px 15px 18px 30px 24px 26px
43 20px DESKTOP 17px DIMENSIONS/SECONDARY 30px
1080px x 55px 20px 528px x 68px 24px 24px
70px
528 x 310px
24px 528px x 68px 26px 30px
44 DESKTOP INTERACTIVITY: INTERIOR NAVIGATION
45 65px 335px 200px DESKTOP DIMENSIONS/ 64px TABLES SLIDER/CAROUSEL
Table 1 Table 1 Expanded
64px
74px 250px 74px x 205px 18px 18px
46 DESKTOP 1080px x 86px DIMENSIONS 5px STATE PAGES 35px
COMMODITIES 90px
50px 35px
26px 26px
35px 32px 42px
Center 322px vertically 24px
24px
24px
24px 16px
47 DESKTOP + MOBILE DIMENSIONS/VIDEO AUTO AUTO
100% (320px)
100% (1080px)
At 768px, the video’s width equals 100%. At 960px, the video’s width equals 100%.
48 73px MOBILE 13px DIMENSIONS/HOME 23px 16px 340px x 190px
32px 13px 66px
212px x 212px
28px
32px 12px 27px 154px x 44px 26px 12px 21px 340px x 51px 98 21px 24px 26px 9px 13px 42px 144px x 44px 11px 44px x 44px 25px 13px 17px 340px x 190px 12px 16px 20px 12px 10px 254px x 44px 12px 90px 12px 12px 340px x 233px 8px 12px 16px
49 73px MOBILE DIMENSIONS/NAV 18px 18px 18px 18px 18px 18px
18px 18px
46px
33px 255px x 44px 10px 33px 16px 26px x 26px 18px
26px
50 MOBILE DIMENSIONS/SEARCH 30px 20px x 20px 56px 10px 38px 20px 20px 20px
12px 12px
20px
20px 36px
51 73px MOBILE
DIMENSIONS/ 24px 11px 10px SECONDARY 18px 12px 1px 13px
320px x 146px
8px 13px
11px 18px
90px 156px x 146px 8px 320px x 233px 12px 302px x 40px 16px
302px x 40px 12px 8px 8px 10px 10px
10px
8px
52 DESKTOP
DIMENSIONS/FORMS 12px
45px
16px
56px
14px
12px 26px
12px
45px
10px
10px 42px
53 MOBILE DIMENSIONS/ 18px FORMS + TABLES 38px 38px x 38px EMERGENCY NOTIFICATION 20px x 20px BLOCK QUOTE 10px 38px SLIDER/CAROUSEL 26px
22px
100px
44px
Table 1
14px 50px
12px 50px 25px 150px 12px 46px 320px 26px 55px x 186px 25px w 326px 70px
150px 46px 18px
10px
Swiping left/right brings users to the next item.
54 MOBILE
DIMENSIONS/ 24px COMMODITIES 24px
18px
20px
32px 20px
32px
30px 12px
55 540px
DESKTOP DIMENSIONS/ 58px 15px CARBON CALCULATOR 26px
228px 3px border x 228px
48px
16px
22px 164px
46px
40px
980px
56 DESKTOP 175px DIMENSIONS/ 5px border x 175px
CARBON CALCULATOR 24px 34px
34px 52px 32px
26px
34px
57 MOBILE 38px DIMENSIONS/
CARBON CALCULATOR 20px
22px
163px 60px 22px
22px 22px 18px
22px 20px 8px 12px 22px 16px
22px 20px
20px 10px 30px 12px 16px 12px
12px
9px
58 MOBILE DIMENSIONS 12px STATE INFO 24px
16px 12px
16px
12px
59