Style Guide CFMWS Website Style Guide CFMWS Website October 2013 1
Style Guide CFMWS Website Colours Consistent use of colours throughout the site helps users navigate and also promotes brand/site awareness. The interaction of colours across sites will further solidify and deliver brand and corporate messages. Primary Colours Colour #1 Dark Grey RGB: 96 97 102 #606166 Use: Menu tabs L1 and L2 when mouse roll over and click on it Background Photo Caption in landing pages Menu Links Menu Links Arrow Colour #2 Medium Grey RGB: 128 134 138 #80868a Use: Menu tabs in L1 that are not selected Colour #3 Light Grey RGB: 209 210 211 #d1d2d3 Use: Background Menu tabs L1 Background Headlines articles on landing pages Style Guide CFMWS Website October 2013 2
Secondary Colours Colour #4 Dark Brown RGB: 138 126 112 #8a7e70 Use: Photo Caption background in content pages Table Heading 1 background Colour #5 Light Brown RGB: 205 190 170 #cdbeaa Use: Background Headlines articles and on content pages Background right hand column Table Heading 3 background Colour #6 Red RGB: 179 18 24 #b31218 Use: Headings 1 background Links Menu Links Arrow Colour #7 Black RGB: 0 0 0 #000000 Use: All text content, including headings Separates top banner with Menu tabs from main content area Style Guide CFMWS Website October 2013 3
Colour #8 White RGB: 255 255 255 #ffffff Use: Background for all content Background for Search Button and all other form fields Typography The two primary fonts used for CFMWS website are: Arial Standard ABCDEFGHIJKLMNOPQRSTUVXZ abcdefghijklmnopqrstuvxz 123456789!@#$%^&*() Arial Bold The fonts for Menu Tabs and Buttons are listed on a priority base. The top priority font is Verdana. If the user s system doesn t support Verdana, then the second font (Geneva) will be automatically uploaded. If the system doesn t support both Verdana and Geneva, then the third font (Helvetica) will be automatically uploaded, etc. 1. Verdana ABCDEFGHIJKLMNOPQRSTUVXZ abcdefghijklmnopqrstuvxz 123456789!@#$%^&*() 2. Geneva ABCDEFGHIJKLMNOPQRSTUVXZ abcdefghijklmnopqrstuvxz 123456789!@#$%^&*() Style Guide CFMWS Website October 2013 4
3. Helvetica ABCDEFGHIJKLMNOPQRSTUVXZ abcdefghijklmnopqrstuvxz 123456789!@#$%^&*() 4. Arial ABCDEFGHIJKLMNOPQRSTUVXZ abcdefghijklmnopqrstuvxz 123456789!@#$%^&*() Font Usage Body Text: - Content on all pages - Colour #7 Black - Arial Standard, 12 pts Heading 1 - Main Page Title - Colour #8 White - Arial Bold, 20pts/21pts - Maxim 45 characters including spaces - Background Colour #6 Red Heading 2 - Secondary Page Title - Colour #7 Black - Arial Bold, 16pts Heading 3 - Table Titles - Colour #7 Black - Arial Bold, 12pts Style Guide CFMWS Website October 2013 5
Breadcrumbs - Colour #8 White - Arial Standard, 10 pts - Colour #6 Red when mouse over - Background Colour #7 Black Buttons Buttons will be used in the following situations: - L1 and L2 Menu Tabs - Search - Submit - Reset - Continue - Review Payment Details - Start Over - Photo Gallery (previous/next) - More Menu Tabs L1 Menu Tab L1 Menu Tab when mouse over Button width: 105 pixels Button height: 33 pixels Button colour: Colour #2 Medium Grey Font: Fortis, 14 pts Button width: 105 pixels Button height: 33 pixels Button colour: Colour #1 Dark Grey Font: Fortis, 14 pts Style Guide CFMWS Website October 2013 6
L2 Menu Tab Box width: 343 pixels Box height: 193 pixels (without L1 Menu Tab) Background Colour: Colour #8 White/ Colour #3 Light Grey Gradient Tab Name Text Font: Arial Bold, 18 pts, all Caps Text Colour: Colour #6 Red L2 Menu (3 columns x 3 items high) Text Font: Arial Standard, 12 pts Text Colour: Colour #7 Black Style Guide CFMWS Website October 2013 7
Splash Page Background Box Button width: 343 pixels Button height: 110 pixels Button colour: Colour #5 Light Brown Font: Fortis, 14 pts Buttons Home Page Button Home Page Button when mouse over Search Button Search Button when mouse over Button width: 34 pixels (43 pixels with shadow) Button height: 34 pixels (43 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Image Colour: Colour #7 Black Search Box Box width: 194 pixels Box height: 33 pixels Style Guide CFMWS Website October 2013 8
Submit Button Submit Button when mouse over Submit Button Submit Button when mouse over Button width: 58 pixels (67 pixels with shadow) Button height: 25 pixels (35 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Text Font: Fortis, 12 pts Text Font colour: Colour #7 Black Continue Button Continue Button when mouse over Button width: 81 pixels (89 pixels with shadow) Button height: 25 pixels (34 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Text Font: Fortis, 12 pts Text Font colour: Colour #7 Black Clear Form Button Clear Form Button when mouse over Button width: 95 pixels (102 pixels with shadow) Button height: 25 pixels (33 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Text Font: Fortis, 12 pts Text Font colour: Colour #7 Black Style Guide CFMWS Website October 2013 9
Review Payment Details Button Review Payment Details Button when mouse over Button width: 175 pixels (184 pixels with shadow) Button height: 25 pixels (34 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Text Font: Fortis, 12 pts Text Font colour: Colour #7 Black Splash Page Go Button Button width: 42 pixels (50 pixels with shadow) Button height: 25 pixels (33 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Text Font: Fortis, 12 pts Text Font colour: Colour #7 Black Splash Page Aller Button Button width: 59 pixels (67 pixels with shadow) Button height: 25 pixels (33 pixels with shadow) Background Colour: Colour #2 Medium Grey/ Colour #3 Light Grey Gradient Text Font: Fortis, 12 pts Text Font colour: Colour #7 Black Left Arrow Photo Caption Right Arrow Photo Caption Button width: 20 pixels (28 pixels with shadow) Button height: 20 pixels (28 pixels with shadow) Style Guide CFMWS Website October 2013 10
Left Arrow Photo Gallery Right Arrow Photo Gallery Button width: 20 pixels (28 pixels with shadow) Button height: 20 pixels (28 pixels with shadow) Menu Links Grey Arrow Button width: 9 pixels Button height: 12 pixels Colour: #1 Dark Grey Menu Links Red Arrow Button width: 12 pixels Button height: 9 pixels Colour: #6 Red Forms Text all fields: Arial Bold, 12 pts Required field are marked with a red asterisk. * First Name Text box 1 short line Maximum Box width: 160 pixels Box height: 20 pixels Box font: Arial Regular, 12 pts Background Colour: Colour #8 White Text Colour: Colour #7 Black Text box 1 long line Maximum Box width: 360 pixels Box height: 20 pixels Box font: Arial Regular, 12 pts Background Colour: Colour #8 White Text Colour: Colour #7 Black Style Guide CFMWS Website October 2013 11
Text box multiple lines Maximum Box width: 360 pixels Maximum Box height: 200 pixels Box font: Arial Regular, 12 pts Background Colour: Colour #8 White Text Colour: Colour #7 Black Drop down box Box width: 160 pixels Box height: 20 pixels Box font: Arial Regular, 12 pts Background Colour: Colour #8 White Text Colour: Colour #7 Black Error Message Error Box width: 250 pixels Error Box height: depends on message length Style Guide CFMWS Website October 2013 12
Error Box font: Arial Regular, 12 pts Text Colour: Colour #6 Red Radio buttons Button shape: round Button diameter: 18 pixels Button colour: Colour #3 Light Grey Button colour when selected: Colour #1 Dark Grey Links There are two types of links: (1) links within content or list of links and (2) Menu links (1) Link font: Arial Regular, underline Text colour: Colour #6 Red Link when roll over: Arial Bold, Colour #6 Red, underline When links are in a list, the bullet points are in Colour #6 Red Soldier On Blog 1 Soldier On Blog 2 Soldier On Blog 3 (2) Menu Links will be represented with the sign (if there are submenu links or not) and (if the menu link is open). Links font: Arial Regular, 11 pts, Colour #1 Dark Grey Links when mouse over: Arial Bold, 11 pts, Colour #6 Red Icons Icon width: 16 pixels Icon height: 16 pixels File size in brackets ( ) Style Guide CFMWS Website October 2013 13
Tables Table title: Font: Heading 1 Background Colour #4 Dark Brown Table column titles: Font: Heading 3 Background Colour #5 Light Brown Content: Body Text Colour #7 Black Background Colour # 8 White Style Guide CFMWS Website October 2013 14
Layouts 1. Splash Page Login Header Width: 960 pixels Height: 16 pixels Top Image with CFMWS Logo Width: 920 pixels Height: 330 pixels Spacing Bar Width: 960 pixels Height: 20 pixels Logos Bar Width: 920 pixels Height: 150 pixels Spacing Bar Width: 960 pixels Height: 20 pixels Design Bar Width: 960 pixels Height: 30 pixels Drop down box Width: 215 pixels Width: 88 pixels Menu box Width: 342 pixels Height: 110 pixels Width: 100 pixels Width: 88 pixels Drop down box Width: 215 pixels Style Guide CFMWS Website October 2013 15
2. Home Page Dates are Arial 12pts All Caps Spacing Bar Height: 26 pixels Titles are Arial Bold 18pts Colour #6 Red All Caps Story Type 1 Width: 294 pixels Height: 316 pixels Text is Arial 14pts Text is Arial 14pts Colour #6 Red All Caps Space between Promo Height: 7 pixels Story Type 2 Width: 294 pixels Height: 104 pixels Side Bar Width: 20 pixels Height: Any Photo size Width: 255 pixels Height: 144 pixels Space between Promo Width: 19 pixels Side Bar Width: 20 pixels Height: Any Style Guide CFMWS Website October 2013 16
3. Landing Page Vote Button Width: 82 pixels Height: 19 pixels Button Colour #6 Red Arial Bold 12pts Colour #8 White All caps Spacing Bar Height: 26 pixels Story Type 2 Width: 360 pixels Height: 122 pixels Space between Promo Height: 8 pixels Space between Promo Height: 12 pixels Height: 25 pixels Calendar Title Bar Width: 221 pixels Height: 35 pixels Background Colour #6 Red Arial Bold 16pts Colour #8 White Month Bar Width: 221 pixels Height: 25 pixels Background Colour #7 Black Arial Bold 18pts Colour #8 White All Caps Story Type 3 Width: 221 pixels Height: 211 pixels Calendar Box Width: 221 pixels Height: 151 pixels 4 pixels border Colour #7 Black Story Type 1 (Title and Photo caption) Width: 149 pixels Height: 250 pixels Photo size Width: 401 pixels Height: 275 pixels Vote Button Width: 82 pixels Height: 19 pixels Button Colour #6 Red Arial Bold 12pts Colour #8 White All caps Space between Promo Width: 13 pixels Answers are Arial 12 pts Colour #7 Black View results is Arial 12 pts Colour #6 Red Check box Width: 16 pixels Height: 16 pixels Style Guide CFMWS Website October 2013 17
4. Landing Page with Quick Vote Results Days numbers are Arial 15pts Colour #7 Black Week Days are Arial Bold 15pts Colour #7 Black Results Box Width: 221 pixels Height: 176 pixels Background Colour #3 Light Grey Selected Day (rollover) Width: 20 pixels Height: 20 pixels 1pt Stroke Colour #6 Red Background Colour #3 Light Grey Arial Bold 15pts Colour #7 Black Height: 22 pixels Results Title Bar Width: 221 pixels Height: 35 pixels Background Colour #6 Red Arial Bold 16pts Colour #8 White Height: 21 pixels Height: 5 pixels Answers are Arial 12 pts Colour #7 Black Results Box Width: 221 pixels Height: 176 pixels Background Colour #3 Light Grey Today s Date Width: 20 pixels Height: 20 pixels Background Colour #6 Red Arial 15pts Colour #8 White Selected Day (rollover) Width: 20 pixels Height: 20 pixels 1pt Stroke Colour #6 Red Background Colour #3 Light Grey Arial Bold 15pts Colour #7 Black Day with events Arial Bold underline 15pts Colour #6 Red Answers Graphs Width: Variable Height: 20 pixels Background Gradient Colour #2 Medium Grey to Colour #3 Light Grey 1pt Stroke Colour #7 Black Arial Bold 16pts Colour #8 White or Colour #7 Black if outside the graph Style Guide CFMWS Website October 2013 18
5. Article with no photo Width: 35 pixels Logo zone Width: 159 pixels Messaging box Width: 429 pixels Page Width: 960 pixels Gradient Width: 49 pixels Photo (adjustable & rotating images) Width: 303 pixels Height: 91 pixels Language Header Width: 960 pixels Height: 16 pixels Top Banner Width: 920 pixels Height: 91 pixels Level 1 (L1) Bar Width: 920 pixels Height: 40 pixels Heading 1 Bar Width: 730 pixels Height: 40 pixels Breadcrumbs Bar Width: 960 pixels Height: 16 pixels Footer Height: 31 pixels Width: 36 pixels Content Box Width: 730 pixels Height: Any Centered Column Width: 190 pixels Height: Any Side Bar Width: 20 pixels Height: Any Side Bar Width: 20 pixels Height: Any Width: 36 pixels Style Guide CFMWS Website October 2013 19
6. Article with one photo Style Guide CFMWS Website October 2013 20
7. Article with photos Photo Large Width: 550 pixels Height: 330 pixels Photo Caption Side Bar Width: 180 pixels Height: 190 pixels Thumbnail Width: 120 pixels Height: 120 pixels Spacing under thumbnail Width: 180 pixels Height: 20 pixels Spacing left and right thumbnail Width: 30 pixels Style Guide CFMWS Website October 2013 21
8. Article with promo boxes Space above promo Height: 10 pixels Promo Type 1 Width: 170 pixels Height: 170 pixels Space between promo Height: 10 pixels Promo Type 2 Width: 170 pixels Height: 340 pixels Side space promo Width: 30 pixels Height: Any Style Guide CFMWS Website October 2013 22
9. Listing Page with Links Links are Arial 12pts Colour #6 Red Space before and after Paragraph: 12pts Link become Colour #6 Red when mouse over Space before Heading: 18pts Style Guide CFMWS Website October 2013 23
10. Photo Gallery Thumbnail selected Frame Width: 3 pixels Frame colour: Colour #7 Black Space between thumbnails Width: 15 pixels Space above thumbnail Width: 730 pixels Height: 10 pixels Thumbnail Width: 70 pixels Height: 70 pixels Space below thumbnail Height: 10 pixels Photo size Width: proportional with the photo height, centered Height: 310 pixels Style Guide CFMWS Website October 2013 24
11. Page with Table Table Header 1 Width: 730 pixels Height: 40 pixels Table Header 3 Width: 730 pixels Height: 30 pixels 12. Table Space between columns Width: 5 pixels Height: Any Style Guide CFMWS Website October 2013 25
12. Page with Form Form Width: 465 pixels Height: Any Style Guide CFMWS Website October 2013 26
13. Page with Menu L2 Tab names are Arial Bold 18pts Colour #6 Red All Caps L2 items are Arial 12pts Colour #7 Black Menu box Width: 511 pixels Height: 193 pixels Style Guide CFMWS Website October 2013 27
14. Page with Calendar of events Days numbers are Arial 12pts Colour #7 Black Week Days are Arial Bold 12pts Colour #7 Black Calendar Title Bar Width: 170 pixels Height: 27 pixels Month Bar Background Colour #6 Red Width: 170 pixels Arial Bold 12pts Colour #8 White Height: 23 pixels Background Colour #7 Black Arial Bold 14pts Colour #8 White All Caps Calendar Box Width: 170 pixels Height: 116 pixels 4 pixels Border Colour #7 Black Selected Day (rollover) Width: 16 pixels Height: 16 pixels 1pt Stroke Colour #6 Red Background Colour #3 Light Grey Arial Bold 12pts Colour #7 Black Day with events Arial Bold underline 12pts Colour #6 Red Today s Date Width: 16 pixels Height: 16 pixels Background Colour #6 Red Arial 12pts Colour #8 White Style Guide CFMWS Website October 2013 28