Color

Color tokens are the standardized values that define color in the Persona Design System (PDS). They remove the need for hard-coded hex codes by providing reusable, named references that keep color application consistent across components, themes, and products.

There are two types of color tokens in PDS: core color tokens and alias color tokens.

Core tokens are the most basic level of color, each tied directly to a single hex value. For example: color.Core.Purple.100 → #E9EAFF

Alias tokens reference core tokens instead of hex codes. These provide semantic meaning and flexibility in how colors are applied. For example: color.Primary.Red → color.Core.Red.600

Alias tokens are organized into categories:

• Primary tokens reference a specific core shade (e.g., color.Primary.Red).
• Background tokens are mapped to surfaces in components (e.g., button or input backgrounds).
• Border tokens apply to component outlines or separators.
• Text tokens define typography color across different states.

Core tokens establish the raw color values of the system and are rarely applied directly. Instead, designers and developers should use alias tokens when building or modifying components. Alias tokens provide clarity, make it easier to swap or update system-wide colors, and ensure consistency across the product.

In short, use core tokens to define the palette and alias tokens to apply color meaningfully within components. This approach keeps PDS scalable, consistent, and adaptable as our product evolves.