Scroll Top

uwmedicine.org Style Guide

Where Brand Meets User Experience

The uwmedicine.org website uses approved fonts, colors, icons, and buttons to create a unified, accessible, and engaging experience. This Digital Style Guide outlines the web design components and standards that ensure consistency across our site. Each component is designed for easy maintenance and reuse, helping every page reflect the UW Medicine brand.

Alerts

Quickly inform users of urgent issues affecting care or operations. Use alerts only for critical, time-sensitive updates. 

Banners

Promote campaigns and key messages with banners. Use for marketing, announcements, or navigation. Not for urgent or critical updates.

Buttons

Choose full or constrained-width buttons for grids. Use button styles to highlight actions and maintain site consistency. 

Cards

Use cards to group related content for easy scanning and comparison. Each card features a headline, brief text, and links or actions. 

Featured Story

Highlight an inspiring story, achievement, or video to build trust and add a human touch to clinical and service pages.

Headers

Use UW Medicine.org’s header tags and styles to create structure, improve readability, and ensure brand consistency across pages. 

Heroes

Use a Hero at the top of a page to create a strong visual headline and introduce key messages, actions, or page purpose. 

Images

Use welcoming, people-focused images with simple backgrounds. Follow sizing and placement rules for each component across the site.