toolbox

Start here

Wrap any content region in .stage and it paints a surface. This is the tool you reach for whenever a region needs a background — cards, panels, sections, the page body itself.

The metaphor is theater. Stages stack toward the audience: a stage nested inside another sits one step forward, painted slightly brighter. You don't manage this — the system reads the nesting and assigns depth for you.

Depth cascades

Nest stages and each one steps forward. No depth values to set — the system infers them from the nesting.

<div class="stage">
  <div class="stage">
    <div class="stage">
      <div class="stage">leaf — brightest</div>
    </div>
  </div>
</div>

Each nested stage paints brighter than its parent. The deepest stage is closest to the reader. Toggle the theme — the ramp holds in both light and dark.

Pinning a depth

Use .stage-0 through .stage-3 when you need a specific depth regardless of where the element sits. Pinned stages stay out of the auto-cascade.

<div class="stage-2">pinned, always depth 2</div>

Use pinned stages for cards in a grid that should look identical regardless of context, or for overlays and legends. Pick one mode per region — mixing auto-cascade and pinned stages in the same subtree gives inconsistent results.

Glass

Add .glass to any stage to make it translucent. The surface paints at reduced opacity and a backdrop blur kicks in.

<div class="stage glass">translucent</div>

Use for sticky chrome over scrolling content, drawers over the page, modal overlays — anywhere the surface should be present but not block what's behind it. Tune transparency per instance with --cfg-color-alpha.