Overview

The Persona Design System (PDS) is the set of decisions Persona’s products share: the token values, the icons and brand assets, and the 26 components built on both. This site documents all three, and points at the Figma libraries and the source they come from.

Tokens are the named values everything else is built from. Color.CorePurple100 is #E9EAFF; BorderRadius.Sm is 3px. Every table under Foundations is derived from the token package when the page is built rather than typed into the page, so a documented value cannot drift from the shipped one. Three hand-written tables had already drifted before that changed.

Every component page carries a props table generated from the component’s own source, so the API on the page is the API you get.

Accessibility is the short list of what the system guarantees — focus, motion and contrast — and what it leaves to you, which is most of the rest.

PDS stops at the component. Page layout and anything that knows what a Persona inquiry is belong to the product that uses it.

A dashboard component sits above PDS: DataTable is built on the PDS Table with behavior specific to large data sets, and it lives in persona-web rather than here. Glossary sets out that boundary in full.

If you design, Setting Up covers the three Figma libraries and how access to them works.

If you build, start at the component you need rather than here. Its page names the variants and states that component has, and the generated props table sits at the bottom.

Either way, read Writing before you name anything. The strings inside a component — its label, its error, its placeholder — are the one part of a component PDS cannot ship for you.