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.
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:
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 HTMLFor 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 HTMLHelpful 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 topCustomized 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 JumpstartStanford 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 SWSBuilding 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.
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.
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.
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
- The Stanford Identity Toolkit
The Identity Toolkit has guidelines for proper use of our name and emblems, department branding, color, typography, and other medium-specific applications. - Important Policies
We have a number of policies that govern how individuals and organizations can communicate on behalf of Stanford. Read and abide by them. - SALLIE Photo Database
SALLIE is Stanford’s online photo database. Request access (you will need a faculty sponsor) and check out the Stanford Selects collection. - Stanford Online Accessibility Program (SOAP)
The Stanford Online Accessibility Program provides resources for Stanford web designers, developers, content creators, and those assisting Stanford with these activities, so that they can produce materials which are accessible to the broadest audience possible. - A few good examples for inspiration: