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.
Get 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.
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
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.
Request 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.
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.
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
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.
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
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
Copy these lines before the closing
</head> section of your web page:
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.
Add the Universal Footer to your website
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.
Copy these lines immediately after the
<body> tag of your web page:
Copy these lines immediately before the
</body> tag of your web page:
Awesome, you're done!
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.
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
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.
- 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
- 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.
- SALLIE Photo Database
Request access (you will need a facutly sponsor) and check out the Stanford Selects collection
- Stanford Online Accessibility Program (SOAP)
We have a lot of resources and documentation on how to be accessible in a broad set of contexts.
- Good examples of Stanford websites:
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.