Web Styleguide METRARAIL.COM GRID SYSTEM This design utilizes Bootstrap 3’s 12-column grid. Visit www.npmjs.com/package/bootstrap-sass for installation and configuration details. 12-columns 10-columns Column-width to Gutter Ratio: 11:4 (73.5%:26.5%) 6-columns 4-columns Metra | Web Styleguide 2 COLOR PALETTE PRIMARY PALETTE BACKGROUND COLORS Metra Blue Purple Highlight Orange Background Grey Background Purple #005195 #543b8d #d03312 #F1F2F2 #f3f2f8 Metra Orange Black Dark Grey #e47224 #000000 #545454 Medium Grey Light Grey White #979797 #e2e2e2 #ffffff Metra | Web Styleguide 3 LAYER STYLES Highlight Orange / Thicc Highlight Orange / Skinny Metra Blue / Thicc Metra Blue / Skinny Border Border Border Border 10px solid #d33c1d 3px solid #d33c1d 10px solid #005195 3px solid #005195 Shadow Shadow Shadow Shadow #FFDCD4 #FFDCD4 #A6C6E2 #A6C6E2 h-offset: 0 h-offset: 0 h-offset: 0 h-offset: 0 y-offset: 4 y-offset: 4 y-offset: 4 y-offset: 4 blur: 20 blur: 20 blur: 20 blur: 20 spread: 1 spread: 1 spread: 1 spread: 1 Metra | Web Styleguide 4 Purple / Thicc Purple / Skinny Basic Card No Alerts or Events Border Border Border Border 10px solid #543b8d 3px solid #543b8d 0.5px solid #979797 0.5px solid #979797 Shadow Shadow Shadow Shadow #745BAC #745BAC #000 #000 h-offset: 0 h-offset: 0 h-offset: 0 h-offset: 0 y-offset: 4 y-offset: 4 y-offset: 2 y-offset: 2 blur: 10 blur: 10 blur: 2 blur: 2 spread: 1 spread: 1 spread: 0 spread: 0 opacity: 6 opacity: 6 Metra | Web Styleguide 5 TYPOGRAPHY Lato Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz Bold AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz Roboto Slab Regular AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz Metra | Web Styleguide 6 TEXT STYLES Header 1 Header 2 Header 3 Font: Lato Font: Roboto Slab Font: Lato Weight: Bold Weight: Regular Weight: Bold Min. / Max. Size: 36px | 90px Min. / Max. Size: 20px | 30px Min. / Max. Size: 30px | 45px Min. / Max. Line Height: Min. / Max. Line Height: Min. / Max. Line Height: 32px | 90px 28px | 50px 35px | 50px Text-shadow: 0px 0px 8px #333 Header 4 Header 5 Header 6 Font: Lato Font: Roboto Slab Font: Lato Weight: Bold Weight: Regular Weight: Bold Size: 20px Size: 16px Size: 16px Line Height: 30px Line Height: 16px Line Height: 24px Metra | Web Styleguide 7 Body copy Font: Lato Weight: Regular Size: 16px Line Height: 24px / Bold / Underline / Italic / Bold Italic Font: Lato Font: Lato Font: Lato Font: Lato Weight: Bold Weight: Regular Weight: Italic Weight: Bold Italic Size: 16px Text Decoration: Underline Size: 16px Size: 16px Line Height: 24px Size: 16px Line Height: 24px Line Height: 24px Line Height: 24px Metra | Web Styleguide 8 Main Menu Desktop / Top Level / Child Items / Active Font: Lato Font: Lato Base: Child Items Weight: Bold Weight: Regular Padding Left: 15px Size: 16px Size: 16px Line Height: 24px Line Height: 24px Mobile / Base / Active / Bold Underline Font: Lato Font: Lato Font: Lato Weight: Regular Weight: Bold Weight: Bold Minimum Size: 12px Minimum Size: 12px Text Decoration: Underline Line Height: 20px Line Height: 20px Minimum Size: 12px Line Height: 20px Utility Menu Desktop Font: Lato Mobile Font: Lato Weight: Regular Weight: Regular Size: 16px Size: 16px Letter Spacing: 0.5px Letter Spacing: 0.5px Text Align: Right Line Height: 18px Text Align: Center Metra | Web Styleguide 9 Pagination / Unvisited / Hover / Active Font: Roboto Slab Font: Roboto Slab Font: Roboto Slab Weight: Regular Weight: Regular Weight: Regular Text Decoration: Underline Text Decoration: None Size: 16px Size: 16px Size: 16px Line Height: 16px Line Height: 16px Line Height: 16px Color: Purple (#543b8d) Color: Purple (#543b8d) Homepage Slideshow / Base / Hover Font: Lato Font: Lato Weight: Regular Weight: Regular Text Decoration: Underline Text Decoration: None Size: 24px Size: 24px Line Height: 30px Line Height: 30px Color: Dark Grey (#545454) Metra | Web Styleguide 10 BUTTONS PRIMARY BUTTON Base Hover Border: 1px solid #979797 Button text Layer Style: BUTTON TEXT Height: 42px BUTTON TEXT Highlight Orange / Skinny Width: Auto Color: Black; Font: Lato Active Weight: Bold Changes from primary button Size: 14px BUTTON TEXT Background: #f8f8f8 Line Height: 14px Letter Spacing: 0.5px Text Align: Center Focus Icon Size: 15 x 15px Changes from primary button Icon Color: Highlight Orange Outer border style: BUTTON TEXT Icon Padding Left: 10px See “No Alerts or Events” Layer Style Metra | Web Styleguide 11 TEXT BASED BUTTON Base Hover BUTTON TEXT Border Bottom: 1px solid #979797 BUTTON TEXT Changes from primary button Height: 42px Border Bottom Animation BUTTON TEXT Width: Auto • Dotted to solid Color: Medium Grey • Left to right Font: Roboto Slab • Gradient Size: 20px background: rgb(228,114,36); Line Height: 24px background: linear-gradient(315deg, Text Decoration: None rgba(228,114,36,1) 0%, rgba(208,51,18,1) 49%, Text Transform: Uppercase rgba(84,59,141,1) 100%); Align: Right Active BUTTON TEXT Changes from primary button Color: #543b8d (Purple) Focus Changes from primary button BUTTON TEXT Outer border style: See “No Alerts or Events” Layer Style Metra | Web Styleguide 12 SLIDESHOW ARROWS Base Hover Changes from primary button Opacity: 35% Border: 1px solid #979797 87px Height: Focus Width: 174px Changes from primary button Icons: Chevrons Left & Right 13 x 21px Outer border style: Icon Color: Varies See “No Alerts or Events” Layer Style Metra | Web Styleguide 13 ICONS MAIN & UTILITY MENU CHEVRONS & ARROWS Search Hamburger Menu More Menu Items Up Right / Forward Left / Back Down Service Alerts Find Next Bus Maps & Schedules Up To Move Forward Back To Down From BASE UI INPUTS Close Search Filter Radio / Unselected Radio / Deselect Date Picker Metra | Web Styleguide 14 INPUTS TEXT FIELDS INPUT WITH ICON (I.E., DROPDOWN, DATE PICKER) Input Title Input Title Input Placeholder Input Placeholder Input Title Text Style: Body Copy / Bold Input Title Text Style: Body Copy / Bold Input Placeholder: Header 5 / Black Input Placeholder: Header 5 / Black Padding Left & Right: 15px Width: To match width of content Width: To match width of content Height: 42px Height: 42px Padding Left & Right: 15px Icon: Varies Icon Size: 15 x 15px TEXT AREA Input Title Input Title Text Style: Body Copy / Bold Input Placeholder: Header 5 / Black Input Placeholder Width: To match width of content Height: 106px Metra | Web Styleguide 15 TABLES Table Header Text Style: Header 5 Capital Program Line Abbreviations Table Row Table Data::first-child { Text: Body Copy Text Style Align: Right Border: none } Table Row Table Data::not-first-child { Text: Header 6 Align: Left Border: 0.5px solid #B9B9B9 } Metra | Web Styleguide 16 FILTERS Desktop FILTER ACCORDION ACTIVE FILTER ACCORDION Text Style: Body Copy Bold Text Style: Body Copy Bold Layer Style: Basic Card Layer Style: Highlight Orange / Skinny Icon: Chevron Down / Highlight Orange Icon: Chevron Down / Highlight Orange FILTER ACCORDION - OPEN ACTIVE FILTER ACCORDION - OPEN Text Style: Body Copy Bold Filter Category Text Style: Body Copy Bold / Highlight Orange Layer Style: Basic Card Filter Option Text Style: Body Copy Icons: Selected, Filter Option Text Style: Body Copy Bold • Chevron Up / Highlight Orange Layer Style: Highlight Orange / Skinny • Radio Unselected / Dark Grey Icons: • Chevron Up / Highlight Orange • Radio Unselected / Dark Grey • Radio Deselect / Highlight Orange Metra | Web Styleguide 17 FILTERS Mobile Filters are a full screen takeover on mobile. Header Text Style: Header 5 / White Height: 42px Icon: Close / 12 x 12px / White Header Background Gradient: background: rgb(0,81,149); background: linear-gradient(227deg, rgba(0,81,149,1) 0%, rgba(84,59,141,1) 50%, rgba(228,114,36,1) 100%); Filters Background: #f8f8f8 Filter Category Text Style: Body Copy Bold Filter Option Text Style: Body Copy Selected, Filter Option Text Style: Body Copy Bold Icons: Unselected / Dark Grey | Deselected / Highlight Orange Metra | Web Styleguide 18 PHOTOGRAPHY Photography should leverage artistic crops and perspectives to emphasis people. Images of Metra employees interacting with customer are always preferred. Illustrate diversity in photography as a collective unit. Prioritize bright lighting and bold colors. Where possible, create a sense of or focus on movement. Metra | Web Styleguide 19 IMAGE SPECIFICATIONS There are 3 ways to display an image: Full width banner • Full width banner Width: Natural • Half width banner Height: 483px Crop: Center center • On an event detail page • Within WYSIWIG editors Half width banner Width: 50% page width Height: 483px Crop: Center center Event detail image Width: Natural Height: 314px Crop: Center center Within WYSIWIG editors Width: Natural Height: Natural Display Width: Follows content column count Display Height: Naturally proportionate *Please follow best practices for file sizes to ensure speedy load times. Metra | Web Styleguide 20.