Spacing and radius

Spacing

One scale, in rem, used for every gap, padding and margin the components apply:

Token	Value	Typical use
--hui-space-2xs	0.125rem	2px — icon gaps inside a heading
--hui-space-xs	0.25rem	4px — title-to-description, badge gaps
--hui-space-sm	0.5rem	8px — label-to-control, button rows, table cell padding
--hui-space-md	0.75rem	12px — item inline padding, paragraph and heading spacing
--hui-space-lg	1rem	16px — card and empty-state padding, alert padding
--hui-space-xl	1.5rem	24px — dialog padding, list indent
--hui-space-2xl	2rem	32px — no component uses it; for host layout

The space scale

Radius

The scale is multiplicative, derived from one base:

--hui-radius: 0.45rem;
--hui-radius-sm:  calc(var(--hui-radius) * 0.6);  /* 0.27rem */
--hui-radius-md:  calc(var(--hui-radius) * 0.8);  /* 0.36rem */
--hui-radius-lg:  var(--hui-radius);              /* 0.45rem */
--hui-radius-xl:  calc(var(--hui-radius) * 1.4);  /* 0.63rem */
--hui-radius-2xl: calc(var(--hui-radius) * 1.8);  /* 0.81rem */
--hui-radius-pill: 9999px;

That matters more than it looks. A subtractive scale (calc(radius - 2px)) collapses to zero at a small base radius and inverts into a negative value at a large one, so a host that sets --hui-radius: 0.2rem or 2rem gets broken corners. Multiplying keeps every step proportional at any base.

Small controls clamp their radius so they never read as pills by accident:

hui-button[size="sm"] button { border-radius: min(var(--hui-radius-md), 12px); }

The radius scale

Setting --hui-radius re-themes every rounded surface at once. Components read it as --hui-radius-lg, -md, -xl and so on, so the relationship holds.