Design Tokens
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
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.
Dark mode
Design
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.