Colors

Color is at the foundation of every visual system. Colors allow us to differentiate design elements, understand what’s important, and how content can be interpreted and consumed. 

When choosing and combining colors, one should consider different screens, lighting conditions, color perception, and color contrast. Frames X includes 26 professionally crafted palettes you can combine lay for your design system or branding foundation.

Color Palette Core Features

• Build custom light/dark themes that adapt to any project - no more guesswork;

• Preview color changes and check accessibility before implementation;

• Standardize color naming and usage across your team.

Frames X color palette provides a full spectrum of UI colors to your design system advantage. However, only a few palettes are often required to build your project. These include:

1. Neutral colors (Base) that reflect the hierarchy of elements and convey the content's importance based on the amount of 'fill' applied to an element.

2. State colors translate crucial brand-interface information, such as Active, Danger, or Success states.

3. Text colors. The text color group is minimal and includes three levels of importance: Primary, Secondary, and Tertiary.

More Resources on Frames X Color Palette

• Comprehensive Guide on UI Colors Palettes - In-depth guide on working with colors in Figma;

• Intro Guide to Figma Variables - Learn how to use variables in Figma.