Spacing, radius and shadow

A 4px scale, radii derived from --radius and subtle shadows.

Spacing

space-14pxgap-1. Icon + text inside badges.

space-28pxgap-2. Icon + text in buttons; toolbar items.

space-312pxgap-3 / px-3. Horizontal padding of Input and Select.

space-416pxp-4 / gap-4. Alert padding, gap between form fields.

space-624pxp-6 / gap-6. Card padding, space between card sections.

space-832pxgap-8. Between blocks on a page.

space-1248pxpy-12. Between large page sections.

radius8pxBase (--radius = 0.5rem). The other radii derive from it.

radius-sm4pxrounded-sm. Checkbox, Badge, small items.

radius-md6pxrounded-md. Button, Input, Select, Tabs, menu items.

radius-lg8pxrounded-lg. Alert, Popover, Dialog.

radius-xl12pxrounded-xl. Card.

radius-full9999pxrounded-full. Switch, Avatar.

shadow-xsInput, outline Button, Select.

shadow-smCard.

shadow-mdPopover, DropdownMenu.

shadow-lgDialog, Sheet.