CSS color variables

Our styling is done through CSS variables, all our our CSS variables can be found here.

Translating a Color on Figma to a CSS variable

Using Figma’s dev mode

Check our documentation on how to inspect Figma files as a Dev and get your CSS vars!

Manually translating a Figma color variable to a CSS variable

We use Style Dictionary to transform design tokens into CSS variables, during this process the token name gets translated to follow CSS best practices, below, you can find the process the name undergoes.

First, the slashes in the name are replaced by hyphens so, let’s say a figma color is named

                                                        
                                                        
                                                            foreground/container/high_emphasis
                                                        
                                                            

Style dictionary will transform those into

                                                        
                                                        
                                                            foreground-container-high_emphasis
                                                        
                                                            

Then the words in snake case will be transformed into camel case, so following our current example the output will be

                                                        
                                                        
                                                            foreground-container-highEmphasis
                                                        
                                                            

After that Style dictionary will add a prefix.

The prefix is composed of the gse acronym and the level of the token, we have 3 main token levels core, semantic, ui , figuring out to which level the token belongs is a little tricky, so we recommend testing with semantic first, since most of the colors accessible to designers are on that level.

So following the example above the final name of the variable would look something like this:

                                                        
                                                        
                                                            --gse-semantic-foreground-container-highEmphasis