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.

A parent element that holds and organizes child elements, defining boundaries for layout and positioning. Containers with maximum widths prevent content from becoming too wide on large screens while allowing full-width backgrounds. Framer's containers support auto layout, padding, and responsive size controls for flexible layouts.

The property that determines whether flexbox children are arranged in rows (horizontal) or columns (vertical). This setting affects wrapping, alignment, and spacing behavior within a flex container. In Framer layoutauto layout, direction maps to horizontal or vertical stacking.

A CSS layout system designed for one-dimensional layouts, distributing space among items in rows or columns. Flexbox excels at navigation bars, card rows, and any content that should grow or shrink responsively. Framer's auto layout is powered by flexbox concepts, making these layouts visual and intuitive.

The fundamental container element in Framer that holds content and defines boundaries for layout, sizing, and visual properties. Frames are the building blocks of every Framer design, from tiny icons to full page layouts. Unlike groups, frames have their own properties and can contain responsive layouts and effects.

The space between elements in a flex or grid layout, providing consistent gutters without margin manipulation. Gap is cleaner than margins because it only applies between items, not at container edges. In Framer's auto layout, gap controls the spacing between child elements uniformly.

A flexbox property that controls how items are distributed along the main axis, using values like center, space-between, and space-around. It affects horizontal spacing in rows and vertical spacing in columns. In Framer layoutauto layout, it helps control distribution and balance.

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.

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.

A layout component that arranges children in a vertical or horizontal sequence with consistent spacing. Stacks simplify common layout patterns and maintain consistent gaps between elements. Use Framer's auto layout or stack components for structured arrangements.

A pre-designed, reusable starting point containing layout structure, styles, and often placeholder content. Templates accelerate projects by providing tested foundations rather than starting from scratch. Framer offers professional templates for common site types that can be fully customized.

A rotating display of multiple pieces of content within a single space, allowing users to navigate through items using arrows or swipe gestures. While carousels save space, studies show users often miss content beyond the first slide—consider whether a grid might be more effective. If using carousels, ensure clear navigation indicators and consider auto-play carefully.

Psychology-based design rules explaining how humans perceive visual elements as unified wholes, including proximity, similarity, closure, and continuity. Applying gestalt principles creates intuitive groupings and relationships without explicit visual separators. These principles underpin effective layout and information architecture.

The positioning of elements relative to each other or a container to create visual order and clarity. Strong alignment improves scanability and perceived quality. In Framer, layoutauto layout and constraints help maintain consistent alignment across breakpoints.

A workflow where content is edited directly in the context of the live page layout rather than in a separate form view. This improves editorial speed and reduces context switching.

Cumulative Layout Shift (CLS) quantifies visual instability by measuring how much elements move unexpectedly during page load and interaction.

Breakpoint Overrides are responsive design adjustments applied at specific viewport widths so elements can adapt without changing the base design.

Site Preview is a non-production view of a site used to test design, content, and interactions before a production publish.

What is vibe design?

Vibe design is the practice of directing the look, feel, and layout of a user interface through natural language prompts and AI-assisted tools instead of manually adjusting every canvas detail.

Why it matters

It helps teams move from intent to interface faster. Instead of starting with blank frames, spacing rules, and individual style decisions, creators can describe the desired outcome, then refine the generated result through iteration.

Example

A designer might ask for a calm editorial landing page, a dense SaaS comparison section, or a playful onboarding screen. The prompt sets the direction, while follow-up edits tune hierarchy, copy, layout, and interaction details.

How it works in Framer

In Framer, vibe design works best when the prompt describes the visible goal clearly: audience, structure, density, tone, and important content. The AI can then create or revise editable canvas elements while keeping the result aligned with the site’s design system.

A bento grid in Framer helps present product features, media, and proof points in a structured but expressive layout, using cards that can span different rows or columns.

Framer auto sizing keeps cards, buttons, sections, and text groups flexible, making responsive layouts easier to maintain as content changes.

Framer tickers can add motion to marquees, partner logos, feature labels, and repeated content while preserving a clean editable layout.

Framer auto-save protects design progress while teams edit pages, components, and content, making collaboration faster and reducing the risk of losing work.