Border Radius
The CSS property that rounds the corners of an element, measured in pixels or percentages. Border radius transforms harsh rectangles into friendlier, more organic shapes—from subtle rounding to perfect circles. Framer provides individual corner controls for asymmetric rounding and variables to maintain consistent corner radii across your design system.
Margin
Layout
The space outside an element’s border, creating separation from neighboring elements. Margin helps control rhythm and spacing between blocks of content. In Framer, use spacing controls and layoutauto layout gap for consistent, predictable layout behavior.
Padding
Layout
The space inside an element, between its content and border. Padding improves readability and visual balance by creating internal breathing room. Consistent padding values help maintain a coherent design system.
Whitespace
Design
Empty space in a design that provides visual breathing room and separation between elements. Whitespace improves readability, focus, and perceived quality of designs. Resist filling every available space—whitespace is an active design element.
Material Design
Design
Google's design system combining flat design principles with subtle shadows and motion to suggest physical depth and surfaces. Material Design provides comprehensive guidelines for creating consistent, intuitive Android and web interfaces. Many principles translate to general interface design beyond Google products.