- Grids & PSD Files
- Typographic System
- Desktop Patterns & UI
- Mobile Patterns & UI
- Content Styles
Header & Footer
Universal Header (black bar)
A black bar containing the HBS logo sits at the top of every page.
The HBS logo always links to the HBS home page (www.hbs.edu), where users can access other areas of the site.
The name of the section (e.g., "Alumni" or "About") appears in all white capitals within a black bar in the primary color field. This head links back to the home page of the section (in this example, "Doctoral Programs").
On screens smaller than 1000 px, section navigation (both primary and utility) is, by default, collapsed and is available by tapping on the "Menu" (dashes) icon that sits to the right of the collapsed search icon. The tappable area for the Menu icon (and any other navigation icons) should be 80px square.
At screen sizes smaller than 1000 px, search is collapsed into a "Search" (magnifying glass) icon that resides in the primary color field to the left of the collapsed section navigation icon.
The search interface (flyout) slides in from the right and can be closed by tapping the "X" or anywhere outside of the flyout.
The user can click within the search box to enter a search term, and click the accompanying Search icon to search the site.
The footer should appear on every page and follows the same content rules as the desktop footer except that the content adjust and stacks as the width narrows.