The study of how colors interact, combine, and influence perception, guiding designers in creating harmonious palettes that evoke specific emotions. Understanding complementary, analogous, and triadic color relationships helps create visually balanced designs. Apply color theory to establish brand moods and guide user attention to key elements.

A visual collage of images, colors, typography, and textures capturing the intended look and feel of a project. Mood boards align stakeholders on aesthetic direction before detailed design begins. Create mood boards to explore and communicate design concepts efficiently.

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.

Adjusting element positions based on visual perception rather than mathematical precision, making designs feel balanced. Optical alignment acknowledges that geometric centering doesn't always look centered to human eyes. Fine-tune alignments manually when mathematical precision creates visual imbalance.

Analogous Colors are color combinations made from adjacent hues on the color wheel, often used to create cohesive and low-contrast visual systems.

Framer selection colors let teams align the small details of browser interaction with the site’s visual system, reinforcing brand polish even in native behaviors.

In Framer, squircle corner styling can make cards, buttons, and panels feel more refined by blending geometric structure with a softer edge profile.