Carnegie Mellon University

Web Guidelines

Carnegie Mellon University's web design improves functionality and heightens the impact of the university's digital space, while building consistency across university websites. University Communications & Marketing is constantly working to review and update existing web policies and standards as the web evolves.

Questions? Contact us at

Free CMU Content Management System (CMS)

Computing Services and University Communications & Marketing offer a free, hosted CMS and provide support for official units to create and maintain their own websites. More than 200 sites are hosted within the centrally maintained CMS, from small administrative units to large academic programs and colleges. To stay up-to-date on CMS upgrades and news, join the "CMS announce" distribution list.

If you choose to build your website in another CMS, please contact the Online Strategy team to discuss important considerations, and follow the guidelines below to ensure a consistent user experience and uphold the CMU brand.


Top Left is Best

screenshot of wordmark on website

The Wordmark should always appear in the top left corner of every web page and link to CMU's homepage: For consistency and maximum brand recall, the top left corner is best. People are 89% more likely to remember logos shown in the traditional, top-left position than logos placed on the right.

Above All Else

screenshot of leadership website sitename

To standardize identity hierarchy, the name of a school, department or any other unit must appear below the university Wordmark.

There's Only One

screenshot of improper use of wordmark on website

Put only one instance of the Wordmark at the top of each page.


The following colors are preset in the CMS template 6.0. These web-safe colors have been tested and selected for accessibility and align to the university color palette. Refer to these colors when building any digital communications, including external websites, emails, apps, etc.



196, 18, 48


224, 224, 224

Dark Gray

77, 80, 81



253, 181, 21


0, 130, 133


4, 54, 115


0, 133, 62

Dark Green

31, 76, 76



Google makes it easy; they host the files and provide the embed code. For a fast website, only load the weights you need.

Loading Fonts

To speed up load time, only use Open Sans for screens larger than tablet.

@media only screen and (min-width: 768px) {
html, button, input, select, textarea {
font-family: 'Open Sans', 'Helvetica', sans-serif

Mobile visitors should see Roboto (Android), Helvetica (iOS), or the browser's default sans-serif. If you don't apply Open Sans to any elements in the CSS, then browsers won't download it.

html, button, input, select, textarea {
font-family: 'Roboto', 'Helvetica', sans-serif

Links in Copy

Always underline links to make them distinguishable from other text. If possible, use a bottom border instead of an underline to improve readability, as bottom borders won't intersect with descenders.

Same Tab vs. New Tab

  • Links within your own website should open in the same tab.
  • Non-CMU websites, PDFs and Word Docs should open in a new tab.

Don't Click Here

Linked text should be relevant and meaningful. Do not link words like "here" or "this page." This is important for accessibility, readability and search engine optimization (SEO). It's difficult for humans and search robots to determine the context of poor link text.

Incorrect: Watch our YouTube playlist here.
Correct: Watch our YouTube playlist.

Call to Action Links

Links can stand out with a Call to Action (CTA) style. CMU's CTA is bold in caps with an arrow after the text.


Regular Buttons

  • Rectangular
  • Use in any of the colors listed above
  • 2px bottom-border to show dimension and clickability

Ghost Buttons


File Types


Web images should have a resolution of 72dpi (dots per inch). Use JPG for photos and PNG for graphics. Other acceptable file types include GIF and SVG.

Oversized Photos

screenshot of a homepage hero

High resolution photos should only load for desktop visitors. Extravagant imagery increases load time and deters mobile visitors.


screenshot of a compressed image

To improve load time and cut bandwidth consumption for visitors to your website, compress all images. We recommend using and

Accessibility, performance & browser support

WAVE logo

Web accessibility means that people with disabilities can use the web. It ensures that all people can understand and interact with your website. We urge university website owners to provide equal opportunity to people with disabilities and be A and AA compliant. Read about CMU's web accessibility standards.

screenshot of navigation in grayscale

Convert your website to grayscale with Photoshop (Image > Adjustments > Desaturate) or use a CSS filter to check if actionable items look clickable for people with colorblindness.

pie chart of page load asset breakdown

Webpages should load fast. Check your performance using or YSlow.

image of Chrome and IE browser logos

Support modern, popular browsers including phones and tablets.

Social media Icons & Resources

Social Media Icons

Popular social media channels provide official icons; please use them. Flat versions preferred.

Address & Contact Info

It has become a standard to keep the address, phone number, email address, contact us link and social media icons for websites in the footer of every page. Visitors to your website will expect them to be there.

Email signatures

Electronic signatures can support the university's brand. Some suggestions:

  • Use Carnegie Mellon University's full name. Do not use CMU.
  • For ease of reading, use the default font of your email application or a common sans serif like Helvetica or Arial at 12px or larger. Do not use a decorative font.
  • Keep recipients from downloading superfluous files; please do not embed images.


Andrew Carnegie
Philanthropist & Founder
Carnegie Mellon University


Andrew Carnegie
Philanthropist & Founder, CMU
CMU Wordmark
(412) 268-2000
tree Please consider the environment before printing this email.

HTML Emails, Newsletters, Invitations

All digital collateral (e.g., HTML emails, invitations, etc.) must follow Visual Identity guidelines, and the Wordmark must be present and used properly.