The practice of designing websites that can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities. Beyond being ethically important, accessibility improves SEO, expands your audience, and is legally required in many jurisdictions. Key practices include proper heading structure, alt text for images, sufficient color contrast, and navigationkeyboard navigation support.

Descriptive text added to images that screen readers and search engines use to understand image content. Good alt text describes content and purpose, not just its appearance — “Team celebrating product launch” is better than “people in office.” Framer lets you add alt text directly in the image properties panel. See How to add Alt Tags to images.

An HTML attribute that provides accessible names for elements that lack visible text labels, helping screen readers describe interactive elements. These are essential for icon buttons, decorative links, and complex widgets where the visual context isn’t available to assistive technology. Use aria-label when there’s no visible text, and aria-labelled by to reference existing text on the page. See Improving Accessibility with ARIA Labels. See Optimizing images, icons & interactive elements.

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 setting that determines how an element’s colors interact with the layers beneath it, such as multiply, screen, overlay, or difference. Blend modes enable creative effects like color tinting images, creating texture overlays, and building complex visual compositions. Experiment with blend modes in Framer to achieve effects that would otherwise require image editing software.

text and images while maintaining consistent styling. Framer’s built-in CMS supports Content Management System—a platform for creating, organizing, and publishing digital content without writing code for each update. A CMS separates content from design, allowing non-technical users to update collections, relationships, and dynamic pages for blogs, portfolios, and product catalogs.

The difference in luminance between foreground and background colors, critical for text readability and accessibility. WCAG guidelines require minimum contrast ratios of 4.5:1 for normal text and 3:1 for large text. Use contrast checking tools to ensure your color combinations are accessible to users with visual impairments. See Understanding contrast ratio.

The visual indicator showing the mouse position on screen, which changes shape to indicate possible interactions. Custom cursors can reinforce branding and provide feedback about interactive elements. In Framer, the cursor becomes contextual tools for placing elements and manipulating the canvas during design.

An interactive element that collects user input through fields like text boxes, dropdowns, and checkboxes. Well-designed forms balance collecting necessary information with respecting user time and effort. Keep forms short, use clear labels, provide helpful validation messages, and consider progressive disclosure for complex forms.

A gradual transition between two or more colors, creating depth, dimension, and visual interest. Gradients add sophistication to backgrounds, buttons, and text without requiring images. Framer supports linear, radial, and angular gradients with multiple color stops and precise positioning.

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.

HyperText Markup Language—the standard code that structures web content using tags that define headings, paragraphs, links, and other elements. While Framer generates HTML automatically, understanding its structure helps with SEO, accessibility, and debugging. Semantic HTML using proper tags like header, nav, and main improves accessibility and search rankings.

A UI element in design tools providing quick access to add new elements like text, shapes, images, and components. Insert menus speed up design workflows by centralizing element creation. Framer’s insert menu and slash commands enable rapid element addition.

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 uniform adjustment of space between all characters in a word or block of text, also called tracking. Increased letter spacing can improve readability for uppercase text and small sizes. Avoid negative letter spacing in body text as it impairs readability.

The vertical space allocated to each line of text, affecting readability and overall text block appearance. Proper line height prevents cramped or overly loose text—typically 1.4-1.6 for body copy. Adjust line height proportionally with font size for consistent rhythm.

An interactive element that navigates users to another page, section, or resource when clicked. Links are the fundamental building blocks of web navigation and interconnected content. Style links consistently throughout your site with clear visual distinction from surrounding text.

A grainy texture effect added to backgrounds or elements for visual interest and tactile quality. Subtle noise can add depth and sophistication, reducing the flatness of solid colors. Apply noise sparingly—heavy noise can look dated and affect performance.

The animation or effect that occurs when navigating between pages, providing visual continuity. Page transitions can make navigation feel seamless and help users maintain context. Framer supports various transition effects between pages.

Interface elements that allow adjusting component properties visually, exposing customization options to designers. Property controls make components flexible and reusable across different contexts. In Framer, add property controls to code components for designer-friendly customization.

Positioning that keeps an element in normal document flow while allowing offset adjustments from its default location. It is useful for minor visual nudges and for establishing a positioning context for absolutely positioned children. Prefer layout tools for larger structural alignment.

Formatted text with styling like bold, italic, headings, lists, and links, beyond plain unformatted text. Rich text fields in Framer’s CMS allow content editors to format text without touching design. Connect rich text fields to styled containers for consistent typography.

A group of user interactions with a website occurring within a time frame, typically resetting after 30 minutes of inactivity. Sessions provide context for analyzing user behavior patterns and conversion paths. Track session-based metrics to understand how users engage over visits.

The border or outline applied to shapes and text, defined by weight, color, and style like solid, dashed, or dotted. Strokes add definition, create contrast, or achieve specific visual styles like outlined buttons. Framer offers stroke controls including width, color, and position (inside, center, outside).

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.

Visual enhancements applied to text including shadows, gradients, outlines, and animations. Text effects can add personality and emphasis but should maintain readability. Use effects sparingly and test at various sizes and backgrounds.

A saved combination of font, size, weight, spacing, and color settings that can be applied consistently to text elements. Text styles ensure typographic consistency and make global updates efficient—change the style, update all instances. Build a systematic hierarchy with styles for headings, body, captions, and other text types.

A small text popup that appears when hovering over an element, providing additional context or explanation. Tooltips should contain brief, helpful information that isn't essential for basic usage. Remember tooltips don't work on touch devices—don't hide critical information in them.

The art and technique of arranging text for readability, legibility, and visual appeal. Good typography guides readers through content while reinforcing brand personality. Study typography fundamentals—font choice, sizing, spacing, and hierarchy—to elevate all your designs.

A prompt encouraging users to take a specific action, typically presented as a button or link with action-oriented text like 'Get Started' or 'Learn More.' Effective CTAs are visually prominent, clearly worded, and strategically placed throughout the user journey. Test different CTA copy, colors, and placements to optimize conversion rates using Framer's A/B testing.

HyperText Transfer Protocol Secure—encrypted web communication that protects data between browsers and servers. HTTPS is now essential for security, SEO rankings, and enabling modern browser features. Framer provides free SSL certificates for automatic HTTPS on all sites.

A clickable connection between pages or resources, the fundamental navigation mechanism of the web. Hyperlinks should have descriptive text indicating their destination rather than generic ‘click here’ labels. Style links consistently with clear visual distinction from surrounding text.

A compressed image format best suited for photographs and complex images with many colors and gradients. JPEG compression is lossy, meaning some quality is sacrificed for smaller files. Use JPEG for photos but prefer PNG for graphics with sharp edges, text, or transparency.

A lossless image format supporting transparency, best for graphics, logos, and images with sharp edges or text. PNG files are larger than JPEG for photos but preserve quality perfectly through editing and compression. Use PNG for graphics with transparency or when image quality is paramount.

An image that adapts to different screen sizes and resolutions, serving appropriately sized versions for each context. Responsive images improve performance by avoiding unnecessarily large downloads on small screens. Framer handles responsive images automatically, serving optimized versions.

The volume of visitors accessing a website, measured in sessions, users, or pageviews over time. Growing traffic is often a primary goal, but quality matters more than quantity. Focus on attracting the right traffic that converts and engages.

A prominently styled button designed to attract clicks and drive users toward a conversion goal. Effective CTA buttons use contrasting colors, clear action-oriented text, and strategic placement. Test variations of your CTA—even small changes to wording or color can significantly impact click-through rates.

A word or phrase that users search for, targeted in content and SEO strategy to attract relevant traffic. Research keywords to understand user intent and competition before creating content. Incorporate keywords naturally in titles, headings, and body text without overstuffing.

Temporary content indicating where final content will appear, helping visualize layouts before content is ready. Placeholders can be lorem ipsum text, gray boxes, or sample images. Replace placeholders with real content before launch—they can accidentally go live.

High-resolution screens with twice or more the standard pixel density, displaying sharper text and images. Retina displays require higher resolution images—typically 2x the displayed size—to appear crisp. Framer automatically serves appropriate image sizes for different display densities.

Structured data added to HTML that helps search engines understand content context and display rich snippets. Schema markup can enhance search listings with ratings, prices, event dates, and more. Implement schema for content types where rich results provide value. See How to change the site name in Framer.

The adjustment of space between individual letter pairs to achieve visually balanced text, particularly important in headlines and logos. Poor kerning creates awkward gaps or collisions that undermine professional appearance. Pay special attention to problematic pairs like AV, To, and We where mechanical spacing looks wrong.

The vertical spacing between lines of text, measured from baseline to baseline and also known as line-height in CSS. Proper leading improves readability—too tight feels cramped while too loose breaks visual connection between lines. Generally, set leading between 1.4 and 1.6 times the font size for body text.

The height of lowercase letters in a typeface, measured using the letter ‘x’, affecting perceived size and readability. Fonts with larger x-heights appear larger and more readable at small sizes. Consider x-height when selecting fonts for body text.

The invisible line where the bottom of most letters sit, used as a reference point for aligning text and maintaining vertical rhythm. Baseline alignment ensures multiple text elements appear visually connected even at different sizes. Understanding baselines helps create polished typography in multi-column layouts.

A minimalist design style emphasizing clean shapes, bright colors, and two-dimensional elements without shadows, gradients, or textures. Flat design emerged as a reaction to skeuomorphism and dominates modern digital interfaces. While visually clean, ensure sufficient visual hierarchy and affordances for usability.

A design approach where digital interfaces mimic real-world objects with realistic textures, shadows, and materials. Skeuomorphism provides familiar metaphors but has largely given way to flatter design styles. Some skeuomorphic elements persist where real-world familiarity aids understanding.

A visual collage of images, colors, typography, and textures capturing the intended look and feel of a project. Mood boards align stakeholders on aesthetic direction before detailed design begins. Create mood boards to explore and communicate design concepts efficiently.

Named values storing design decisions like colors, spacing, and typography, enabling systematic design across platforms. Tokens create a single source of truth that can be translated to different implementation contexts. In Framer, variables serve as design tokens for colors, numbers, and responsive values.

A form element used to collect user-entered values such as text, email, or numbers. Input components often support states, validation, and submission workflows.

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.

Largest Contentful Paint (LCP) measures loading performance by tracking when the largest visible text or image element appears on screen.

Component Properties are exposed settings on reusable components that let editors and designers change values like text, states, visibility, or variants.

Variable Modes let one variable system support multiple contexts, such as theme, platform, or state, by switching between predefined value sets.

AGENTS.md is a project instruction file that gives AI coding agents task context, workflow rules, and constraints so agent behavior aligns with team standards.

Model Context Protocol (MCP) is an open integration protocol that enables Framer Server API.AI agents to discover and use external tools, resources, and actions through MCP servers. If you want to learn more about how Framer integrates with MCP, check out the

An MCP Server is a service that implements the Model Context Protocol, making external capabilities available to compatible AI agents.

Non-interactive Mode executes agent workflows in a command-driven context without live chat interactions, useful for automation and pipelines.

Prompt Caching stores reusable prompt context so repeated requests can skip redundant processing and improve performance.

A Context Window is the maximum amount of tokens a model can process at once, including instructions, conversation history, and retrieved data.

Agent Memory is persisted context that allows an AI agent to remember preferences, facts, and workflow state across sessions.

Embeddings are numerical vectors that capture semantic meaning, enabling similarity search, clustering, and retrieval workflows.

Related AI terms: CLIP and Textual Inversion.

Grounding is the practice of constraining generation with verifiable sources so outputs are accurate, attributable, and context-specific.

Hallucination refers to model outputs that sound plausible but are unsupported or false, often due to missing or weak source context.

Multimodal AI combines understanding and generation across different modalities, enabling richer interfaces and cross-media reasoning.

An Appendix is supplemental material attached to the end of a document or guide to provide deeper context, references, or background information.

A Hero Image is a large, high-impact image in the top section of a page used to establish tone, communicate value, and drive attention.

Inclusion is a design principle focused on creating experiences that are welcoming, usable, and respectful for diverse users and contexts.

Justified text alignment stretches line spacing so text aligns on both margins, improving visual structure but requiring careful spacing control.

Points are a standard unit in typography for sizing text and related spacing, where 1 point equals 1/72 of an inch.

Readability describes how comfortably users can consume written content, influenced by typography, line length, spacing, and visual contrast.

Serif typefaces include decorative terminal strokes that can convey tradition, credibility, and reading comfort in long-form text.

Text-to-Image Generation creates visuals directly from prompt instructions. Most modern systems rely on a Diffusion Model and can be steered using a Reference Image.

Style Reference lets you guide the aesthetic of generated assets by pointing the model to example visuals. It is frequently combined with Reference Image inputs in Text-to-Image Generation workflows.

Multi-image Conditioning uses several images as control inputs for one generation task, improving consistency across outputs. It extends single Reference Image workflows in Text-to-Image Generation.

Generative Fill replaces or creates content inside selected areas while matching surrounding context. It often depends on accurate Image Segmentation and pairs with Generative Expand for broader canvas edits.

Generative Expand increases image boundaries and predicts plausible continuation beyond original edges. It is commonly used alongside Generative Fill in broader Text-to-Image Generation workflows.

A Diffusion Model creates images through iterative denoising steps conditioned on prompts and controls. It is the backbone of many Text-to-Image Generation systems and can be steered by Classifier-Free Guidance (CFG).

CLIP (Contrastive Language-Image Pretraining) maps text and images into a shared representation space for similarity and retrieval. It powers capabilities such as Find Similar Designs and works well with Vision Transformer (ViT) style architectures.

Segment Anything Model (SAM) produces masks from points, boxes, or text-like prompts for rapid object selection. It underpins modern Image Segmentation workflows and improves control in Reference Image editing.

Prompt-to-Prompt Editing changes specific image attributes by adjusting textual instructions while preserving overall scene structure. It is closely related to Prompt Enhancement and iterative Text-to-Image Generation.

InstructPix2Pix applies natural-language editing commands to existing images while retaining layout context. It extends ideas from Prompt-to-Prompt Editing within practical Text-to-Image Generation pipelines.

Textual Inversion introduces new concept tokens by learning embeddings that map to visual ideas. It is lightweight compared to full training and connects closely with Embeddings and DreamBooth workflows.

An MCP client is the part of an app or MCP server and requests tools, resources, or prompts using Model Context Protocol (MCP).agent that connects to an

Real-time or on-demand suggestions provided by an AI model as a developer types, ranging from single-word completions to entire function bodies. Modern tools like GitHub Copilot and Cursor use large language models to infer intent from surrounding code and comments. Code completion reduces keystrokes, surfaces patterns, and helps developers stay in flow—while requiring judgment about whether suggestions are correct and appropriate.

The skill of writing, structuring, and iterating on instructions—often called prompts—so that an AI model produces the desired output. In coding contexts, good prompt engineering includes providing context, specifying constraints, and showing examples. In vibe coding workflows, clear prompts directly determine code quality. Effective prompt engineering reduces hallucinations, improves specificity, and is essential for getting reliable results from both code generation and agentic tasks.

Branch-aware cursors show collaborators in the correct branch context, so teams can review and edit without confusing separate versions of a project.

In collaborative Framer workflows, branch-aware cursors helps teams move faster without losing control of structure, content, performance, or editable design details.

An agent handoff is the transfer of context, files, or tasks from one AI agent to another so work can continue without losing project intent.

An agent handoff keeps a workflow moving when a task needs a different tool, model, or specialist. In Framer, this can mean passing site context from a design-focused agent to a coding or CMS-focused agent while preserving the user’s goals and constraints.

Agent context is the project information, user intent, constraints, and prior conversation an AI agent uses to make accurate changes.

Agent context helps an AI system understand what it is editing and why. Strong context can include the selected page, existing CMS structure, current design patterns, and instructions from the user, which reduces generic or mismatched output.

An agent session is the active connection and conversation state between a user, an AI agent, and the project being edited.

An agent session keeps track of the current project access, recent instructions, and ongoing tasks. Session context helps an agent continue work without starting from a blank slate each time the user asks for a change.

Agent bridge setup is the process of connecting an external AI tool to a Framer project so it can access project context and tools.

Agent bridge setup usually includes installing a connection layer, authorizing access, and confirming that the external tool can read or edit the correct project. It helps external agents work with pages, CMS content, and components without manual copy-paste.

Framer supports dark experiences through color choices, tokens, and component variants, making it easier to design interfaces that feel polished in low-light or high-contrast contexts.

Framer blend modes can create richer visual treatments by letting text, shapes, images, and effects interact with the colors underneath them.

Framer overlays let designers build interactive layers that appear above or beside content, such as navigation drawers, tooltips, signup modals, and dropdown menus.

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

Framer comments keep feedback connected to the exact design context, helping teams review pages, resolve decisions, and collaborate without scattering notes across tools.

Framer text decoration helps designers style links, emphasis, and editorial details while keeping type treatments consistent across a site.

In Framer, balanced text can make headlines and supporting copy feel more intentional across screen sizes by reducing awkward single-word lines.

Framer selection colors let teams align the small details of browser interaction with the site’s visual system, reinforcing brand polish even in native behaviors.

Framer link styles keep navigation, inline links, and active states consistent, so interactive text feels intentional across pages and CMS content.

In Framer, truncation is useful for cards, lists, and CMS-driven content where titles or descriptions may vary in length but the layout should remain aligned.

Framer custom cursors can add interaction feedback, brand personality, or contextual hints while visitors move through highly designed pages.

In Framer, multiplayer cursors make collaboration feel immediate by showing teammates’ presence on the canvas, helping teams design together without losing context.

In Framer, tables in CMS rich text are useful for structured information like comparisons, specs, schedules, and reference data without building a separate custom layout for every entry.

In Framer CMS workflows, Markdown can help teams prepare content quickly before converting it into rich text, pages, or structured collection entries.

In Framer, code blocks help technical content stay readable by preserving indentation, syntax language, and visual contrast inside CMS-driven articles or reference pages.

In Framer CMS content, blockquotes help editors highlight excerpts, testimonials, callouts, or cited material while keeping the content semantically structured.

In Framer hosting, compression helps improve performance by shrinking files like scripts, styles, and markup before they travel over the network.