---
name: shell-simple
load-when: authoring a simple-shell — marketing / error / landing / auth page (minimal centered chrome)
load-size: ~0.8k tokens
required-for: [shell-selection — simple path]
---

# simple-shell — minimal centered chrome

The lightest shell from `@adia-ai/web-modules` — for marketing, landing, error (404/500/maintenance), thank-you, and auth pages. Register: `import '@adia-ai/web-modules/simple'` (simple is its own cluster barrel — the `/shell` barrel does not register it). Behavior-only host + two CSS-only children. (Claims re-verified against the kit's live source 2026-08-26; re-verify on a MINOR cut.)

## Cluster roster

`<simple-shell>` (host) · `<simple-hero>` (the focal block — `slot="heading"` / `slot="lede"` / `slot="actions"`) · `<simple-content>` (supporting content below).

## Canonical skeleton

```html
<simple-shell centered full-bleed>
  <simple-hero>
    <h1 slot="heading">Welcome</h1>
    <p slot="lede">Get started in seconds.</p>
    <div slot="actions"><button-ui variant="primary">Sign up</button-ui></div>
  </simple-hero>
  <simple-content><p>Additional content.</p></simple-content>
</simple-shell>
```

## Props

`centered` (vertically center the hero) · `full-bleed` (edge-to-edge background). No events — it's pure chrome; you author the content.

## Gotchas

- Controls inside are `*-ui` (`button-ui`, `link-ui`), not raw `<button>`/`<a>` (`adia-lint` `NATIVE-PRIMITIVE`).
- For an error page, a page-DUO (no `.contents.js`) is usually right — see `project-shapes.md`.
- **Where the message goes on a status page:** an `<alert-ui>` carries the full message when the user is a *passive* recipient (session expired, account locked); the header `text-ui` carries it when the user is *actively* confirming something they initiated — the alert then only supplements.
- **Prose/marketing header:** the centered pattern is a `<col-ui>` inside `<header>` with kicker + display heading + deck — not ad-hoc heading stacks.
- Reach for this canonical shell before hand-rolling centered chrome: a new auth/status/maintenance surface (centered card, brand mark, heading, content) composes `simple-shell` + `<card-ui raw>` — authoring a parallel bespoke shell is how a 100+-line stylesheet earns a 40-line replacement (`simple-shell.css`).

Real usage: `apps/errors/`, `apps/user-flow/` (auth).