1.5 KiB
Surface System
Use surface-* variables to describe UI elevation and separation. The scale is ordered from the page base up through stronger raised surfaces and strokes.
Layers
| Token | Use |
|---|---|
surface-1 |
Page background. |
surface-2 |
Default raised surfaces, table rows, and standard card backgrounds. |
surface-3 |
Header bands, inputs, dropdown surfaces, and card hover states. |
surface-4 |
Standard strokes and outlines, including table outlines. |
surface-5 |
Strong strokes for surfaces that need extra separation. |
Strokes
Use surface-4 for normal outlines and dividers. Tables should use surface-4 for their outer border and row separators.
Reserve surface-5 for stronger outlines, such as modal frames, high-emphasis separators, or hover states on elements that already sit on surface-4.
Backgrounds
Use surface-1 for page backgrounds and surface-2 for ordinary raised content. Use surface-3 for header strips, inputs, and temporary elevation such as hover states. Use surface-4 sparingly as a stronger raised background, usually for controls or badges that need to sit above nearby content.
Avoid using legacy aliased background variables for new UI. Prefer explicit bg-surface-* and border-surface-* utilities so the layer intent is visible in the component.