Pattern workbench

Experimental Stack Surface

experimental-stack-surface · v0.1.0 · experimental

DRAFTExploratory and unstable. Useful for proving the platform, not for product reuse.

Viewport

Theme

Density

No selectable implementation variants.

Compare

Viewport wide · theme default · density comfortable

Preview · 1280px wide

Primary · 1280×520px · default · comfortable

DRAFT · experimental proof

DRAFT composition proof. Not a production pattern.

This demo exists so the workbench can load a second registry record. Do not treat it as CANONICAL.

Phase 1 composition proof that stacks content inside a surface. Not a production pattern.

Use when

Building a real C2C product interface
Treating this record as canonical or as a substitute for editor-sidebar, asset-picker, or other roadmap patterns

Narrow: Single column below the `md` breakpoint (768px). Action remains in normal flow.

Medium: Same composition from `md` to `lg`. No multi-column split.

Wide: Same composition from `lg` upward. This proof does not grow a desktop-only layout.

Roles: region, heading, button

Labeling: The surface region is labelled by the visible title.

Contrast: Foreground, muted, and primary colors resolve through foundation tokens.

Reduced motion: Button hover transitions consume motion tokens that collapse to 0ms under prefers-reduced-motion.