1. Design System
2. Patterns
3. Page Title

Page Title

Create the page title using middle dot separators to create a clear breadcrumb-like hierarchy.

Format browser tab titles consistently across applications.

When to use

Use this pattern for every page's <title> element across Penn Libraries web applications.

How to use

Separate title segments with · (space, middle dot, space) to create a scannable hierarchy from specific to general.

The format is:

Page name · Application name · Penn Libraries

For example:

• My Account · Find · Penn Libraries
• Collections A to Z · Digital Collections · Penn Libraries
• About · Colenda Digital Repository · Penn Libraries

Omit segments that would be redundant. On a home page, the application name alone may suffice:

Find · Penn Libraries

Why middle dot?

The middle dot (·, U+00B7) is compact and visually distinct from content characters like hyphens, pipes, or dashes. It provides clear separation without the visual weight of other delimiters, making titles easy to scan in browser tabs.