Glossary

The practice of designing and building products so that people of all abilities, including those with disabilities, can use them effectively. In the Persona Design System (PDS), accessibility means ensuring components, patterns, and documentation align with standards like WCAG and ARIA. This includes considerations for screen reader support, color contrast, keyboard navigation, and inclusive design practices, so that all users can interact with Persona products equitably.

Assets are supporting visual resources that are part of the system, such as logos, icons, and illustrations. They help maintain brand consistency and reduce duplication by giving teams a central, authoritative place to source them.

Components are the modular, reusable UI elements that form the backbone of a product’s interface. They combine design (how they look), code (how they function), and accessibility (how they behave for all users). Examples include buttons, inputs, modals, or navigation bars. Components are designed once and reused everywhere, ensuring consistency while reducing design and engineering overhead.

PDS components are the most simplistic, flexible level of components. While they can be used out of the box to build new user experiences, they can also be used to build more complex and use case specific components. Examples of PDS components include buttons, cards, and modals.

Dashboard components are more complex components that are typically built for a specific use cases. They’re built using PDS tokens, assets, and sometimes even components. An example of a dashboard component includes Data Table, which is built using the PDS Table component, but with additional features and functionality created specifically for displaying large volumes of data.

A structured collection of reusable components, tokens, guidelines, and documentation that ensures consistency, scalability, and efficiency in building products. A design system is the source of truth for a product’s visual language and interaction patterns. It combines reusable building blocks (like tokens, components, and patterns) with documentation and guidelines for accessibility, usage, and brand expression. A design system isn’t just a toolkit — it’s a shared language between design, engineering, and product teams that ensures consistency and speeds up delivery across the organization.

The cloud-based design tool used to create, maintain, and collaborate on product designs. Figma houses the PDS component library, icon sets, and design tokens, enabling designers to apply consistent patterns across products.

Patterns are combinations of components that solve common user problems or workflows. For example, a login form pattern might include input fields, labels, error messaging, and a submit button. Patterns provide guidance on how to assemble components together to create predictable, usable experiences across the product.

Persona’s very own design system, which contains a collection of tokens, assets, and components.

Primitives are the simplest building blocks of a design system — the raw materials. They include foundational values like colors, typography, spacing, grid, and icons. While they don’t do much on their own, primitives are what components and patterns are built from.

States describe the dynamic changes a component goes through based on user interaction or system status. They reflect how the interface responds to actions like hovering, clicking, focusing, or encountering errors. For example, a button might have a default, hover, active, disabled, and loading state. Defining states ensures components are predictable, accessible, and responsive across all scenarios.

Theming is the process of customizing the design system’s look and feel by modifying tokens like color, typography, or spacing. This allows the same system to support multiple brands, products, or environments without rebuilding the core foundations. Theming can also be used to support user selected themes like dark mode or high contrast mode.

Tokens are named variables that store design decisions, like CorePurple100, BorderRadius.Sm. Instead of hardcoding values (e.g., hex colors or pixel sizes), tokens ensure that updates can cascade consistently across the entire product. They are the bridge between design and code, making it possible to scale design choices across the platform.

Variants are different stylistic or functional versions of a single component. They allow the same component to adapt to different contexts without being rebuilt. For example, a button might have a primary, secondary, tertiary, and destructive variant, each serving a distinct purpose while still sharing the same underlying structure and behavior. Variants help enforce consistency while giving teams the flexibility they need.