Variable
A named value stored centrally that can be reused throughout your project and updated globally from one location. Variables enable design systems by ensuring consistent values for colors, spacing, radii, and more. Framer's variable system supports colors, numbers, and responsive values.
Border Radius
Design
The CSS property that rounds the corners of an element, measured in pixels or percentages. Border radius transforms harsh rectangles into friendlier, more organic shapes—from subtle rounding to perfect circles. Framer provides individual corner controls for asymmetric rounding and variables to maintain consistent corner radii across your design system.
Box Shadow
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.
Color Variable
Framer
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.
Font Variable
Framer
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.
Theme
Design
A cohesive set of design choices—colors, typography, spacing—that can be applied across a site or component library. Themes enable consistent styling and support features like dark mode. Framer’s variables support theming through switchable value sets.
Design System
Components
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.
Design Tokens
Design
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.
Prompt Template
AI
A Prompt Template is a standardized prompt format that injects variable content into fixed instructions for consistent outputs.
Related AI terms: Prompt Enhancement and Prompt-to-Code.