Frames X: Figma UI Color Palette

UI color palette for Figma

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

Our color pallete utilizes WCAG guidelines with post-processing of the APCA color model to calculate the ideal contrast. This color palette provides an extensive color library you can use as your Team library and project foundation.

Frames X UI color pallete ensures consistent contrast within and between colors. The color palette includes a thoughtful naming convention, with each color name corresponding to its saturation (amount of color) level.

Our color palette helps designers and developers by:

• Simplifying the color selection with a consistent naming convention that reflects color hierarchy.
• Ensuring a predictable contrast ratio for every UI element.
• Optimized dark mode color. More than just reversed light theme colors.

Predictable color contrast ratio

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

For example, For optimal UI accessibility, we recommend using 500-600 for primary active elements and 50-100 for backgrounds and text colors.

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 & Bootstrap compatible

Our UI color palette is fully compatible with Tailwind and Bootstrap. 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. You can learn more about best practices of using our UI color palettes from our blog.

---

Credits: framesxdesign.com

Licensed under CC BY 4.0