Applying the Identity

Web & Mobile

Our websites are the most common way that people interact with Stanford. Outlined here are standards, guidelines and resources to equip you to make this experience wonderful regardless of our visitor's devices or abilities.


Stanford Website Principles

  • Be accessible. We want everyone, regardless of their ability, to be able to interact with us and the amazing work that we all do.
  • Design for all sized screens. We can no longer assume what device a person will use to visit us on the web, so our web properties should be developed to be responsive for all screen sizes - mobile to desktop.
  • Make it usable. We want to make it as easy and intuitive as possible for people to interact with us online. Be clear. Simplify.
  • Use semantic markup. We should follow code best practices with semantic HTML and CSS (this also helps with Accessibility and Usability).
  • Unity, not uniformity. Our brand guidelines for web serve to make the experience of interacting with Stanford consistent while remaining flexible.

Keep in mind:

Back to top

Themes & Templates

We've got a few pre-approved website themes available on multiple CMS platforms to make setting up your website easier.

For the Stanford community

These themes are available to the Stanford community and are ideal for clubs, groups, blogs and personal websites which do not require Stanford branding but still want the look and feel of a professional Stanford website.

Stanford Light

Stanford Light is a new, flexible Drupal theme based on Open Framework that allows you to easily customize the look-and-feel of your site using several new theme options. Theme options in Stanford Light let you choose from three font families and seven visual styles. Fonts and colors are variations on those recommended in the Stanford Identity Toolkit. You can also easily add background images to your header.

Get Stanford Light

Lagunita

The Lagunita theme is a lightly branded WordPress and HTML theme available to any Stanford group or organization. It is installed by default when you request a new WordPress site via the Collaboration Tools Installer.

When you use the Collaboration Tools Upgrader to upgrade your existing WordPress site, the Lagunita theme will be added to your site; however, your site will not automatically switch to the new theme.

Download Lagunita

Lagunita

We also have an HTML version of the Lagunita theme for use on static websites or that can be converted to a Dreamweaver template.

Download Lagunita HTML

For administrative units, departments, centers and labs

Use these branded themes if you are an official unit within Stanford. In the eyes of people interacting with Stanford, you speak on behalf of us all.

Stanford Framework

Stanford Framework is a base Drupal theme specifically designed for Stanford. This theme includes the official Stanford header and footer bars, as well as useful theme options to assist in creating site title treatments that align with Stanford's identity guidelines. Stanford Framework features sans-serif typography, simplified menu styles, and use of Stanford colors in block, link, and image styles. These features make Stanford Framework an ideal base theme on which to build Stanford-branded subthemes.

Request Stanford Framework

Cardinal

The Cardinal theme is a Stanford-branded WordPress and HTML theme that offers a look consistent with Stanford's homepage. The Cardinal theme is only approved for use by departments and administrative units that qualify for an official departmental signature, per the Identity Toolkit.

Request Cardinal

Cardinal

We also have an HTML version of the Cardinal theme for use on static websites or that can be converted to a Dreamweaver template.

The Cardinal theme is only approved for use by departments and administrative units that qualify for an official departmental signature, per the Identity Toolkit.

Request Cardinal HTML

Helpful Resources

You can review the Drupal themes and Wordpress themes currently available on campus. Additionally, there is a Drupal Community of Practice and a Wordpress Community of Practice that meet reguarly.

If you are looking to set up a website, check out Stanford Sites for hosting options or you can set up a WordPress powered website with CollabTools.

Back to top

Custom Website Development

In situations where the theme resources available do not meet your needs, we have more robust options for website development on campus. This is a great place to start before seeking a vendor off campus.

Jumpstart

Stanford Sites Jumpstart is a pre-built website solution, offering an array of visually compelling page layouts, dynamic content types, and easy-to-use tools for managing your content in a Stanford-branded design. Hosted on the secure and centrally-managed Stanford Sites, Jumpstart includes dedicated support through launch and beyond from the Stanford Web Services team.

Learn more about Jumpstart

Stanford Web Services (SWS)

Stanford Web Services provides the Stanford community a full range of website planning, design, development, and maintenance support at well below market rates.

Start a conversation with SWS
Back to top

Essential Elements

While these come standard with our pre-approved themes, if you're customizing or starting from scratch, make sure you include these essential elements.

The Stanford Brand Bar

The Stanford Brand Bar is a 30px tall red bar recommended to place at the top of all official university websites. It was designed to enhance sites with consistent Stanford branding.

The Stanford signature in the bar links back to the university homepage. An optional "Login" link can be placed in the far right corner of the brand bar for website which provide login functionality.

No content of any kind should appear above this bar (except skip navigation links for accessibility).
No other links or text should be placed inside the Brand Bar.

Add the Brand Bar to your website

Step One:

Copy these lines before the closing </head> section of your web page:


Step Two:

Copy these lines immediately after the <body> tag of your web page:

Awesome, you're done!

The Stanford Universal Footer

The Stanford Universal Footer is a 120px tall red footer recommended to place at the bottom of all official university websites. It was designed to enhance sites with consistent Stanford branding and navigation.

The stacked Stanford signature in the bar links back to the university homepage. The other links provide consistent navigation to university directions, search and terms of use. These links may not be altered in any way and no other text or links should be included in the universal footer. A site footer can appear immediately above (see the current page as an example.) No content of any kind should appear below the unviversal footer.

Add the Universal Footer to your website

Step 1:

If you have already added the Stanford Brand Bar skip to Step Two.

Copy the line below into the <head> section of your web page.


Step Two:

Copy these lines immediately after the <body> tag of your web page:


Step Three:

Copy these lines immediately before the </body> tag of your web page:

Awesome, you're done!

Accessibility

The Stanford Online Accessibility Program (SOAP) provides resources for Stanford web designers, developers and content creators so that they can produce materials which are accessible to the broadest audience possible. The program achieves this through the promotion of universal design and web standards compliance.

Get Accessibility Resources

Web Fonts & Colors

We've chosen our colors and fonts to reproduce well in digital contexts. There's more detailed information on those pages.

Favicons

A favicon is an icon used next to your page title in a web browser that gives a visual cue to your web page. If you're making a Stanford site, use this one.

Download the Favicon
Back to top

Guidelines for Developers & Vendors

We're excited that you're working to help tell the Stanford story. We want you to succeed, so please make use of these guidelines and resources.

Do

  • Leverage these brand guidelines and use them appropriately
  • Be recongizably 'Stanford'
    While we dont want every site to look the same (how boring!), all our websites should retain a visual connection to Stanford.
  • For a better UX, connect the individual site to the broader Stanford context
    Navigating around the constellation of Stanford websites can be frustrating and confusing. We all exist in a broader context and our visitors benefit from making this clearer. The Brand Bar and Universal footer help a lot.
  • Accessibility is a requirement
    Not only is this a legal imperitive (being accessible is cheaper than a lawsuit), it's the right thing to do and lets us share with everyone, regardless of their ability.
  • Make it responsive

Don't

  • Ignore guidelines on proper use of brand marks, color, etc
  • Be terminally unique
    While each organization's style and contributions are unique and valuable, present these in such a way that we also retain a clear relationship to Stanford.
  • Treat accessibility as an add on
    There are many accessibility concerns that affect every step of the design process. Waiting to implementaiton to start will be too late.
  • Forget to check for enough contrast on color and type
    A good rule of thumb is 50% contrast between elements. Pay extra attention to this for text overlaid on images. For more specific guidelines check out the SOAP site.

Resources

Back to top
Last updated: 8/29/16
  • 02/1/17 - Launched new website and reorganized content. Expanded themes & templates and essential elements sections. Added web principles, custom web development, and guidelines for vendors sections.