---
url: "https://vueda.dev/v3/reference/theming/tokens/control-sizing-vueda-canon.md"
title: "Control sizing (VUEDA canon) tokens"
---

# Control sizing (VUEDA canon) tokens

Single system-wide height scale shared by buttons, inputs, selects,
number-fields, tag-input containers, and OTP slots. Diverges from
shadcn's h-9 (36px) default.
  32px default — the "dense SaaS" sweet spot (Carbon condensed is 32,
                 Uber Base table row is 32).
  28px compact — table row edit mode, action strips.
  40px lg      — primary page CTAs and auth screens.

| Name | Light | Dark | Description | Tailwind utility |
| --- | --- | --- | --- | --- |
| `--vueda-control-height` | `32px` |  | default control row; the dense-SaaS sweet spot shared by buttons, inputs, selects, number fields, OTP slots, and tag-input shells. | `spacing: vueda-control` |
| `--vueda-control-height-sm` | `28px` |  | compact control row; table-row edit mode and action strips. | `spacing: vueda-control-sm` |
| `--vueda-control-height-lg` | `40px` |  | large control row; primary page CTAs and auth screens. | `spacing: vueda-control-lg` |
| `--vueda-control-px-sm` | `0.5rem` |  | 8px horizontal padding paired with --vueda-control-height-sm. | `spacing: vueda-control-px-sm` |
| `--vueda-control-px-md` | `0.75rem` |  | 12px horizontal padding paired with --vueda-control-height. | `spacing: vueda-control-px` |
| `--vueda-control-px-lg` | `1.25rem` |  | 20px horizontal padding paired with --vueda-control-height-lg. | `spacing: vueda-control-px-lg` |

## Tokens

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

### --vueda-control-height

| Field | Value |
| --- | --- |
| Light | `32px` |
| Tailwind utility | `spacing: vueda-control` |
| Source | `client/lib/theme/vueda-tailwind/base.css:613` |

default control row; the dense-SaaS sweet spot shared by buttons, inputs, selects, number fields, OTP slots, and tag-input shells.

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

### --vueda-control-height-sm

| Field | Value |
| --- | --- |
| Light | `28px` |
| Tailwind utility | `spacing: vueda-control-sm` |
| Source | `client/lib/theme/vueda-tailwind/base.css:614` |

compact control row; table-row edit mode and action strips.

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

### --vueda-control-height-lg

| Field | Value |
| --- | --- |
| Light | `40px` |
| Tailwind utility | `spacing: vueda-control-lg` |
| Source | `client/lib/theme/vueda-tailwind/base.css:615` |

large control row; primary page CTAs and auth screens.

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

### --vueda-control-px-sm

| Field | Value |
| --- | --- |
| Light | `0.5rem` |
| Tailwind utility | `spacing: vueda-control-px-sm` |
| Source | `client/lib/theme/vueda-tailwind/base.css:616` |

8px horizontal padding paired with --vueda-control-height-sm.

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

### --vueda-control-px-md

| Field | Value |
| --- | --- |
| Light | `0.75rem` |
| Tailwind utility | `spacing: vueda-control-px` |
| Source | `client/lib/theme/vueda-tailwind/base.css:617` |

12px horizontal padding paired with --vueda-control-height.

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

### --vueda-control-px-lg

| Field | Value |
| --- | --- |
| Light | `1.25rem` |
| Tailwind utility | `spacing: vueda-control-px-lg` |
| Source | `client/lib/theme/vueda-tailwind/base.css:618` |

20px horizontal padding paired with --vueda-control-height-lg.