Desktop + Mobile Style Guide 06.22.15
Total Page:16
File Type:pdf, Size:1020Kb
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