---
url: "https://vueda.dev/v3/reference/theming/tokens/semantic-radius-tokens.md"
title: "Semantic radius tokens"
---

# Semantic radius tokens

Five-step semantic ladder; near-flat by design.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-control-radius` | `2px` |  | slab radius shared by buttons, toggles, and most chrome controls. | `radius: vueda-control` |
| `--vueda-field-radius` | `0px` |  | editable field corner: text inputs, textareas, selects, date and time fields, tags inputs, and combobox triggers. Square so a field reads as a different kind of control from the 2px button slab; focus rings follow this corner, so a focused field's ring is square too. | `radius: vueda-field` |
| `--vueda-checkbox-radius` | `4px` |  | softer than --vueda-control-radius by design; the 4px corner reads as "chit / chiclet" at 16×16, differentiating the checkbox body from the slab inputs and buttons beside it. | `radius: vueda-checkbox` |
| `--vueda-card-radius` | `4px` |  | card and panel corner radius. | `radius: vueda-card` |
| `--vueda-modal-radius` | `2px` |  | dialog and sheet corner radius; matches --vueda-control-radius so modal chrome reads as a slab. | `radius: vueda-modal` |
| `--vueda-pill-radius` | `9999px` |  | fully round — avatars and user-manipulated tag / chip objects (TagsInput chips, attachment chips), plus inline running-text state markers. | `radius: vueda-pill` |

## Tokens

<a id="css-token-vueda-control-radius"></a>

### --vueda-control-radius

| Field | Value |
| --- | --- |
| Light | `2px` |
| Tailwind utility | `radius: vueda-control` |
| Source | `client/lib/theme/vueda-tailwind/base.css:572` |

slab radius shared by buttons, toggles, and most chrome controls.

<a id="css-token-vueda-field-radius"></a>

### --vueda-field-radius

| Field | Value |
| --- | --- |
| Light | `0px` |
| Tailwind utility | `radius: vueda-field` |
| Source | `client/lib/theme/vueda-tailwind/base.css:573` |

editable field corner: text inputs, textareas, selects, date and time fields, tags inputs, and combobox triggers. Square so a field reads as a different kind of control from the 2px button slab; focus rings follow this corner, so a focused field's ring is square too.

<a id="css-token-vueda-checkbox-radius"></a>

### --vueda-checkbox-radius

| Field | Value |
| --- | --- |
| Light | `4px` |
| Tailwind utility | `radius: vueda-checkbox` |
| Source | `client/lib/theme/vueda-tailwind/base.css:574` |

softer than --vueda-control-radius by design; the 4px corner reads as "chit / chiclet" at 16×16, differentiating the checkbox body from the slab inputs and buttons beside it.

<a id="css-token-vueda-card-radius"></a>

### --vueda-card-radius

| Field | Value |
| --- | --- |
| Light | `4px` |
| Tailwind utility | `radius: vueda-card` |
| Source | `client/lib/theme/vueda-tailwind/base.css:575` |

card and panel corner radius.

<a id="css-token-vueda-modal-radius"></a>

### --vueda-modal-radius

| Field | Value |
| --- | --- |
| Light | `2px` |
| Tailwind utility | `radius: vueda-modal` |
| Source | `client/lib/theme/vueda-tailwind/base.css:576` |

dialog and sheet corner radius; matches --vueda-control-radius so modal chrome reads as a slab.

<a id="css-token-vueda-pill-radius"></a>

### --vueda-pill-radius

| Field | Value |
| --- | --- |
| Light | `9999px` |
| Tailwind utility | `radius: vueda-pill` |
| Source | `client/lib/theme/vueda-tailwind/base.css:577` |

fully round — avatars and user-manipulated tag / chip objects (TagsInput chips, attachment chips), plus inline running-text state markers.