Elevation
Light mode
Sunken
Default
Raised
Dark mode
Sunken
Default
Raised
Surfaces that sit closer to the user should feel closer. Meteor handles this with elevation tokens that map directly to layers in the visual stack, rather than arbitrary background colors. Using them consistently keeps surfaces related correctly across both light and dark mode without any extra work.
Surface tokens
Three tokens cover the vast majority of UI surfaces:
Do
Use elevation surface tokens for large scale app surfaces to include the correct elevation system with theming.
Don't
Use background colors and hard coded values for large scale surfaces.