Radius

Corners use a fixed scale. Buttons, inputs and tabs are fully round (full); cards and toasts use xl.

none0px

2xs2px

xs4pxCheck, tag

sm6px

md8px

lg12pxTextarea, menus

xl16pxcards, Toast

2xl20px

3xl24px

full9999pxbuttons, inputs, tabs

Using it

.photo {
  border-radius: var(--su-radii-xl);
}

Token	Value	CSS variable	Notes
none	0px	--su-radii-none
2xs	2px	--su-radii-2xs
xs	4px	--su-radii-xs	Check, tag
sm	6px	--su-radii-sm
md	8px	--su-radii-md
lg	12px	--su-radii-lg	Textarea, menus
xl	16px	--su-radii-xl	cards, Toast
2xl	20px	--su-radii-2xl
3xl	24px	--su-radii-3xl
full	9999px	--su-radii-full	buttons, inputs, tabs

Border widths

Token	Value	CSS variable	Notes
hairline	1px	--su-border-widths-hairline	card and divider lines
thin	1px	--su-border-widths-thin	input borders
control	1.2px	--su-border-widths-control	secondary button, focused input, Check and Radio outlines (Figma 1.2)
thick	2px	--su-border-widths-thick	focus ring