Install the package, load its styles and components, and build your first page.
We create the digital design standards and tooling that help build successful digital experiences and services, in alignment with the Penn Libraries Digital Strategy. The ideas behind the work live in our principles.
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>
That's everything you need. The stylesheet brings in our tokens and utility classes, and the script registers our web components.
The design system gives you two primary building blocks: custom properties and web components. Both are web standards, so they work in any project, with or without a framework.
Custom properties are CSS variables that hold our design decisions: colors, spacing, type, and more. Ours start with --pl-. Write var(--pl-color-fg-default) instead of a raw color, or var(--pl-space-m) instead of a fixed margin.
This keeps your work consistent with everyone else's. When a value changes, it changes everywhere it's used, so our spaces stay consistent as the system grows.
Tokens lists every custom property, and CSS utilities covers the classes that go with them.
Web components are custom HTML elements you use like any other tag. Ours start with pennlibs-, like <pennlibs-header> and <pennlibs-footer>. Each one carries its own markup, styling, and behavior, so you get the same header in a Rails app, a React app, or a plain HTML page.
Load them once, then drop the tags into your page. Some patterns are plain CSS classes instead. The patterns section covers both, with the markup for each.
Build with the design system first, then extend it with your project-specific designs.
The brand and design standards behind everything: principles, color, voice, and more.
Ready-made components for common needs, from headers to autocomplete.
The design system has core support from the digital library development department.