Site Style Guide

---

Elements

Elements are the foundation of the system. Simply using typography and color, well designed Elements can begin to express the site's personality.

• Color Palette
• Form Elements
• Typography

---

Components

Multiple Elements are combined and sometimes modified to create what we call Components. Components are designed to serve specific visual and functional roles within the system.

• Event Details
• Hero
• Homepage Item (Option 2)
• Illustrated List
• Illustrated List (compact)
• In this section
• Note
• Pagination
• Sharing Buttons
• Side Navigation
• Site Footer
• Site Header

---

Templates

Based on the needs of the content, Components are arranged into specific layouts to create Templates.

• General Page › The workhorse template. The general page can accomodate various kinds of media within the body and can be used by news and events pages as well.
• General Page (Event) › Event detail page with a 16:9 lede image, date, times, location, ticket info, and contact information.
• General Page (News Article) › News article with a 16:9 lede image.
• General Page (News Article Legacy) › News article page with a legacy-sized lede image.
• Home Page (Option 3) › The home page is targeted primarily at new users. It communicates high-level benefits, differentiators, featured content, and aims to direct users to more content deeper within the site.
• Landing Page (Option 3) › The landing page template is used by each of the main navigation items. It is meant to feature some timely content relevant to the current section, and provide access to more content within section.
• Listing Page (Events) › Sample listing page with Events content and pagination.
• Listing Page (News) › Sample listing page with News content and pagination.
• Portal Page › The portal page template curates links to relevant content based on audience-type and presents them in a listing style.