Surface

Overview

A themed container that publishes its tone to descendant components through Svelte context.

<script lang="ts">
  import Surface from '@lostgradient/cinder/surface';
</script>

<Surface>Content</Surface>

Live preview

Default

Standard content surface.

Raised

Elevated surface for overlays and panels.

Inset

Quiet container for nested content.

Use when

Wrapping a region in a consistent background tone such as default, raised, or sunken.
Letting nested components adapt their styling based on the surrounding surface tone.

Avoid when

Building a self-contained content card with padding and elevation — use card instead.
Standing up a full page scaffold with header and actions — use a hand-rolled page scaffold instead.

Tone variants for framed interface regions.

Props for surface
Name	Type	Default	Description
`tone`	`'default' \| 'raised' \| 'inset' \| 'transparent'`	`'default'`
`children`	`snippet`		Content rendered inside the surface container.