Brand Guidelines

Emory Brand Guidelines:

• Brand Colors:

• Fonts:
  • Noto Serif
  • Lato
  • Ionicons
  • Font Awesome Icons
• Typography:
  • H1 48px (#4a4a4a)
  • H2 32px (#4a4a4a)
  • H3 25px (#143b83)
  • H4 22px (#4a4a4a)
  • H5 18px (#4a4a4a)

• Responsive Page Layout:
  • This website templates will be "responsive" to display optimally on various devices (desktops, laptops, tables, and phones) to provide
    easy reading and navigation without resizing, panning, and scrolling. The templates will use media queries to resize the display of the 
    content on website pages according to defined breakpoints. The breakpoints are mostly based on minimum viewport widths and allow
    us to scale up elements as the viewport changes.
    • Mobile <768
    • Tablet  >768
    • Desktop >1200
• Imagery:
  • Maintaining a fast and responsive site is a critical component in delivering an excellent user experience. A big factor in how
    well your site performs is the image, video, and page size. To keep your site as fast and responsive as possible, Content Authors
    should not exceed the following size targets:
    • Image Targets
      DPI: 72 DPI for images without zoom, 92 DPI for images with zoom
      File Size: &5kb for images within the content area, 300 KB for full-width images or images with zoom
    • Hosted Video files:
      Target is 2MB but no larger than 5MB
    • Page Size Target:
      2MB or under
• Overview of Right Rail:
  • The right rail navigation column will be displayed to the right of the page content and below the impact image. On Mobile, the navigation
    drops into an accordion menu that displays above the page title along with the right rail directly below. The interior navigation will be
    dynamically generated to show all pages and external links that are in the current section of the CMS.
    • The navigation will support up to tier 4 navigation. All lower tiers should be created within the content on the page.
    • A carat will be shown to the right of the menu item, if the folder level goes down another tier. If there is no other tier below, the carat
      will not be shown.
• Structure:
  •  In the following, "current page" is the page in question, and "current folder" is the immediate container of the current page in the CMS site
    structure. On each page, the section navigation will be dynamically generate in Sitecore to show links to the current page, it's siblings, it's
    children, and its parent.
• Current Page:
  • The section navigation will include a link to the current page. 
• Siblings:
  • The section navigation also includes links to two kinds of assets that are in the current folder along with the current page
    •  Pages
    • Navigation Links Not In Current Folder
  • Clicking a link to a sibling page in the current folder will take you to that page, where the only difference in the section navigation would
    be that a different link is now marked as the current page. In contrast, navigation links can link anywhere, either within the website
    or to any external site. 
• Children:
  • The section navigation will include links to index pages in immediate child folders of the current folder (if any). Clicking a child link
    represents advancing further down the folder hierarchy of the site. On the destination child page, the section navigation will in turn show
    links to the new current page's parent, siblings, and immediate children.
• Parent:
  • The section navigation will also include a "parent link" at the top. The parent link will like to the index page in the folder that is the 
    parent/containing folder of the current folder. Clicking the parent link will therefore "go up a level" in the site structure, relative to the 
    current page. The parent link will be visually separated from the links below using indentation. 
    
    If the current folder is the highest-level folder (and has no parent folder in the site), there will be no indentation used and no parent link
    will be displayed. 
• Link Order:
  • The parent link will be added at the top, above all other links in the section navigation. Links to the current page, sibling assets, and children will 
    be displayed in CMS folder order. (For best presentation, then, index pages should be given top folder order in CMS.)
    
    This approach for section navigation removes any limit on folder level creation. The use of Navigation Link assets (described below) will provide
    the option of adding additional links that are currently not in the same current directory to assets such as pages, files or external links. 
• Example Links:
  • Sample site structure and respective section navigation links per page are shown here.