# Radius and size

Corner radii, control heights, icon and avatar sizes.

| Name | CSS var | Tailwind | Light | Dark | Description |
| --- | --- | --- | --- | --- | --- |
| --radius-2.5xl | `--radius-2.5xl` | `rounded-2.5xl` | `20px` | `20px` | Raw value (20). Umia extension to the Tailwind scale, for cards. Use radius-card. |
| --radius-2xl | `--radius-2xl` | `rounded-2xl` | `16px` | `16px` | Raw value. Use a semantic token instead. |
| --radius-3xl | `--radius-3xl` | `rounded-3xl` | `24px` | `24px` | Raw value. Use a semantic token instead. |
| --radius-4xl | `--radius-4xl` | `rounded-4xl` | `32px` | `32px` | Raw value. Use a semantic token instead. |
| --radius-card | `--radius-card` | `rounded-card` | `20px` | `20px` | Cards and panels inside a page (20). Inner radius = outer minus padding. |
| --radius-control | `--radius-control` | `rounded-control` | `9999px` | `9999px` | Buttons, chips, toggles, tabs, segmented controls. |
| --radius-field | `--radius-field` | `rounded-field` | `8px` | `8px` | Inputs, selects, text areas (8). |
| --radius-full | `--radius-full` |  | `9999px` | `9999px` | Raw value. Use a semantic token instead. |
| --radius-lg | `--radius-lg` | `rounded-lg` | `8px` | `8px` | Raw value. Use a semantic token instead. |
| --radius-md | `--radius-md` | `rounded-md` | `6px` | `6px` | Raw value. Use a semantic token instead. |
| --radius-none | `--radius-none` |  | `0px` | `0px` | Raw value. Use a semantic token instead. |
| --radius-panel | `--radius-panel` | `rounded-panel` | `24px` | `24px` | Page panels inside the shell (24). |
| --radius-pill | `--radius-pill` | `rounded-pill` | `9999px` | `9999px` | Fully rounded non-control shapes: badges, avatars, tags. |
| --radius-shell | `--radius-shell` | `rounded-shell` | `32px` | `32px` | The shell frame (32 = panel 24 + 8 gap). |
| --radius-sm | `--radius-sm` | `rounded-sm` | `4px` | `4px` | Raw value. Use a semantic token instead. |
| --radius-tile | `--radius-tile` | `rounded-tile` | `16px` | `16px` | Tiles inside cards, callouts, menus, popovers (16). |
| --radius-xl | `--radius-xl` | `rounded-xl` | `12px` | `12px` | Raw value. Use a semantic token instead. |
| --radius-xs | `--radius-xs` | `rounded-xs` | `2px` | `2px` | Raw value. Use a semantic token instead. |
| --size-12 | `--size-12` |  | `12px` | `12px` | 12px. Primitive — alias via a semantic token, never use directly. |
| --size-16 | `--size-16` |  | `16px` | `16px` | 16px. Primitive — alias via a semantic token, never use directly. |
| --size-20 | `--size-20` |  | `20px` | `20px` | 20px. Primitive — alias via a semantic token, never use directly. |
| --size-24 | `--size-24` |  | `24px` | `24px` | 24px. Primitive — alias via a semantic token, never use directly. |
| --size-28 | `--size-28` |  | `28px` | `28px` |  |
| --size-32 | `--size-32` |  | `32px` | `32px` | 32px. Primitive — alias via a semantic token, never use directly. |
| --size-40 | `--size-40` |  | `40px` | `40px` | 40px. Primitive — alias via a semantic token, never use directly. |
| --size-48 | `--size-48` |  | `48px` | `48px` | 48px. Primitive — alias via a semantic token, never use directly. |
| --size-56 | `--size-56` |  | `56px` | `56px` | 56px. Primitive — alias via a semantic token, never use directly. |
| --size-avatar-lg | `--size-avatar-lg` | `size-avatar-lg` | `40px` | `40px` | Profile headers. |
| --size-avatar-md | `--size-avatar-md` | `size-avatar-md` | `32px` | `32px` | Default avatar. |
| --size-avatar-sm | `--size-avatar-sm` | `size-avatar-sm` | `24px` | `24px` | Avatars in rows. |
| --size-control-lg | `--size-control-lg` | `size-control-lg` | `48px` | `48px` | Large buttons. |
| --size-control-md | `--size-control-md` | `size-control-md` | `40px` | `40px` | Default buttons and inputs. |
| --size-control-sm | `--size-control-sm` | `size-control-sm` | `32px` | `32px` | Small buttons and inputs. |
| --size-control-xs | `--size-control-xs` | `size-control-xs` | `24px` | `24px` | Chips and other compact pills. |
| --size-icon-lg | `--size-icon-lg` | `size-icon-lg` | `28px` | `28px` | Feature and empty-state icons. |
| --size-icon-md | `--size-icon-md` | `size-icon-md` | `24px` | `24px` | Icons in default and large controls. |
| --size-icon-sm | `--size-icon-sm` | `size-icon-sm` | `20px` | `20px` | Icons in small controls, nav and dense rows. |
| --size-icon-xs | `--size-icon-xs` | `size-icon-xs` | `16px` | `16px` | Icons in badges. |
| --size-measure | `--size-measure` | `size-measure` | `680px` | `680px` | 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. |