Border Radius

Corner rounding tokens for consistent component shapes across the design system.

View current brand radius values:

Radius Scale

None

--radius-none

Small

4px

--radius-sm

Medium

8px

--radius-md

Large

12px

--radius-lg

Full

9999px

--radius-full

Usage

1.card {
2  border-radius: var(--radius-md);
3}
4
5.button {
6  border-radius: var(--radius-sm);
7}
8
9.avatar {
10  border-radius: var(--radius-full);
11}
12
13.modal {
14  border-radius: var(--radius-lg);
15}

Guidelines

Token	Value	Use Case
`--radius-none`	0	Sharp edges, tables, dividers
`--radius-sm`	4px	Buttons, badges, inputs
`--radius-md`	8px	Cards, modals, dropdowns
`--radius-lg`	12px	Large cards, hero sections
`--radius-full`	9999px	Pills, avatars, circular elements