Elevation & Depth

Spark elevation determines how elements of the UI stack on top of each other.

Box Shadow

CSS box-shadow variables

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

Translating the Shadow effects on Figma to CSS variables

Using Figma’s dev mode

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

Inspecting Figma Styles as a Dev

Manually translating a Figma shadow style 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 shadow is named


                                                        
                                                        
                                                            shadow/2_side_panel

Style dictionary will transform those into


                                                        
                                                        
                                                            shadow-2_side_panel

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


                                                        
                                                        
                                                            shadow-2SidePanel

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, most of the shadow styles 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-shadow-2SidePanel

Identifying deprecated shadow styles

Our deprecated shadow styles will include “container” in the name.
Below, you can find some examples:
--gse-semantic-container-lg-boxShadow-offSetX

--gse-semantic-container-sm-boxShadow-offsetY

--gse-semantic-container-md-boxShadow-blur

--gse-semantic-container-lg-boxShadow-spread

--gse-semantic-container-md-boxShadow-color

--gse-semantic-container-sm-boxShadow-type

Updating the deprecated shadow CSS variables

Below you’ll find a table with the deprecated shadow styles and our recommendation on which new styles you should use instead.
The table below covers semantic-level variables, since UI-level variables will update their value automatically with [LIBRARY VERSION].
As mentioned, these recommendations may not entirely match your specific use case. If you want to know more about the new shadow styles, please take a look at our elevation documentation.

Deprecated var	Recommended new var
--gse-semantic-container-lg-boxShadow-*	--gse-semantic-shadows-5Modal-*
--gse-semantic-container-md-boxShadow-*	--gse-semantic-shadows-6FloatingMenu-*
--gse-semantic-container-sm-boxShadow-*	--gse-semantic-shadows-1Card-default-*

Z-Index

Learn more about our elevation hierarchy here.

Below, you’ll find our Z index variables available:

Variable	Value
--gse-semantic-elevation-0Page The base token for elevation.	0
--gse-semantic-elevation-1Card The recommended z-index for cards.	1
--gse-semantic-elevation-2SidePanel The recommended z-index for side panels.	100
--gse-semantic-elevation-3GlobalNavigation The recommended z-index for global navigation.	200
--gse-semantic-elevation-4Copilot The recommended z-index for the copilot panel.	300
--gse-semantic-elevation-5Shroud The recommended z-index for shrouds.	400
--gse-semantic-elevation-6Modal The recommended z-index for modals.	401
--gse-semantic-elevation-7Menu The recommended z-index for menus, like dropdown menus or popovers.	500
--gse-semantic-elevation-8DraggedItem The recommended z-index for items that the user is currently dragging.	600
--gse-semantic-elevation-9Toast The recommended z-index for toasts.	700
--gse-semantic-elevation-10Tooltip The recommended z-index for tooltips.	800

Something looks broken on this site?

Report it to the Design System team here!