The visual appearance of an interactive element when it receives keyboard focus, which is critical for accessibility. Focus states must remain clearly visible; do not remove them without providing an equally visible replacement. A strong focus style improves usability for keyboard and assistive-technology users.

A specific style and weight within a typeface family, like Inter Bold or Helvetica Light Italic. Choosing appropriate fonts affects readability, brand perception, and page performance. Framer provides access to Google Fonts and supports custom font uploads for complete typographic control.

A variable font containing multiple weights, widths, or styles in a single file, enabling smooth interpolation between values. Variable fonts reduce file downloads while offering greater typographic flexibility. Use variable fonts for performance benefits and fluid typography that responds to user preferences.

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.

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.

CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.

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.

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 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 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 switch-style control for binary choices, indicating on/off or enabled/disabled states with immediate effect. Toggles differ from checkboxes in that they typically apply changes immediately rather than requiring a submit action. Use clear labeling so users understand what enabled and disabled states mean.

Cascading Style Sheets—the styling language that controls how HTML elements appear, including colors, fonts, spacing, and layouts. While Framer generates CSS automatically from your visual designs, understanding CSS concepts helps you troubleshoot issues and leverage advanced features. Custom CSS can be added through code components or overrides when needed.

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.

User Interface—the visual elements and interactive components through which users engage with a product. Good UI is intuitive, consistent, and aligned with user expectations and mental models. UI design balances aesthetic appeal with functional usability.

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 web application that loads once and dynamically updates content without full page reloads. SPAs provide app-like experiences with smooth transitions and responsive interactions. Framer supports SPA-style navigation with page transitions.

A family of fonts sharing consistent design characteristics, such as Helvetica or Inter, containing multiple weights and styles. Choose typefaces that reflect brand personality while maintaining readability. Limit to 2-3 typefaces per project for cohesion.

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 collection of reusable components, guidelines, and standards that ensure consistency across a product and team. Design systems speed up development, maintain brand coherence, and enable designers and developers to speak the same language. Framer supports design systems through components, variables, and styles.

Related AI terms: Find Similar Designs and AI Layer Renaming.

Documentation defining a brand’s visual standards including colors, typography, spacing, and component usage rules. Style guides ensure consistency across team members, projects, and time. Maintain living style guides that evolve with your design system.

A timeline of saved project states that allows you to review, compare, and restore earlier versions. Version history reduces risk when iterating by making rollbacks straightforward.

A design tool used to resize selected layers proportionally, often including typography and effects. It helps preserve visual relationships when scaling multi-element compositions.

Combo Classes extend a base CSS class with targeted style changes, allowing reusable variants without duplicating entire style definitions.

A System Prompt is a top-level instruction layer that sets goals, boundaries, and response style before user messages are processed.

A Customer Journey maps each step a user takes across touchpoints before, during, and after conversion to identify friction and improve experience.

A Font Family is a grouped collection of type styles and weights designed with consistent visual DNA for cohesive typography systems.

A Logo is a unique symbol, wordmark, or combination mark used to identify and differentiate a brand across touchpoints.

Sans Serif refers to letterforms without small finishing strokes, commonly chosen for modern, legible screen typography.

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

Find Similar Designs is an AI retrieval feature that helps teams discover visually related assets in large files or libraries. It supports consistency by linking discovery to your Design System and optional Style Reference inputs.

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.

A Reference Image is a conditioning input that guides composition, structure, or aesthetics during generation. It is central to Style Reference workflows and Multi-image Conditioning.

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.

A development approach coined by Andrej Karpathy in which developers describe what they want in plain language—or even just a vibe—and rely on AI to write, iterate, and debug the code. Rather than authoring every line, the developer acts as director and reviewer, accepting or rejecting AI suggestions. Vibe coding lowers the barrier to building software and accelerates prototyping, but it requires careful review because AI-generated code can introduce subtle bugs or security issues.

Reference recreation is the process of rebuilding a design from an image, URL, or example while preserving its layout, style, and visual hierarchy.

In AI-assisted website creation, reference recreation helps teams move faster without losing control of structure, content, performance, or editable design details.

AI site migration uses an agent to recreate pages, structure, styles, and CMS content from an existing site, export, or reference in Framer.

In AI-assisted website creation, ai site migration helps teams move faster without losing control of structure, content, performance, or editable design details.

An agent prompt is a user request written to guide an AI agent toward a specific project outcome, such as a page edit or CMS update.

An effective agent prompt gives the AI enough direction to act without guessing. It usually names the target, the desired outcome, constraints, and any content or style rules that should be preserved.

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 text decoration helps designers style links, emphasis, and editorial details while keeping type treatments consistent across a site.

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

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