Space, radius, size

Spacing and radius steps are named by pixel value. Radius also has roles named by use. Touch targets are at least --v-size-hit.

Spacing

Gaps, padding and margins use these steps; npm run check rejects raw values.

--v-space-2
--v-space-4
--v-space-6
--v-space-8
--v-space-10
--v-space-12
--v-space-16
--v-space-20
--v-space-24
--v-space-32
--v-space-40
--v-space-48
--v-space-56
--v-space-64

Radius

RoleShapeValueUse
control
--v-radius-control
fullButtons, chips, fields, segmented controls, badges, banners, toasts.
card
--v-radius-card
24pxCards.
sheet
--v-radius-sheet
24pxBottom sheets and modals (top corners).
block
--v-radius-block
16pxBlocks inside a screen or card: list rows, select tiles, images, maps.
inset
--v-radius-inset
12pxSmall panels inside cards: key-value tiles, tinted panels, rectangular fields.
bubble
--v-radius-bubble
20pxChat bubbles.
bubble-tail
--v-radius-bubble-tail
4pxThe corner of a chat bubble that points at its sender.

Steps, for one-off shapes: --v-radius-4 --v-radius-8 --v-radius-12 --v-radius-16 --v-radius-20 --v-radius-24 --v-radius-32 --v-radius-full

Control heights

--v-size-control-sm 40px
--v-size-control-md 48px
--v-size-control-lg 56px

Tokens

CSSValueNotes
--v-space-22px
--v-space-44px
--v-space-66px
--v-space-88px
--v-space-1010px
--v-space-1212px
--v-space-1616px
--v-space-2020px
--v-space-2424px
--v-space-3232px
--v-space-4040px
--v-space-4848px
--v-space-5656px
--v-space-6464px
--v-radius-44px
--v-radius-88px
--v-radius-1212px
--v-radius-1616px
--v-radius-2020px
--v-radius-2424px
--v-radius-3232px
--v-radius-full999pxFully rounded: pills and circles.
--v-radius-controlvar(--v-radius-full)Buttons, chips, fields, segmented controls, badges, banners, toasts.
--v-radius-cardvar(--v-radius-24)Cards.
--v-radius-sheetvar(--v-radius-24)Bottom sheets and modals (top corners).
--v-radius-blockvar(--v-radius-16)Blocks inside a screen or card: list rows, select tiles, images, maps.
--v-radius-insetvar(--v-radius-12)Small panels inside cards: key-value tiles, tinted panels, rectangular fields.
--v-radius-bubblevar(--v-radius-20)Chat bubbles.
--v-radius-bubble-tailvar(--v-radius-4)The corner of a chat bubble that points at its sender.
--v-size-avatar-xs20px
--v-size-avatar-sm28px
--v-size-avatar-md36px
--v-size-avatar-lg52px
--v-size-icon-sm13px
--v-size-icon-md16px
--v-size-icon-lg20px
--v-size-control-sm40px
--v-size-control-md48px
--v-size-control-lg56px
--v-size-hit44pxMinimum touch target.
--v-size-bubble-max86%Max width of a chat bubble, as a share of the thread.
--v-size-card-max380pxMax width of a card in a chat thread.
--v-border2pxStroke width for outlines, focus rings, dividers.