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.

A reusable color value stored centrally and referenced throughout your design, enabling consistent branding and easy global updates. When you change a color variable, every element using it updates automatically. Framer's color variables support semantic naming like 'primary' and 'error' for maintainable design systems.

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.

A saved set of visual properties—colors, typography, effects—that can be applied consistently across elements. Styles enable design system consistency and make global updates efficient. In Framer, text and color styles ensure brand coherence throughout your project.

A named value stored centrally that can be reused throughout your project and updated globally from one location. Variables enable design systems by ensuring consistent values for colors, spacing, radii, and more. Framer's variable system supports colors, numbers, and responsive values.

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.