Glossary

Designing and building so that someone using a screen reader, a keyboard alone, or a magnified screen can complete the same task as anyone else. In PDS, focus, motion and contrast are settled centrally, while keyboard behavior and the name a control announces come from the element a component is built on. Accessibility says which is which, and states plainly that PDS claims no WCAG conformance level.

The icons and brand visuals the system ships, as distinct from the components that use them. They are in the Icon & Asset Kit Figma library and in the design-tokens package.

The reusable interface elements the system ships in both Figma and code. 26 are documented here, each with a props table generated from its source.

The atomic level: Button, Card, Checkbox. No product logic and no dependency on a product, which is what makes them reusable anywhere. These are the components documented on this site.

Components assembled from PDS components for a particular product job, carrying the product-specific behavior a PDS component is not allowed. DataTable is built on the PDS Table with the behavior large data sets need. They live in persona-web and are not documented here.

A set of tokens, components and documentation that fixes a decision once so it is not remade on every screen.

The tool PDS is authored in. Three libraries hold it, and Setting Up covers getting access to them.

A combination of components that handles a recurring job. A login form is inputs, labels, error messages and a submit button arranged the same way every time. PDS documents components; it does not currently document patterns.

Persona’s own tokens, assets and components: the design-tokens package, the Icon & Asset Kit, and the components on this site, authored in three Figma libraries.

The lowest level of the system — color, typography, spacing, radius, icons. It is also the name of the Figma library that holds them, which is why “primitives” and “tokens” often get used for the same thing.

The conditions a component moves through in response to a reader or to the system: hover, focus, pressed, disabled, pending, error. States are not a fixed set across the system, so each component page names the ones its own component has.

Changing the values components read without changing the components. PDS exposes a default theme and a dark theme; neither is documented on this site.

Named design values. Color.CorePurple100 is #E9EAFF and BorderRadius.Sm is 3px. A component refers to the name rather than the value, so the value can be changed in one place and land everywhere it is used. Color and the other Foundations pages list them.

The alternatives a single component offers on one axis, selected by a prop rather than by restyling. Button has six, and choosing between them is a statement about emphasis rather than about color.