Radius

Border radius tokens define the curvature language of Aggarly Platform. They are runtime CSS variables, ensuring consistency across themes, components, and future visual updates.

Radius Scale

Radius XS

$radius-xs → --ds-radius-xs

var(--ds-radius-xs)

Radius SM

$radius-sm → --ds-radius-sm

var(--ds-radius-sm)

Radius MD

$radius-md → --ds-radius-md

var(--ds-radius-md)

Radius LG

$radius-lg → --ds-radius-lg

var(--ds-radius-lg)

Radius Card

$radius-card → --ds-radius-card

var(--ds-radius-card)

Radius Pill

$radius-pill → --ds-radius-pill

var(--ds-radius-pill)

Usage Guidelines

Use smaller radii ($radius-xs, $radius-sm) for dense UI elements such as inputs, badges, and table cells.
Use medium radii ($radius-md) for buttons and interactive controls.
Use larger radii ($radius-lg, $radius-card) for cards, panels, and elevated surfaces.
Use $radius-pill only for fully rounded elements such as pills, avatars, and toggle indicators.