Frames X Color Variables Palette

Frames X UI Color Variables Palette

This Figma file provides a consistent and balanced palette for designing user interfaces with color variables.

Frames X color variables utilize current web content accessibility guidelines (WCAG 2.4.1) with post-processing of the APCA model to calculate the ideal contrast based on every available shade in the color group. In Frames X, each color group includes ten shades to display the full spectrum of UI-applicable colors.

Frames X UI pallete ensures consistent contrast within and between groups, with each color name corresponding to its saturation level. This way, the pallete allows colors to reflect elevation and hierarchy through the interface and be predictable when customized based on preset ratios.

Features

Precise color contrast ratio

When utilizing Frames X, you can expect a similar or nearly equal contrast between foreground and background elements when using shades from the same saturation range. This allows you to confidently and efficiently set your primary and brand colors.

Tip: We recommend using a range of 500-600 for primary active elements and 50-100 for backgrounds and text colors for optimal UI accessibility.

Optimized dark mode

Frames X's dark mode uses a less saturated color palette to maintain accessibility and increase eye comfort in a dim environment. The palette communicates hierarchy using desaturated fill colors instead of just reversing the values from light mode.

Tip: You can switch between color modes anytime by selecting elements with color variables applied. Use the control in the right sidebar on the Layer panel to switch modes.

Tailwind compatible

The Frames X palette is fully compatible with Tailwind. It shares the same number of color steps, saturation levels, and naming conventions as the Tailwind palette, so transitioning to Tailwind can be seamless when using Frames X colors.

---

Credits: framesxdesign.com

Licensed under CC BY 4.0