Build digital spaces

Build with the Design System's first, then extend them with your project-specific designs.

Get started

Include these tags in your <head> to start using the Design System:

<link href="https://cdn.jsdelivr.net/npm/@penn-libraries/web@1/dist/web/web.css" rel="stylesheet"/>
<script type="module" src="https://cdn.jsdelivr.net/npm/@penn-libraries/web@1/dist/web/web.esm.js"></script>

After including these files, you may start using patterns and CSS utilities.

CSS Utilities

Reset

Apply .pl-reset to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings.

Typeset

Applying .pl-typeset to a containing element, will style all of its children text elements which can be useful for laying out typographic foundations.

<div class="pl-typeset pl-margin-l">
  <h1>Heading level 1</h1>
  <h2>Heading level 2</h1>
  <h3>Heading level 3</h1>

  <p>Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.</p>
</div>

Spacing

Use .pl-margin-{size} or .pl-padding-{size} to set spacing on all sides of an element.

Available sizes include 0, 2xs, xs, s, m, l, xl, 2xl, and 3xl.

You can also specify the direction .pl-padding-{direction}-{size} using the following prefixes:

b for bottom
t for top
x for left and right
y for top and bottom
l for left
r for right

Custom properties

In addition to utility classes, you can use custom properties for spacing to maintain consistency across your design. The following custom properties are available:

--pl-space-3xs: 0.125rem
--pl-space-2xs: 0.25rem
--pl-space-xs: 0.5rem
--pl-space-s: 0.75rem
--pl-space-m: 1rem
--pl-space-l: 1.5rem
--pl-space-xl: 2rem
--pl-space-2xl: 3rem
--pl-space-3xl: 4rem

Display

Use display utility classes to control how elements are rendered.

.pl-block
.pl-inline
.pl-inline-block
.pl-flex
.pl-inline-flex
.pl-grid
.pl-inline-grid
.pl-none

Flex direction

Use flex direction utility classes to control the direction of flex items within a flex container. Switch between horizontal (row) and vertical (column) layouts with .pl-flex-row and .pl-flex-col.

Gap

Use .pl-gap-{size} to add consistent spacing between direct children of a flex or grid container. This utility is especially useful for layouts using CSS Flexbox or Grid, where you want to control the space between items without adding margin classes to each child.

Available sizes include: 0, 2xs, xs, s, m, l, xl, 2xl, and 3xl.

Border radius

Use .pl-border-radius to apply a standard border radius to an element, or .pl-border-radius-subtle for a more subtle rounding. These utilities help you quickly round the corners of boxes, cards, images, and other elements.

<style>
.border-radius-example {
  display: inline-block;
  background: var(--pl-color-bg-info);
  padding: var(--pl-space-2xs) var(--pl-space-m);
  border: solid 1px var(--pl-color-fg-info);
  color: var(--pl-color-fg-info);
}
</style>

<div class="pl-margin-l pl-flex pl-gap-m">
  <span class="border-radius-example pl-border-radius">Penn Libraries</span>
  <span class="border-radius-example pl-border-radius-subtle">Penn Libraries</span>
</div>

Line length

Use .pl-line-length to set a comfortable maximum line width for readable text. This utility is especially useful for paragraphs, article content, or any block of text where you want to improve legibility by preventing lines from becoming too long.

<div class="pl-margin-l pl-flex pl-flex-col pl-gap-m">
  <p>
    Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.
  </p>

  <p class="pl-line-length">
    Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content.
  </p>
</div>