Radius and size

Corner radii, control heights, icon and avatar sizes.

Radius

--radius-card

Cards and panels inside a page (20). Inner radius = outer minus padding.

rounded-card

20px

--radius-control

Buttons, chips, toggles, tabs, segmented controls.

rounded-control

9999px

--radius-field

Inputs, selects, text areas (8).

rounded-field

8px

--radius-panel

Page panels inside the shell (24).

rounded-panel

24px

--radius-pill

Fully rounded non-control shapes: badges, avatars, tags.

rounded-pill

9999px

--radius-shell

The shell frame (32 = panel 24 + 8 gap).

rounded-shell

32px

--radius-tile

Tiles inside cards, callouts, menus, popovers (16).

rounded-tile

16px

Raw values11

--radius-2.5xl

Raw value (20). Umia extension to the Tailwind scale, for cards. Use radius-card.

rounded-2.5xl

20px

--radius-2xl

Raw value. Use a semantic token instead.

rounded-2xl

16px

--radius-3xl

Raw value. Use a semantic token instead.

rounded-3xl

24px

--radius-4xl

Raw value. Use a semantic token instead.

rounded-4xl

32px

--radius-full

Raw value. Use a semantic token instead.

9999px

--radius-lg

Raw value. Use a semantic token instead.

rounded-lg

8px

--radius-md

Raw value. Use a semantic token instead.

rounded-md

6px

--radius-none

Raw value. Use a semantic token instead.

0px

--radius-sm

Raw value. Use a semantic token instead.

rounded-sm

4px

--radius-xl

Raw value. Use a semantic token instead.

rounded-xl

12px

--radius-xs

Raw value. Use a semantic token instead.

rounded-xs

2px

Size

--size-12

12px. Primitive — alias via a semantic token, never use directly.

12px

--size-16

16px. Primitive — alias via a semantic token, never use directly.

16px

--size-20

20px. Primitive — alias via a semantic token, never use directly.

20px

--size-24

24px. Primitive — alias via a semantic token, never use directly.

24px

--size-28

28px

--size-32

32px. Primitive — alias via a semantic token, never use directly.

32px

--size-40

40px. Primitive — alias via a semantic token, never use directly.

40px

--size-48

48px. Primitive — alias via a semantic token, never use directly.

48px

--size-56

56px. Primitive — alias via a semantic token, never use directly.

56px

--size-avatar-lg

Profile headers.

size-avatar-lg

40px

--size-avatar-md

Default avatar.

size-avatar-md

32px

--size-avatar-sm

Avatars in rows.

size-avatar-sm

24px

--size-control-lg

Large buttons.

size-control-lg

48px

--size-control-md

Default buttons and inputs.

size-control-md

40px

--size-control-sm

Small buttons and inputs.

size-control-sm

32px

--size-control-xs

Chips and other compact pills.

size-control-xs

24px

--size-icon-lg

Feature and empty-state icons.

size-icon-lg

28px

--size-icon-md

Icons in default and large controls.

size-icon-md

24px

--size-icon-sm

Icons in small controls, nav and dense rows.

size-icon-sm

20px

--size-icon-xs

Icons in badges.

size-icon-xs

16px

--size-measure

Maximum line length for long-form prose (~680px ≈ 65–70 characters at 16px). Cap docs and blog columns with it; anything wider is hard to read.

size-measure

680px