26 lines
1.5 KiB
Markdown
26 lines
1.5 KiB
Markdown
# 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.
|