Materials
Depth is drawn with hairlines and two backgrounds. The one shadow belongs to what floats above the page.
Radius
Five radii, and one rule: a shape inside another takes the outer radius minus the space between them, so both curves share a center.
- rounded-xs Marks
- rounded-sm Badges
- rounded-md Controls
- rounded-lg Cards, menus
- rounded-xl Dialogs
Surfaces
Each surface pairs a radius with a hairline. Only the floating ones add the overlay shadow.