Surface palette is used when designing the layers such as headers, content, footers, overlays and dividers. Surface palette varies between 0 - 900 and named surfaces are also available.
| Variable | Description |
|---|---|
| --surface-ground | Base ground color. |
| --surface-section | Background color of a section on a ground surface. |
| --surface-card | Color of a surface used as a card. |
| --surface-overlay | Color of overlay surfaces. |
| --surface-border | Color of a divider. |
| --surface-hover | Color of an element in hover state. |