Having some trouble understanding surfaces from the design documentation

[saundersbd]

Hello, I'm a designer who was inspired by the recent release of Polaris 12 and all of the new documentation supporting it. I wanted to ask for clarification on the concept of surfaces as they are described in the design documentation. If there's a better place to ask this please let me know!

I'm not unfamiliar with the concept of surfaces in general as I've seen it used in other design systems. However in the layout section of the new design documentation I found myself confused as to what exactly a surface is in Polaris. In my head it conflicts a little with the concept of how to use color, or backgrounds as they are described in other Polaris docs, and certain components as well. For example, I can't tell if a Card component is a surface in and of itself, or if a card component HAS a surface, or what exactly the relationship is there. This diagram shows that a card is separate from a surface but then the supporting text says that a card is also a surface itself.

I feel confident that if you pointed to any UI element and asked me "is this a surface" I could answer correctly, but I'm still finding it hard to define surfaces in words, if that makes sense. So I'm hoping for more info on how to think about this concept and would appreciate some perspective. If it's a code distinction feel free to point me to any examples, as well. Thanks!

[heyjoethomas]

Hey Brian. Great question. Surfaces are things that the rest of the UI is built on top of. So the most foundational surface is the application background because everything in the admin is build on top of it. Cards are also surfaces for the same reason. Almost all of the Admin is built on top of Cards. Things are built on top of surfaces.

I hope this clarifies things. If you have further questions don't hesitate to reach out again.