Introducing a Modern Design System
Stanford Medicine on Every Device
People access our digital presence from every imaginable device. Smartphone, tablet, notebook, desktop - no matter what people use, the design will adapt to present navigation and content in a way the offers an excellent user experience.
The new Stanford Medicine designs are sharp and render faster. We use vector and font-based graphics and icons to minimize load times and provide crystal clarity devices of any size.
The new Stanford Medicine design is a visual system of themes and design patterns that enable our brand and missions in a contemporary and fresh way. The pages and components look incredible on devices of all sizes.
The new system uses a set of three typefaces (Source Sans Pro, Fjord, and Crimson Text) that provide simple, easy-to-read text that is optimized for viewing on all devices. They are all free, open source fonts available from Google Web Fonts.
The design, navigation, and content is being developed to meet a high standard of accessibility so that our content is available to everyone. We audit the pages and site to meet the standards. We participate with Stanford's accessibility program to help make this a success.
The Colors of Stanford Medicine
A new, high-impact color palette links the design to Stanford legacy colors and provides an extended color set to build inviting sites.
Choice of Themes
The design is offered through a set of themes and a toolkit for building custom sites. Each theme will be set at the site level and be selected when a site is requested. Each theme is a fully responsive, browser compatible, and is tested to meet accessibility goals.
This theme is based on the top-tier general use pages. The navigation is a three tier vertical layout.
This theme offers a flexible horizontal navigation system with a wide canvas for content.
K2 (custom toolkit)
This is a toolkit with design elements approved for digital use that can be combined creatively to build custom sites.
K2 is not available for general use. This is a custom template used for sites that require special needs.