Skip to content

Main Content

Web & Mobile

These standards, guidelines and resources will equip you to create an engaging Stanford web experience, regardless of our visitor's devices or abilities.

Introduction
Standards and policies
Do-it-yourself templates
Download and request templates
Customized websites and support
Jumpstart and Stanford Web Services
Building something new
Essential elements and guidelines

Introduction

Standards and policies for Stanford websites

Stanford websites must be accessible.

Stanford University is committed to providing an online environment that is accessible to everyone, including individuals with disabilities.

Design for all sized screens.

We can no longer assume what device a person will use to visit us on the web, so our websites should be developed for all screen sizes – from mobile to desktop.

Make websites intuitive and easy to use.

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.

Create unity, not uniformity.

Our brand guidelines for websites make the Stanford web experience consistent while providing the flexibility needed to communicate unique messages. We have two essential web branding elements – the Stanford Brand Bar and Universal Footer – that should be included in all Stanford websites. These are built into all our available templates.

Relevant Policies:

Stanford.edu URL Name Assignments

Stanford University owns the Stanford.EDU Internet domain and assigns URLs to benefit the academic, research and other University activities and interests. For information about rules that apply to Stanford.EDU domain names, please consult the Stanford.EDU URL Assignment Policy.

Stanford.EDU URL Assignment Policy

Online Accessibility

All Stanford academic and administrative units that create and maintain Websites and web‐based applications used in the programs and activities of the University will make them accessible to its students, faculty, staff and participants in the University’s programs and activities who have disabilities. All personnel who are involved in the procurement, preparation and maintenance of University Websites and web‐based applications should adopt this goal, with the assistance of campus resources dedicated to supporting web accessibility. For full details on scope and implementation, please refer to:

Stanford University Online Accessibility Policy

Back to top

Do-it-yourself Templates

Pre-approved website templates available on multiple content management platforms

For the Stanford community

These templates are available for immediate download and install to the Stanford community with a SUNet ID. They can be used for Stanford clubs, groups, blogs and other Stanford-related websites.

Stanford Light (Drupal)

Stanford Light is a 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.

Get Stanford Light

Lagunita (Wordpress)

The Lagunita theme is a lightly branded WordPress theme available to any Stanford group or organization. It is installed by default when you request a new WordPress site via University IT's WordPress Installer. To update an existing WordPress site to Lagunita, download the theme.

Get Lagunita

Lagunita (HTML)

We also have an HTML version of the Lagunita theme for use on static websites or as a Dreamweaver template.

Get Lagunita HTML

For administrative units, departments, centers and labs

These themes use the departmental signature, and are only available by request for Stanford administrative units, academic departments, centers and labs that are allowed to use a department signature.

Stanford Framework (Drupal)

Stanford Framework is a Drupal theme specifically designed for Stanford. This theme includes Stanford branding as well as useful theme options to assist in creating site title treatments that align with Stanford's identity guidelines.

Request Stanford Framework

Cardinal (Wordpress)

The Cardinal theme is a Stanford-branded WordPress and HTML theme that offers a traditional Stanford look and feel. The Cardinal theme is only approved for use by departments and administrative units that qualify for a department signature through the Identity Toolkit.

Request Cardinal

Cardinal (HTML)

We also have an HTML version of the Cardinal theme for use on static websites or as a Dreamweaver template.

The Cardinal template is only approved for use by departments and administrative units that qualify for a department signature through 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 regularly.

If you are looking to set up a website, check out UIT’s web publishing guide.

Back to top

Customized websites and support

In situations where the templates 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

Building something new

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

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 and more intuitive experience with navigating through the constellation of Stanford websites.

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:

<link href="https://www.stanford.edu/su-identity/css/su-identity.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie8.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie7.css" />
<![endif]-->

Step Two:

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

<!-- Brandbar snippet start -->
<div id="brandbar">
<div class="container">
<a href="http://www.stanford.edu">
  <img src="https://www.stanford.edu/su-identity/images/brandbar-stanford-logo@2x.png" alt="Stanford University" width="152" height="23">
</a>
</div> <!-- .container end -->
</div> <!-- #brandbar end -->
<!-- Brandbar snippet end -->

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 emergency information, 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 universal footer.

Add the Universal Footer to your website

Step One:

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.

<link href="https://www.stanford.edu/su-identity/css/su-identity.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie8.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="https://www.stanford.edu/su-identity/css/ie/ie7.css" />
<![endif]-->

Step Two:

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

<div id="su-wrap"> <!-- #su-wrap start -->
<div id="su-content"> <!-- #su-content start -->

Step Three:

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

</div> <!-- #su-content end -->
</div> <!-- #su-wrap end -->

<!-- Global footer snippet start -->
<div id="global-footer">
<div class="container">
<div class="row">
  <div id="bottom-logo" class="span2">
    <a href="http://www.stanford.edu">
      <img src="https://www.stanford.edu/su-identity/images/footer-stanford-logo@2x.png" alt="Stanford University" width="105" height="49"/>
    </a>
  </div>
  <!-- #bottom-logo end -->
  <div id="bottom-text" class="span10">
    <ul>
      <li class="home"><a href="http://www.stanford.edu">SU Home</a></li>
      <li class="maps alt"><a href="http://visit.stanford.edu/plan/maps.html">Maps &amp; Directions</a></li>
      <li class="search-stanford"><a href="http://www.stanford.edu/search/">Search Stanford</a></li>
      <li class="terms alt"><a href="http://www.stanford.edu/site/terms.html">Terms of Use</a></li>
      <li class="emergency-info"><a href="http://emergency.stanford.edu">Emergency Info</a></li>
    </ul>
  </div> <!-- .bottom-text end -->
  <div class="clear"></div>
  <p class="copyright vcard">&copy; <span class="fn org">Stanford University</span>, <span class="adr"> <span class="locality">Stanford</span>, <span class="region">California</span> <span class="postal-code">94305</span></span>.&nbsp;&nbsp;
  <span id="copyright-complaint"><a href="https://uit.stanford.edu/security/copyright-infringement" class="copyright-complaint" >Copyright Complaints</a></span>
  </p>
</div> <!-- .row end -->
</div> <!-- .container end -->
</div> <!-- global-footer end -->
<!-- Global footer snippet end -->

Awesome, you're done!

Favicon

A favicon is an icon used next to your page title in a web browser that gives a visual cue to your web page. It's also used by mobile devices when a user adds a link to your website to their homescreen. Different devices use different sizes of favicons.

Add Stanford's favicon to your website

Step One:

Download this favicon and save it to the root directory of your website.


Download the Favicon (.ico)

Step Two:

Copy these lines to the <head> section of your web page:

<link rel="apple-touch-icon" sizes="57x57" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="//www-media.stanford.edu/assets/favicon/apple-touch-icon-180x180.png" />

<link rel="icon" type="image/png" href="//www-media.stanford.edu/assets/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="//www-media.stanford.edu/assets/favicon/favicon-192x192.png" sizes="192x192" />
<link rel="icon" type="image/png" href="//www-media.stanford.edu/assets/favicon/favicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="//www-media.stanford.edu/assets/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="//www-media.stanford.edu/assets/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="//www-media.stanford.edu/assets/favicon/favicon-16x16.png" sizes="16x16" />

<link rel="mask-icon" href="//www-media.stanford.edu/assets/favicon/safari-pinned-tab.svg" color="#ffffff">
<meta name="application-name" content="Stanford University"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="//www-media.stanford.edu/assets/favicon/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="//www-media.stanford.edu/assets/favicon/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="//www-media.stanford.edu/assets/favicon/mstile-150x150.png" />
<meta name="msapplication-square310x310logo" content="//www-media.stanford.edu/assets/favicon/mstile-310x310.png" />

Awesome, you're done!

Styling links

For link colors, use Bright Blue. Hover/active state on link colors should be Blue. As an alternate, use Dark Red as your primary link color with Black as the hover/active color. Do not use these shades of blue in contexts other than links.

Bright Blue (Link)

Bright blue should be used as the link color on light backgrounds.

Hex:
#006CB8

Blue (Link Hover)

Blue should be used for link hover color on light backgrounds.

Hex:
#00548f

Web theme color options

All Stanford websites should meet WCAG AA color contrast standards of a minimum 3.0 color contrast ratio for headings/bold text and 4.5 color contrast ratio for paragraph text. To use colors in an accessible way, pair light text on dark backgrounds or dark text on light backgrounds. Here are some recommended combinations:

Colors for light themes

Black (Text)

Hex:
#2e2d29

Bright Blue (Link)

Hex:
#006CB8

White (Background)

Hex:
#ffffff

Fog (Background)

Hex:
#F4F4F4

Light Sandstone (Background)

Hex:
#F9F6EF

Colors for dark themes

White (Text)

Hex:
#ffffff

White (Link)

Hex:
#ffffff

Chocolate(Background)

Hex:
#2F2424

Stone (Background)

Hex:
#544948

Image (Background)

Hex:
n/a

Do

  • Leverage the Stanford Identity guidelines and use them appropriately. This covers everything from our name and emblems, department branding, color, typography, to medium-specific applications.
  • Be recognizably “Stanford”. While we don’t want every site to look the same, all our websites should retain a clear visual connection to Stanford. Our brand guidelines for websites make the Stanford web experience consistent while providing the flexibility needed to communicate unique messages.
  • Incorporate the essential elements. Make sure you add the Stanford Brand Bar and Universal footer to your websites. This makes for a better user experience and connects individual sites to the broader Stanford context.
  • Accessibility is a requirement. Not only is this a legal imperative, it’s the right thing to do. Please refer to the Online Accessibility Policy for details.
  • Design for all sized screens. We can no longer assume what device a person will use to visit us on the web, so our websites should be developed for all screen sizes – from mobile to desktop.
  • Make websites intuitive and easy to use. 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.

Don't

  • Don’t ignore guidelines on proper use of our name and emblems, color, and typography. Read the documentation and properly use Stanford’s name and emblems, department branding, color, typography, and medium-specific applications.
  • Don’t eliminate all visual ties to Stanford. While each organization's style and contributions are unique and valuable, be sure to also retain a clear relationship to Stanford – especially through the use of the Brand Bar, Universal footer and Stanford Identity elements.
  • Don’t treat accessibility as an add-on. There are many accessibility concerns that affect every step of the design process. Waiting until implementation to start will be too late.
  • Don’t 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