The central guide to design and develop Penn Libraries' digital spaces.
Add the Design System to your project and start building.
Use these areas of design to build the foundations of your digital space.
Use these proven patterns to meet common design needs.
August 3, 2026
Updated expand text pattern.
June 24, 2026
An experimental pattern for moving between Penn Libraries' main places to start.
June 24, 2026
We reorganized What's new, added a principle, and made the docs easier to navigate and try out.
View the patterns working together. Edit the markup and watch the preview update live.
<pennlibs-hero>
<picture hero="art-direction">
<source srcset="https://iiif-images.library.upenn.edu/iiif/3/d3f5f564-76c9-4911-aa5a-141923718c1e/full/1600,/0/default.jpg" media="(min-width: 600px)" />
<img src="https://iiif-images.library.upenn.edu/iiif/3/d3f5f564-76c9-4911-aa5a-141923718c1e/full/800,/0/default.jpg" alt="" />
</picture>
<pennlibs-header service-name="Service name" theme="dark" slot="start"></pennlibs-header>
<h1 hero="heading">Page level 1 heading</h1>
<p hero="sub-heading">Sub heading paragraph</p>
</pennlibs-hero>
<div class="pl-reset pl-typeset pl-viewport-margins pl-margin-y-xl">
<h2>Page level 2 heading</h2>
<p>Body paragraph text.</p>
<pennlibs-accordion class="pl-flex pl-flex-col pl-gap-m pl-margin-t-l">
<details class="pl-details">
<summary class="pl-details__summary"><h3>Accordion item heading</h3></summary>
<div class="pl-details__content">
<p>Accordion item content.</p>
</div>
</details>
<details class="pl-details">
<summary class="pl-details__summary"><h3>Accordion item heading</h3></summary>
<div class="pl-details__content">
<p>Accordion item content.</p>
</div>
</details>
</pennlibs-accordion>
</div>