Qeetrix

Spacing and Corners

The corner roles, the radius scale, and the primitive spacing scale.

Corners

Components round their corners through roles, so a control, a field and a surface each keep their own shape. The swatches below are drawn with the live variables.

control

--qx-corner-control

var(--radius-lg)

field

--qx-corner-field

var(--radius-lg)

chip

--qx-corner-chip

var(--radius-md)

surface

--qx-corner-surface

var(--radius-xl)

overlay

--qx-corner-overlay

var(--radius-xl)

pill

--qx-corner-pill

9999px

circle

--qx-corner-circle

50%

none

--qx-corner-none

0px

base

--qx-corner-base

0.45rem

xs

--qx-corner-xs

2px

sm

--qx-corner-sm

4px

The control, field, chip, surface and overlay roles come from Tailwind's radius scale, which is built on one variable, --radius: rounded-lg equals it, and the scale runs from rounded-sm (0.6×) to rounded-4xl (2.6×). Changing --radius retunes them all; pill, circle and none stay fixed.

Spacing

Components space themselves with Tailwind's spacing utilities, such as gap-2 and px-4. The named steps below are the primitive spacing scale, published in @qeetrix/ui/tokens.css for design tooling.

StepValueVariable (tokens.css)
00px--qx-space-0
xxs2px--qx-space-xxs
xs4px--qx-space-xs
s8px--qx-space-s
m12px--qx-space-m
l16px--qx-space-l
xl24px--qx-space-xl
2xl32px--qx-space-2xl
3xl48px--qx-space-3xl
4xl64px--qx-space-4xl
5xl96px--qx-space-5xl

On this page

CornersSpacing