This style guide demonstrates design elements and components used in the Emory School of Medicine site.
If you have questions about this guide or how to use the styles, contact SOMcommunications@emory.edu.
In this section:
Fonts
Fonts are usually set by the stylesheet and can not be altered. Below is a demonstration of the font styles and how they are used throughout the site.
Primary Font: Noto Sans
Noto Sans is the primary font for the website and is used for most body copy and text on the site.
- Noto Sans Font Example
- abcdefghijklmnopqrstuvwxyz
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et tincidunt lectus.
Secondary Font: Spectral
Spectral is used for headlines and some display text.
- Spectral Font Example
- abcdefghijklmnopqrstuvwxyz
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et tincidunt lectus.
Tertiary Font: Barlow Condensed
Barlow Condensed is used sparingly as a display font for dates, quotations and other special cases.
- Barlow Condensed Font Example
- abcdefghijklmnopqrstuvwxyz
- ABCDEFGHIJKLMNOPQRSTUVWXYZ
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et tincidunt lectus.
Colors
These colors coordinate with the Emory University color palette.
Primary Colors
These primary colors are the main palette of the site. In most cases, the color of text, headings, and other site elements are set by the stylesheet and can not be changed by editors.
Secondary Colors
These colors are used to support the primary palette. They are typically applied automatically to elements in the site, but some elements support the option to choose a color for accent or decoration (some Simple Blocks and Colorblock Teasers support custom color options).
- Rainbow 1
- Rainbow 2
- Rainbow 3
- Rainbow 4
- Rainbow 5
- Rainbow 6
- Rainbow 7
- Rainbow 8
- Rainbow 9
- Rainbow 10
- Rainbow 11
- Rainbow 12
- Rainbow 13
- Rainbow 14
- Rainbow 15
- Rainbow 16
- Rainbow 17
- Rainbow 18
Support Colors
These colors are used throughout the site for backgrounds, text, shadows, and utilities. Elements styled with these colors are set by the stylesheet and can not be changed by editors.
Photography Guidelines
Quick photography guide:
- Aspect ratio: 16:9
- Maximum size: 2000px wide x 1125px tall
-
Minimum sizes:
- 1680px wide x 945px tall for images that will touch the edges of the page (images in Page Headers or Edge to Edge Teasers)
- 1000px wide x 562.5 tall for all other images
- The CMS has a max upload size of 20mb, but a 20mb image is very large and should not be used as a target size.
Image Cropping Tutorial
This video shows an example of how to prepare images for the website using a free online photo editing tool.
Photography Style
Photography is a key tool for showing our diverse and dynamic community.
The photography style is light, airy and natural. Use natural light whenever possible.
Avoid unnatural angles (acceptable in detail shots with shallow depth of field).
People play a key role in defining the subject matter of our photography. Finding the humanity in our stories helps us connect to our audience in a powerful way. Object shots or shots of projects and innovations can and should be used in a supporting role.
Architectural photography can give a sense of place, highlighting the distinct look of the Emory campus. Focus on details, and let these photos take a back seat to the topical and people-focused imagery.