Surface commons supply shape and elevation. They do not set layout, padding, background, text color, border color, focus, or interaction state.
| Class | Structure |
|---|---|
surface-card |
rd:6x border-width:1 |
surface-panel |
rd:5x border-width:1 |
surface-popup |
rd:4x border-width:1 shadow:4x |
surface-overlay |
border-width:1 shadow:5x, without a radius |
<section class="surface-panel p:4 bg-color:neutral-100 border-color:neutral-500 text-color:neutral-950" aria-labelledby="surface-title">
<h2 id="surface-title" class="heading-4x font-weight:6x">Project settings</h2>
<p class="text-body">Shared structure with application-owned colors.</p>
</section>Choose surface-panel for shape alone or Card
when its header/body/footer arrangement fits the content. A popup-shaped
surface is not a working popover: the owner still supplies positioning,
visibility, keyboard behavior, and focus management.
Select role palettes centrally on html with data-css-neutral,
data-css-primary, and the other Standard role attributes. Read the
Official overview for the color boundary.
Check borders and focus against each surface in light, dark, and forced
colors; a box shadow alone is not a reliable forced-colors boundary.