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.

A predefined variation of a component representing different states, themes, or configurations. Variants keep related options organized and enable smooth transitions between states. Framer's variant system supports complex interactive components.

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.

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

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.