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