University Identity Graphics and Styles
A major objective of this Self-help Web Design Resources is to build a stronger and more consistent identity among Stanford's numerous web sites. Of course, this is a formidable challenge — Stanford's web presence is highly decentralized, with thousands of individual web pages authored and maintained by schools, departments, and offices. Organizational units design web sites to express their own, distinct personalities, and their web communications speak to a wide array of audiences, internal and external, ranging from propective students to scientific communities. A common, unified design will never meet all these needs. However, the use of common design elements and styles will allow a common Stanford University identity to shine through the many and varied designs of Stanford's web pages.
- Fonts
- Colors
- Block "S" with Tree
- Plain Block "S"
- Seal
- Web Signature
- Page Footer
Consistency of typography is one way to create a consistent look across Stanford web sites.
The fonts Sabon and News Gothic are recommended for rendering GIF images for common page elements (section titles, navigation buttons, etc):
Sabon Typeface
The Sabon typeface is used in the design of Stanford signatures, and should be used whenever rendering the Stanford University name, or when continuity with the Stanford signature is desired — for example when rendering a department or office title. For more information, please see Stanford Design Guidelines web site.
Sabon Roman, 24 pt, Tracking 100, Color #99000 red, (photoshop sharp)
News Gothic Typeface
Condensed News Gothic is a compact sans serif typeface which complements Sabon for rendering page elements such as navigation buttons and headlines (when GIFs are appropriate).
News Gothic MT Regular, 16pt, Tracking 0, Color #000000 black, (photoshop strong)
HTML Text Fonts
"Arial, Helvetica" or "Verdana, Arial, Helvetica" are the recommended font settings for HTML text in web pages. Other default HTML fonts, such as Times, are also acceptable. You can download the CSS stylesheet used in the Stanford Homepage and other university sites below.
Stanford Homepage: CSS Stylesheet
Procuring Fonts
Sabon and News Gothic are available for purchase from Adobe, Bitstream, or other standard font procurement channels.
Color is another way to add a consistent look and identity to Stanford web sites. Stanford's official color is Cardinal, and this deep red tone provides a way to clearly identify a web site as part of Stanford. The clear colors of the Northern California landscape and the rich, natural tones of our campus architecture provide the foundation for supporting color palettes. For detailed information about Stanford color palettes, please see Stanford Design Guidelines web site.
Cardinal
The official Stanford color is Cardinal, a rich deep tone of red which has long been associated with the University. The use of Cardinal provides a way to clearly identify a communication as part of Stanford. The web-safe HEX value for Cardinal is 990000.
Cardinal
#990000
Other Identity Colors:
Sandstone, Black, and White round out Stanford's identity colors. Unfortunately, there is not a web-safe color that is an exact match for Sandstone. Whenever possible, it is better to render this color as part of a GIF image rather than using it as a HEX value for a background or text color.
Sandstone
#E7D19A
White
#FFFFFF
Black
#000000
The Stanford Homepage also makes use of grey (#CCCCCC) as a border color in 1 pixel lines that outline navigation buttons and other page elements.
Stanford University uses several emblems as part of its visual identity. These emblems are familiar to our many audiences, which include: students, faculty, staff, donors, sports fans and other event audiences, users of Stanford's medical services, our community neighbors and business partners. When used properly as design elements in web pages, these emblems can give the pages an official look and can significantly improve the overall consistency of Stanford's web presence.
For more detailed information about Stanford emblems, please see the Stanford Design Guidelines web site.
The Block "S" with Tree is the symbol most proprietary to Stanford. The tree is a simpler graphic rendition of the Palo Alto seen on the Stanford seal. Like the seal, it serves to create a sense of place: a western, California location, unique to Stanford. Compared to the University Seal, this symbol lends an informal quality to web pages. It is commonly used on materials related to events, athletics, and promotions. Whenever possible, use the Block "S" with Tree rather than the Plain Block "S" because it is more proprietary to Stanford.
For the Stanford Block "S" with Tree, the preferred presentation is in two colors: Cardinal and green. The line around the tree and the line within the outside edge of the letter "S" are always shown in white. The Block "S" with Tree may also be depicted in two colors, either cardinal-on-white, or white-on-cardinal.
Stanford University uses several emblems as part of its visual identity. These emblems are familiar to our many audiences, which include: students, faculty, staff, donors, sports fans and other event audiences, users of Stanford's medical services, our community neighbors and business partners. When used properly as design elements in web pages, these emblems can give the pages an official look and can significantly improve the overall consistency of Stanford's web presence.
For more detailed information about Stanford emblems, please see the Stanford Design Guidelines web site.
The Plain Block "S" first appeared in the 1890's, and is Stanford's oldest continuously used symbol. As a result, the Plain Block "S" has strong association with Stanford and can be seen around campus in a variety of architectural and other design applications.
The Plain Block "S" in Cardinal is the preferred color presentation; it may reverse to white on a Cardinal background.
The seal is one of Stanford's strongest emblems. It lends authority and authenticity to any web page where it appears. The seal may be used on any Stanford web site which reflects Stanford's mission or administration, such as school, departmental, or administrative office sites. The seal has a formal and official quality to it, and therefore is not widely used on communications related to events and athletics, where the more informal Block "S" symbols are more appropriate.
The seal may be used as a background for watermark paper, or as a simulated watermark effect by using a very light, neutral colored background graphic, or tone-on-tone treatment.
An important way to create a consistent look across Stanford web sites is to always render the signature of the University in a consistent format. For this purpose, the University signature should always be produced in Sabon Font with the proper tracking between letters. Wherever possible please use Cardinal (990000) on white, or the reverse. The signature can also be rendered in black or white when shown against a color background.
An alternate version of the Stanford signature is shown above with a distinctive double-arrow following the signature. This version is used in many Stanford web sites, including the Stanford Homepage, Events at Stanford, and Searching Stanford, as a link back to the Stanford homepage (http://www.stanford.edu). When used for this purpose, it should be placed in the upper righthand corner of the webpage whenever possible. Placing this signature on all official Stanford web pages as a link back to the Stanford homepage provides a consistent and official look to the page as well as a useful and immediately identifiable navigational element for returning to Stanford's main web page.
Another important common design and navigational element for Stanford web pages is the page footer. There are two variations of the page footer, one which contains a red bar followed by the copyright statement, and the second containing only the copyright statement.
You can copy the footer HTML below to include at the end of your web pages.
