| description | An overview of our UX pattern guideline library |
|---|
This is our library of UX pattern guidelines.
It captures the repeatable behaviors, tendencies, and experiences we use to resolve common design problems in our products. Think of it as a reference guide that helps our teams design consistent experiences without reinventing the wheel each time - even in products that look different in aesthetics or density.
Where available, these UX patterns cite evidence-backed research from usability studies to validate their efficacy (we want to be about data, not opinions). We aspire for the reasoning behind every guideline to be transparent and traceable — not just convention.
The guidelines are intentionally design-system agnostic. Whether you're working in our main business application, an acquired product, or a legacy application, these patterns describe the behavior users should experience — not the specific components used to deliver it.
| Cover image | ||
|---|---|---|
| Navigation | Structure, wayfinding, and navigational patterns | compass-rose (1).svg |
| Lists and tables | Mass content management and organization, filtering, and bulk actions | table.svg |
| Reading information | Datestamps, timestamps, grammar, voice & tone, banners, skeleton loaders, tooltips, truncation, onboarding | list-magnifying-glass.svg |
| Form experience | Autosave, drafts, cancellation, destructive actions, error validation, multi-step flows, toast notifications | paper-plane-right.svg |
| Entering information | Autocomplete, button groups vs. radio buttons vs. dropdowns, time zone entry, and more | textbox.svg |
.svg){kind=link}
{% stepper %} {% step %}
Every guideline is grounded in usability research or documented reasoning. Where studies exist, they're cited. Where studies aren't available, the rationale is stated explicitly. {% endstep %}
{% step %}
These guidelines describe what users should experience — the choreography, the feedback, the flow — not which specific component to reach for in any one design system. {% endstep %}
{% step %}
Users move between our products. These patterns exist so that even when the visual language differs, the underlying interactions feel familiar and predictable. {% endstep %}
{% step %}
New patterns will be added as our products grow and as new research becomes available. If a pattern you need isn't here, that's a gap worth flagging — not a green light to improvise. {% endstep %} {% endstepper %}
Find the pattern you're designing for
Use the left nav to browse by category or jump directly to the pattern. Each page is self-contained and links to related patterns where relevant.
Read the guidance and the reasoning
Each pattern explains the recommended behavior and, where available, links to the research behind it. Understanding the why helps you apply it correctly to edge cases.
Apply it within your design system
Translate the behavioral guidance into whichever components your product uses. The goal is consistent experience, not identical visuals.
Flag gaps or suggest updates
If a pattern is missing, outdated, or you've encountered a case it doesn't cover well, bring it to the design team. This guide improves when the whole product team contributes.
Dan Owens
Principal UX Designer
PAR Engagement