Freebie

Frames X Color System: Best practices for colors in Figma

How to use Frames X open-source color palette for UI design

Intro

Frames X pallete is the best for scaling and customizable digital products. Included colors utilize current web content accessibility guidelines (WCAG 2.4.1) with post-processing of the APCA model, which are ideal for calculating perfect contrast balance for every available color.

In Frames X, each color group includes ten shades to display the full spectrum of UI-applicable colors powered by the latest Figma features.

Frames X pallete ensure consistent contrast within and between groups, with each color name corresponding to its saturation level.

This way, the palette allows colors to reflect elevation and hierarchy through the interface and be predictable when customized based on predifined 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.

Color system for Figma with precise color contrast ratio
✨ 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

Transitioning to Tailwind can be a seamless. 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.

Tips on working with UI colors

Frames X color pallete, besides being robust and accessible, aims to help you solve the most common design system scenarios, such as: updating your colors globally, sorting and naming your colors, using colors in multiple files, and sharing your colors with the team.

In all of these scenarios, proper communication is the key here. However, it's common to reshape, rename, and rearrange your colors throughout the project lifespan. So, the way you translate your decisions from design tool can become more crucial as your project grows.

πŸ“š Using colors from a team library

When starting a new project, you could add Frames X as your Team library and save yourself a massive amount of time manually adding colors or using third-party tools to generate them.

Using an extant color palette will allow you to quickly populate your new project with a broad and thoughtful range of colors. Note that the team library feature will require a proffesional Figma plan.

Is it worth it? Absolutely. A color or "brand" library will help you better settle and communicate your design decisions while staying consistent across prominent projects and organizations.

Also colors could become a separate library your team access without cracking your ongoing work, helping everyone be on the same page regarding the project/file they are working on.

🏷 Tag colors to find them faster

Tagging color variables is a great practice to speed up your overall workflow in Figma. This applies not only when working with variables but also with components and styles.

Tagging your colors will help you to quickly find the needed element in Figma menus by typing a special symbol or an included "tag" name.

Note: Frames X, by default, uses a '$' tag to prioritize the most frequently used colors used for primary purposes, such as text and active elements.

Design tip: tag colors to find them faster
πŸ”§ Working with the naming convention

Frames X uses literal or definitive color naming (like red, blue, etc.) and a numeric scale where 50 is light and 900 is darkest shade by default. While this is reasonably functional for most tasks, there are good reasons to use other naming conventions to communicate better on different projects and teams. You could also use semantic and contextual naming conventions instead.

With literal color naming, it's easier to adapt the color palette either to a semantic or contextual approach by renaming colors from "color" to "color-name" or "Color-primary' syntax.

A semantic naming convention uses names that describe the intent of the color ("Primary," "Secondary, "Danger," "Background," etc.). Semantic naming allows underlining the value of the color rather than using a combination of name and numeric scale, making it easy to modify the whole theme to any combination of colors we need. Other examples of Semantic names are Brand, Accent, Warning, Alert, and Success, to name a few more.

A contextual naming instead uses names that define a color for an exact type or category of component ("color-primary-button," "color-default-icon-small," "color-error-modal," etc.). Contextual naming is good when you have your design system in a final state, at that point where you don't add new things or components to the system. This way, you'll have your project at your fingertips.

Using the naming convention

Note: using contextual naming from the start instead could quickly overwhelm and mess up your design process with hundreds of definitions, making it challenging to find and use colors appropriately. And, because it is challenging to resist particular-defining every color, naming things from a contextual perspective will always grow exponentially. So apply it only if needed (usually for smaller projects from personal experience).

🌈 Understanding color models

We tend to feel comfortable with the HEX color model as designers. But HEX values are tough to read. It's unlikely you would be able to imagine the color of an element by reading the hex value, except if you are an expert designer.

HSL is another alternative and less known color model (hue, saturation, lightness). This model seems to be the far more intuitive way to adjust color values and is easier to understand, even from a non-tech perspective. HSL can be easily explained thoroughly. For example, we can get darker and lighter variants of the same color by adjusting the lightness parameter or a saturated color with saturation value, etc., which is a convenient way to interpret how our eyes perceive colors.

RGB is also well known and tends to have a better reputation among developers than HEX. So it may be a good idea to explain how to copy a CSS-friendly color code to your fellow developer friend.

Tip: In Figma, you can access the color code on the inspect tab. You could select the RGB color model from the Colors section dropdown. This will let you copy/paste this directly into a stylesheet or code editor without additional formatting hassle.

The advantage of HSL over RGB is that it is far more intuitive: you can guess at the colors you want and then tweak them. It is also easier to create pallets of matching colors by keeping their hue values the same and varying the lightness/darkness and saturation.

Thank you for the read!

If you enjoyed this, be sure to check out Frames X, our meticulously crafted UI kit and design system for Figma. Elevate your creative flow and unlock more innovative design solutions.

⟑

⟑

⟑

Frames X Color Variables β€” Freebie for Figma

Download Frames X color palette for free β€” Get started with a perfectly organized and accessible set of color variables as your brand foundation.