The visual layer behind an element’s content, which can include solid colors, gradients, images, videos, or combinations of these. Backgrounds establish visual hierarchy and mood while providing contrast for readable text. Framer supports multiple background layers, allowing you to combine images with color overlays and blend modes for sophisticated effects.

A CSS effect that adds shadow beneath or around an element, creating depth and visual separation from the background. Shadows help establish hierarchy by making elements appear to float above the page surface. Framer offers detailed shadow controls including multiple shadows, inner shadows, and variables for consistent elevation systems.

An interaction where users click and hold an element to move it, common for reordering lists, sliders, and drawing interfaces. Drag interactions should provide clear visual feedback about what's being moved and where it can be dropped. Consider touch device behavior where drag competes with scrolling gestures.

The structured use of heading levels (H1-H6) to organize content and communicate importance to users and search engines. Proper heading hierarchy improves accessibility, SEO, and content scanability. Use only one H1 per page and don't skip levels for visual styling. See Text styles and semantic tags.

The prominent top section of a landing page, typically featuring primary messaging and a main call to action. It sets the first impression and communicates value quickly. Effective hero sections combine clear copy, visual support, and an obvious next step.

The arrangement of visual elements on a page, establishing structure, hierarchy, and flow of information. Good layout guides the eye naturally through content while creating visual harmony. Consider reading patterns—users typically scan in F or Z patterns on text-heavy pages.