Use the design system to make our websites work as one place
The central guide to design and develop our websites.
-
Get started
Install the package, load its styles and components, and build your first page.
-
Foundations
The content guide, CSS utilities, tokens, and the principles behind every pattern.
-
Patterns
Every pattern with a live example, when to use it, and where it's already in use.
Try it out
A sample page built from the hero, header, and accordion patterns and the CSS utilities. Edit the markup to try the design system before you install anything.
<pennlibs-hero>
<figure>
<picture hero="art-direction">
<source
srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1080,/0/default.jpg 1080w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg 1440w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/2000,/0/default.jpg 2000w"
media="(min-width: 48em)"
sizes="100vw" />
<source
srcset="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/460,/0/default.jpg 460w, https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:34,9.6,36,24.8/920,/0/default.jpg 920w"
media="(max-width: 47.99em)"
sizes="100vw" />
<img src="https://iiif-images.library.upenn.edu/iiif/3/6c59afac-7ab4-47f4-8780-b7ac511b8679/pct:13,13,78.5,24/1440,/0/default.jpg" alt="A crowned figure in a yellow gown seated on a marble bench, holding a book, with the campus chapel behind" />
</picture>
<figcaption><a href="https://digitalcollections.library.upenn.edu/items/d569461c-73cc-4f68-a09c-5a9fe5a66ca0?asset-id=6c59afac-7ab4-47f4-8780-b7ac511b8679">Caption</a></figcaption>
</figure>
<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>
Where it's used
-
Find
The definitive place to find materials held by Penn Libraries.
-
Digital Collections
Digitized originals from our libraries, archives, and partners.