Color standards

Standard scope

This standard applies to:

pennmedicine.org
All Penn Medicine websites
Penn Medicine mobile applications
All Penn Medicine digital products

Overview

Colors are used to represent the Penn Medicine brand and guide user interaction. They help:

Build brand identity.
Create visual focus and hierarchy.
Ensure design consistency.
Evoke the right emotional tone.
Improve accessibility and usability.

Primary colors

In our web and digital products, primary colors communicate the Penn Medicine brand and guide user interaction.

The "Penn blue" and "Penn red" colors are important elements of the Penn Medicine brand, present in the logo, and used intentionally as part of the design system to support the brand. Penn blue is the navy blue and Penn red is the crimson red in the color palette.

Navy

Navy is the primary color for titles, backgrounds, and accent colors in our design system and demonstrates our commitment to creating a strong visual identity. Navy exudes confidence, reliability, and elegance, leaving a lasting impression on users. Navy blue is the "Penn blue" of the Penn Medicine brand.

Navy blue

#011F5B

Use for main title text and body copy. You can also use in background for contrast on sections like the search bar, some heroes and the footer.

Royal blue

#003C73

Use this color for states on buttons and elements.

Muted blue

#627191

Use this color for states on buttons and elements as text is being used for some inputs and inactive states.

Blue

Blue is the primary color used for actionable items in our design system and ensures that users can easily identify and engage with interactive elements. Its commanding presence, combined with its versatility, creates a visually appealing and user-friendly interface that encourages users to take action confidently.

Dark blue

#0055A4

Use as the main interactive color, including on CTA’s, selected states, clickable items.

Sky blue

#4C90C9

Use for states on buttons and elements. You can also use for stroke on some elements, for contrast with light backgrounds.

Light blue

#B1CFE7

Use for states on buttons and elements and one some diving lines.

Red

Red is used as an accent color in our design system for elements like patterns, and also in limited applications to identify and engage interactive elements. Crimson is the "Penn red" of the Penn Medicine brand.

Burgundy red

#6B0000

Use for patterns or other elements that don’t have interaction.

Do not use as an alert color.

Crimson red

#990000

Use for patterns and interactions, as well as the primary color for alerts. Crimson is also always used in the masthead to highlight the patient login button and in the global navigation as interactive accents.

Neutral colors

The use of neutral colors are for:

Text over dark or light backgrounds
Combining with white backgrounds for headers and cards
Bringing balance and legibility to our design system

This combination of neutral and white colors fosters an elegant, clean, and visually appealing aesthetic, allowing content to be easily read and understood while maintaining a cohesive and modern visual identity.

Off Black

#2C2C2C

Use for body copies.

White

#FFFFFF

Use for texts over dark backgrounds. You can also use as main background color for heroes and cards.

Light colors

In our design system, light colors are used for screen backgrounds and contrast states, helping create a clean, accessible interface. They also highlight interactive elements—like hover and selected states—making them more noticeable and encouraging user engagement.

Light navy blue

3%

#F7F8FA

5%

#F2F4F7

10%

#E5E9EF

Light sky blue

3%

#F9FBFD

5%

#F5F9FC

12%

#E1EAF3

Alert colors

The alert colors in our design system not only ensure visual prominence but also aligns with commonly understood conventions. These colors are associated with caution, warning signs, and success in various contexts, making it instantly recognizable and universally understood.

Crimson red

#990000

Use as a warning sign color, applied to text and iconography.

Crimson red 10%

#F5E6E6

Use as background color in alert banners or tags related to warning components.

Canary

#F0A93E

Use as secondary warning or rating stars color.

Green

#17751A

Use as a success / availability sign color applied to text and iconography.

Green 10%

#D1E4D1

Use as a background color in alert banners or tags related to warning components.

Color contrast for accessibility

Color contrast is essential for readability, especially for users with visual impairments. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratio requirements between text and background. Penn Medicine web and digital products adhere to WCAG 2.1 AA standards.

Reference the following guidance for color contrast compliance.

Do’s and don’ts

Do

Use contrasting colors between background-elements.
Use dark blue for actionable items.
Use light colors for secondary actionable items and states.

Don't

Use same toned color between background-elements.
Use secondary color for primary actions.
Use colors that are not in the system.

Related resources

For designers: Visit the Designers section for access to component specs and Figma files.

‍For developers: Visit the Developers section for implementation details and to access the front-end code library in Storybook.

Contact

For more information about this standard, email: web-standards@pennmedicine.upenn.edu

Last updated

Date

Version

Desciption

06/11/25

1.0.0

Initial Release