---
name: meta-surfaces
load-when: composing an operator-facing inspection surface — a gen-UI gallery, eval browser, audit/drift dashboard, dogfood harness
load-size: ~0.6k tokens
required-for: [screen-composition — meta/introspection path]
---

# Meta / introspection surfaces — pages that inspect the system

A distinct pattern class from product screens: the page's purpose is *inspecting the
system's own output* (galleries, eval browsers, audit reports, harnesses), not completing a
user task. Document-like, dense, information-first, no decorative chrome. Product-screen
recipes (cards, shells) actively mislead here — six rules replace them:

1. **No nested card chrome.** Card chrome means "standalone surfaced thing"; in an inspection
   page the hierarchy is the document's headings. A prompt block wrapped in a card wrapping an
   output card is the signature failure — use flat sections.
2. **Headings as section breaks, not card headers.** `h2`/`h3` (+ an inline count
   `<badge-ui size="sm">`) label groups and items. Card headers are for interactive chrome that
   needs the slot vocabulary; a static label is just a heading.
3. **`<code>` for literal values.** Prompt strings, output IDs, version tags, selectors —
   anything read verbatim or copied — set in the mono/code font stack, never the proportional
   family.
4. **Tab bars flush to content.** Engine/view-mode tabs sit directly above their output,
   separated by a 1px border only — no padded wrapper, no background card, no radius. Active
   tab = underline + the accent/primary role token.
5. **Inset, not card, for output areas.** Containment via subtle-background (`--a-bg-subtle`) +
   subtle-border (`--a-border-subtle`) + medium radius + inner padding, with `max-height` +
   scroll for tall output. That is the whole treatment — no `<card-ui>`.
6. **Two-column inspection layout.** A narrow sticky rail of *explicitly curated* anchor links
   (with counts) left — not `<toc-ui>`, which auto-scans headings — and generously padded
   scrollable content right.

Token names beyond the two cited follow the current semantic layer (`component-model.md`) —
the legacy accent aliases (`--a-accent-*`) were removed in the 2026-07 Material token
adoption; use role tokens, never remembered names.