What are border radius tokens
Section titled “What are border radius tokens”Border radius tokens define the level of rounding applied to corners across components in the Persona Design System (PDS). Instead of manually setting pixel values, tokens provide reusable references that keep corner styles consistent and predictable across the product.
PDS border radius tokens
Section titled “PDS border radius tokens”PDS defines four types of border radius tokens, each representing a different level of rounding or shape:
| Token | Value | Description |
|---|---|---|
sm | 3px | subtle rounding, used in small interactive elements like Checkboxes. |
md | 4px | moderate rounding, applied broadly across inputs, Menus, Banners, and Buttons. |
lg | 8px | larger rounding, used for bigger surfaces like Cards and Modals. |
circle | 50% | fully rounded, used for circular components such as Radio Buttons. |
Using these tokens instead of hard-coded values ensures visual cohesion and makes it easy to update rounding consistently across the system.
Using border radius tokens
Section titled “Using border radius tokens”Use the alias token that matches the component’s design guidelines rather than assigning a pixel value directly. For example, when styling a button, apply borderRadius.md rather than 4px. This ensures components remain consistent and easy to update if design values change in the future.