Design standards

The Penn Medicine web and digital design standards apply to all Penn Medicine websites and digital products. Complying with the standards assures a clear and consistent experience for users and preserves the integrity of the Penn Medicine brand and visual identity. The designs have been tested in multiple rounds of testing with users and comply with the legal requirement for accessibility.

Design standards overview

Visual identity

Foundations

Interaction and controls

Navigation and wayfinding

About these standards

In addition to the documentation on this website, we have built a digital design system which consists of a design component library in Figma and a front-end code library in Storybook. All three of these tools: the documentation in this website, the Figma and Storybook libraries are intended to make the adoption of the design standards easy and efficient. Taken together the documentation, design and code libraries comprise a design system.

What is a design system?

A design system is a collection of reusable components, guidelines, and standards. Combined, these pieces create a consistent visual style and user experience across a product or suite of products. It typically includes elements like:

UI Components: Reusable elements such as buttons, forms, icons, and navigation patterns that can be used across different parts of a product.

Style Guidelines: Rules for typography, color schemes, spacing, and imagery to ensure visual consistency

Design Principles: Foundational concepts that guide the creation and use of components, such as accessibility, responsiveness, and usability.

Code Libraries: Often, a design system includes code (like CSS, HTML, and JavaScript) that developers can use to implement the design components consistently.

Documentation: A comprehensive resource that explains how to use the system, including examples, best practices, and the rationale behind design decisions.

Design systems help teams build products faster and maintain consistency. They also ensure that all aspects of a product adhere to brand standards. Examples of popular design systems include: