Install the package, load its styles and components, and build your first page.
The content guide, CSS utilities, tokens, and the principles behind every pattern.
Every pattern with a live example, when to use it, and where it's already in use.
Our principles of one place, content layering, universal design, and digital strategy guide every decision in the design system.
Use color to enhance meaning, but never rely on color alone to convey information.
Use our logo to identify Penn Libraries in your digital space.
Write clear, direct content that helps people find and understand information quickly.
Design tokens are the CSS custom properties behind our color, spacing, type, and more. Reach for a token instead of a hand-picked value.
Utility classes for spacing, layout, type, and more, built on our design tokens.