What PDS tokens are available?
Section titled “What PDS tokens are available?”PDS tokens define the foundations of our design system (colors, spacing, typography, border radius, etc.).
- Designers: Explore the PDS Primitives Figma library to view the full set of tokens and apply them in your designs.
- Developers: Use the Design Tokens Storybook to see live, interactive code examples of tokens in action. You can also access tokens directly from the persona-id/design-tokens GitHub repository.
What PDS assets are available?
Section titled “What PDS assets are available?”PDS assets include reusable icons and branded visuals.
- Designers: Find them in the Icon & Assets Kit Figma library for design use.
- Developers: Access code-based icons in the design-tokens/packages/icons GitHub package or view the icon Storybook to view icons in various sizes.
What PDS components are available?
Section titled “What PDS components are available?”PDS components are the building blocks of Persona’s UI.
- Designers: Browse and use components in the PDS Components Figma library.
- Developers: Explore the Design System Storybook for interactive examples, or use them directly from the Persona design token GitHub repo.
What’s the difference between PDS components and dashboard components?
Section titled “What’s the difference between PDS components and dashboard components?”PDS components are the atomic-level building blocks of Persona’s design system. They are generic, product-agnostic, and designed to be reused anywhere across Persona. Examples include buttons, cards, and checkboxes. PDS components focus on consistency, accessibility, and parity with Figma, with no product-specific logic or dependencies.
Dashboard components sit at a higher level in the UI hierarchy. They are intentionally shared across dashboard products and often combine multiple PDS components into more complex patterns. Dashboard components may include product-specific interactions or logic—for example, DataTable or RichTextEditor. They are more opinionated than PDS components and serve needs common to multiple dashboard products.
When should I use a PDS component vs. a dashboard component?
Section titled “When should I use a PDS component vs. a dashboard component?”Use PDS components when you need basic, reusable UI elements that work across products, since they provide the highest level of consistency and accessibility out of the box. Use dashboard components when you need more complex, product-aware functionality that has already been built and implemented across dashboard products. When neither meets your needs, build custom components for product-specific functionality, but still compose them using PDS tokens and components to maintain visual consistency.
Where can I find dashboard components?
Section titled “Where can I find dashboard components?”Dashboard components can be found across persona-web GitHub, but are primarily found in front-end/dashboard/components-lib and front-end/dashboard/components. Storybook contains the most comprehensive view of all available dashboard components.