A design approach that starts with the mobile experience and progressively enhances for larger screens. Mobile-first forces prioritization and ensures the smallest screens get the best experience, not a squeezed afterthought. This approach often results in cleaner, more focused designs at all screen sizes.

The number of pixels displayed on screen, typically expressed as width by height, affecting image sharpness and detail. Higher resolution requires appropriately sized assets to appear crisp. Design with resolution independence in mind using vector graphics where possible.

A Vector is a scalable graphic format built from mathematical paths instead of pixels, enabling crisp rendering at any size.

In Framer, SVG animations can add lightweight motion to icons, illustrations, logos, and interface details while keeping visuals crisp at any size.

In Framer, optimized SVGs help maintain crisp visuals while reducing unnecessary markup, file size, and rendering cost on published pages.