Skip to main content

Hi there! I’m starting a new project using Figma’s Simple Design System (SDS) and have a question about the color primitives. Under "Foundations," I noticed there are two types of gray primitives: Gray and Slate. These link to semantic tokens but in slightly different ways.

I’m also curious about the distinction between Default/Base and Neutral tokens in the Color Variables (e.g., for Background, Text, Icon, etc.). Could someone clarify the differences and share best practices for using these various "grays"? Thanks in advance!

Hey Sammie, usually in color palettes like this there are a few different gray options, and they have what you might call different personalities, which might be more or less obvious depending on the type of display you have and how it’s calibrated. Typically “gray” would be something like a true neutral gray, meaning that they are completely desaturated (devoid of color). And then the slate grays are usually cooler, meaning they are infused with a very small amount of blue. Which one you use depends completely on your design intent. Desaturated grays are sometimes useful because they are guaranteed to work with any color scheme you might use in your designs. Cool grays like slate have a different personality that is a little “softer” so if you’re designing something where you have control over the brand and colors being used, slate can be a good option to create that cooler feel. Sometimes neutral grays feel dull or lifeless but it all depends on the brand and how you’re using color in general.


Reply