Foundations

Overview

Foundations are typically used to:

• Create new digital experiences: Apply foundations when building new pages, features, or applications to ensure consistency from the start.
• Update or redesign existing interfaces: Use foundations to evaluate current layouts, patterns, and behaviors against our latest standards.
• Scale experiences across platforms: Whether designing for mobile, tablet, or desktop, foundations help maintain a unified look and feel.
• Support accessibility and usability: Foundations ensure that designs are clear, consistent, and accessible to all users, including patients, families, and staff members.

Use cases

Each foundational element serves a specific purpose and should be used consistently across the digital ecosystem.

Spacing

Spacing systems are a set of rules around how to place elements within layout or components. Our scale is an 8pt linear scale for elements.

Square Pattern

This pattern is not repeated and is made up of 4 colors.

Iconography

Our iconography library includes a comprehensive set of  lightweight vector graphics.

Loading media

When media isn't available, the media arrow icon will remain, overlayed, until the media is available.

Behavior

Interactive

• Grids can be changed by resizing the browser to different breakpoints.
• Icons can be clicked when used as in button or link.

Non-interactive

• Patterns are intended to balance the visual design.
• Spacing is constant and isn’t interactive.
• Icons are occasionally used to enrich information and may not be clickable.
• Location placeholders: An icon or shield will display on locations whenever an image is not selected.
• Provider placeholders: An individual's initials display whenever an image is not provided.

Grid & Breakpoints

Patterns

Placeholders

Guidelines (do’s and don’ts)

Do

• Do crop the container to the part of the pattern you want to show.
• Do use the full variant of the multi-shield pattern as a background visual to balance a screen.
• Do consistently use the grid and breakpoints defined
• Do use icons from the approved system to maintain visual consistency

Don't

• Don’t misuse the Penn Medicine shield and wordmark on empty states. Refer to the shield and logo standardsto ensure alignment with the Penn Medicine brand.
• Don’t apply arbitrary margins or padding that break the grid alignment.
• Don’t reduce or expand the size of the patterns.
• Don’t change the orientation of the pattern.
• Don’t insert custom spacing values that aren’t part of the design system.
• Don’t use anything other than 8px spacing
• Don’t create custom icons without approval

Last updated