Color Variable

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.

Related terms

Related terms

  • Text Style

    Framer

    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.

  • Variable

    Framer

    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.

  • Variable Modes

    Design

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

  • HEX Value

    Design

    A HEX Value is a web color notation like #RRGGBB used in CSS and design tools to represent exact RGB color values.

Academy