All Stanford websites and applications must abide by these standards and policies.
Stanford University is committed to providing an online environment that is accessible to everyone, including individuals with disabilities.
Learn more about the Stanford Online Accessibility Policy
Get resources for Stanford web designers, developers and content creators so that they can produce materials which are accessible to the broadest audience possible.
Learn more about the Stanford Online Accessibility Program
Design for all devices
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. And for different input and output such as screen readers, magnifications, and voice controls.
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. Simplify, stay consistent, communicate quickly and make controls obvious.
Use semantic markup
All websites and applications should follow code best practices with semantic HTML and CSS. This also helps with accessibility and usability. It is easy to validate your HTML using the W3C Markup Validation Service.
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 Identity Bar and Global Footer – those should be included in all Stanford websites. They are built into all of our available templates.
What do I need to be brand compliant on my website?
Required – Stanford Identity Bar
The Stanford Identity Bar should be placed at the top of all official university websites. It is is a 30px tall bar designed to provide consistent and clear Stanford branding as well as an intuitive experience while navigating through the constellation of Stanford websites. The Stanford signature in the bar should always link back to the university homepage.
The default color for the Identity Bar is Cardinal red, and there are three alternate color options (digital red, white, and black) for situations where a different color is preferable.
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 Identity Bar.
Get example code for the Identity Bar on the Decanter website.
Required – Stanford Global Footer
The Stanford Global Footer should be placed at the bottom of all official university websites. It is designed to enhance sites with consistent Stanford branding and navigation.
The default color for the Global Footer is Cardinal red, and there are two alternate color options (digital red and black) for situations where a different color is preferable.
An optional Local Footer with information specific to your department can appear immediately above this Global Footer. No content of any kind should appear below the Global Footer.
Get example code for the Global Footer on the Decanter website.
Required – Typography
Stanford Primary typography should be used throughout your website.
Required – Color
The Stanford primary color palette should be used for all logo treatments and for and above the main navigation.
Required – Accessible Link Styles
Links must be distinguishable from regular text using styles rather than colors alone. Underline is the recommended style. There should also be visual indication for keyboard focus states, e.g., default browser outlines.
Get example code for accessible link styles on the Decanter website.
Any branding artifacts from commercial entities, including logos and links to vendors who have created or are maintaining the site. See our Name Use Guidelines about actual or implied endorsement of non-Stanford entities or their products, services or activities.
Recommended – Local Header (Department Logo Link + Local Search + Site Main Navigation)
This Local Header sits adjacent to and below the Stanford Identity Bar. It consists of several elements – the Department Logo Link, the Local Search and the Site Main Navigation. If a Site Main Navigation is present, then an accessible Skip Nav Link must also be provided for keyboard users.
Department logo link
The official Stanford/department logo (shown above in the local header image) should link to your school, department, unit, institute, center, or lab website’s homepage. Changing where this mark links to will lead to usability and accessibility issues for your users.
Note that use of the Stanford wordmark lockup is limited to specific uses. See the Department Branding page for more information.
The local search is embedded in the top right of the local header. It should have a field label and its placeholder text, if any, should have sufficient color contrast. See the three examples above.
Site Main Navigation
The Site Main Navigation sits below the Department Logo Link and Local Search and can be positioned left, center, or right aligned (see demo on the Decanter website).
Skip Nav Link
If the site has a navigation menu, a “skip nav” or “skip to content” link must be provided for keyboard users to allow them to bypass repetitive content on similar pages. This link is usually hidden from mouse users, but will appear once a keyboard user starts navigating the site (e.g., by hitting the tab key).
Get example code on the Decanter website which includes the Stanford Identity Bar and all the above mentioned elements in the Local Header.
Recommended – Local Footer
The Stanford Local Footer sits above the Stanford Global Footer with no space in between. The Stanford Local Footer is made up of optional sections of content, determined by individual schools, departments, units. The content pictured here is not required, though we recommend that your footer contain your logo, and basic contact information, as best accessibility and user experience practice.
Get example code for the Local Footer on the Decanter website.
Recommended – 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.
Adding the favicon to your website
- Download the favicon.ico file and put it in the root directory of your website.
- Copy the below HTML code and put it in the
<head>section of your website.
<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" />