Penn Medicine design system front-end code library (Storybook)
Our component library is documented in Storybook. It shows how each component looks and behaves across different states and screen sizes. It’s the best place to confirm behavior and usage before implementation.
Storybook – You’ll need to have a Penn Medicine ID and be connected to the Penn Medicine VPN to access. Storybook link
Component usage
Each component in Storybook includes:
- Example code and props
- Guidelines for accessibility and responsive behavior
- Notes on variations and states (like error, hover, or disabled)
Use these examples as a reference when building new pages or updating existing ones.
Design <> Dev collaboration
The design system is managed in both Figma and Storybook. Figma shows how components should look; Storybook shows how they behave in code.
If you’re ever unsure how something should be built, check both — and reach out to the design team if it’s still unclear.
Contact & access
Need access or help?
- For story book access and questions then contact web-standards@pennmedicine.upenn.edu