v1.6.0
    • 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.

    Principles

    Our principles of one place, content layering, universal design, and digital strategy guide every decision in the design system.

    These principles are why the design system exists. When we decide what to build, what to share, and how something should look and behave, we choose in their favor. One place comes first. The rest describe how we get there.

    One place

    We design our digital spaces to feel like one welcoming, helpful, and unified place. People come to us with a goal, not an org chart. By presenting as one place, they can do what they came to do without having to learn how we're organized.

    Through consistent design, we create one connected experience where people engage confidently with our collections, services, and each other.

    Wayfinding and sense of place

    People should always be able to tell where they are, what they can do here, and how to reach the next place. That is what turns separate services into one place.

    Universal design

    We design with universal design principles to create digital experiences that are usable by different people, to the greatest extent possible, without the need for adaptation or specialized design.

    Our adapted principles of universal design are:

    Parity of use
    Our interfaces provide comparable means of use between different people
    Flexibility in use
    We accommodate a wide range of individual preferences and abilities
    Simple and intuitive use
    Our designs require no prior knowledge of our organization to use
    Perceptible information
    We communicate information effectively through multiple modes and maximize legibility
    Tolerance for error
    Our systems minimize unintended actions and provide helpful feedback to recover
    Minimal fatigue
    We enable efficient and comfortable use with minimal repetitive actions
    Size and space
    Our interfaces provide adequate space for interaction regardless of device, input method, or abilities

    Universal design principles were originally developed by North Carolina State University's Center for Universal Design.

    Content layering

    We design layouts that respect people's attention. An interface that shows every option at once makes people do the work of finding what matters. Content layering means presenting information and options at the point of need, rather than all at once. We lead with what is useful for the task at hand and bring the rest forward when people need it.

    • Lead with what matters most, and keep it visible without scrolling.
    • Break content into short, scannable chunks with room to breathe.
    • Reduce distractions so people can hold their focus on the task.

    Content layering supports wayfinding: when each page shows what matters for the moment, people can tell where they are and what to do next. For practical guidance, see consider layering.

    Learn more by reading WCAG 3.0: Layout and Making Content Usable for People with Cognitive and Learning Disabilities.

    Digital strategy

    Our design system supports key aspects of the Penn Libraries Digital Strategy:

    Design System

    Get started Foundations Patterns Release notes · v1.6.0 Design notes