#>design
component anatomy html constraints

Component Options / Dom Structure

Universal Slots

Most pieces of UI in Spwashi are a variation of the .frame-card or .spw-panel structure. Instead of authoring arbitrary wrappers, we use a predictable slot anatomy.

Papergami layout apparatus showing anatomical component slot hierarchy and apertures.

For producers and directors tuning visual style: The same slot contract used in rendered character/profile cards (header → meta → body → figure → actions → footer) is the grammar you tune in palettes, components, and materials. When a card from the character builder is used as a style packet in the Midjourney bench, its rendered slots become the testable surface for material, light, and rhythm decisions. This is the ergonomic loop: edit card → see rendered output → tune slots/palettes → send packet → iterate images with coherence.

metadata

Show, and every operator chip and allocated slot on the site, including this page, names its token in place. Hide to read again. The diagram is the same contract drawn once.

The universal slot stack of a frame or panel A card outline containing six stacked bands labeled header, meta, figure, body, actions, and footer. Header and meta are thin bands at the top; figure and body are the tall middle; actions and footer are thin bands at the bottom. A bracket on the right names the order: identity first, evidence and prose in the middle, exits last. [data-spw-slot="header"] [data-spw-slot="meta"] [data-spw-slot="figure"] [data-spw-slot="body"] [data-spw-slot="actions"] [data-spw-slot="footer"] identity before interaction evidence, then prose exits and traces last
Order is the contract: a slot may be empty, but it may not move.

[data-spw-slot="header"]

Used for the component's identifying marker, sigil, title, or top-level pill row. It anchors the component and provides identity before interaction.

[data-spw-slot="meta"]

For secondary information directly beneath the header—timestamps, provenance hints, and contextual breadcrumbs.

[data-spw-slot="figure"]

The primary visual container, whether for a raster image study or a runtime SVG rendering surface.

[data-spw-slot="body"]

The container for prose, lists, and structurally dense readable content. Handled by a max-inline-size measure.

[data-spw-slot="actions"]

Holds operator chips, buttons, and outbound links, usually sitting at the bottom boundary before references.

[data-spw-slot="footer"]

For terminal metadata, reference traces, or system-level output.