Design Site on Layer

The design site is the first consumer of the design system, but a sweep (2026-06-11) found it still hand-rolls recurring presentational patterns: left-border callouts (15+ uses), index card links (5 pages), code blocks, inline code (24+ uses), back links (12+ pages), filter button groups, read-only pills, and static doc tables. It also bypasses layer components that already exist (DataMetric for stat cards, Sentence* — which NotificationRuleCard duplicates with inline render functions, UxSimpleSelect). Per the unified pantry rule, these patterns belong in the layer; the site should consume them.

Add 8 primitives to the layer, move the PatternCard doc scaffold to the dev group, and migrate every design-site call site — so that grep finds zero hand-rolled presentational markup outside _demos, and local components are limited to site chrome and data-wired logic (~16 files, down from 30).

Layer (q-nuxt-layer):

• New: prose/Callout.vue, ux/CardLink.vue, ux/CodeBlock.vue, ux/Code.vue, ux/BackLink.vue, ux/Pill.vue, ux/FilterGroup.vue, ux/Table.vue
• Moved: dev/PatternCard.vue (from design's app/components/PatternCard.vue)
• Release 0.6.0 at the end (additive minor)

Design site:

• Migrate call sites across app/pages/ (brand, layer, method, philosophy, visualization, history, archive, timeline, coverage, index pages)
• Refactor NotificationRuleCard onto Sentence*, TimelineFilters onto UxSimpleSelect/UxFilterGroup, stat cards onto DataMetric*
• Delete patterns/CodeBlock.vue; rename PatternCard usages to DevPatternCard
• Document all new components (demos + registry + coverage fields)

Out: _demos/ markup, sectioned link grid (document as pattern), moving patterns/* compositions, bulk h2+p heading migration.

Full phase-by-phase detail: execution-plan.md

Layer (q-nuxt-layer):

• Added 10 components: ProseCallout (tone/tag), UxCardLink (optional to → static card), UxCodeBlock (label/collapsible/dark+light themes — absorbed design's CodeBlock.vue), UxCode (0.9em inline, warn tone), UxBackLink, UxPill (grape/leaf/grey/warn), UxFilterGroup (single/multiple/required, grape/leaf/dark), UxTable (line/band variants, semantic tokens), UxSelect (bordered form select), DataMetric_Card (bordered stat card layout)
• Moved design's PatternCard → dev/PatternCard.vue (DevPatternCard), refactored onto UxCodeBlock
• ProseSectionHeadline gained size: 'display' | 'doc' prop (doc = text-28 font-semi scale)
• CLAUDE.md catalog updated

Design site:

• Migrated all call sites: 17 callouts, 8 card links, 16 back links, 73 inline code spans, 10 code blocks, 10 tables (incl. the component detail page's props/emits/slots tables), archive filters + pills
• Adoption pass: NotificationRuleCard now uses the layer Sentence* family (deleted its 4 inline h() duplicates), TimelineFilters uses UxSelect, timeline/coverage stat cards use DataMetric_Card/DataMetricValue+Label, ArchiveArtifactDetail/TimelineInspector badges use UxPill
• Deleted app/components/PatternCard.vue and app/components/patterns/CodeBlock.vue; renamed 18 PatternCard usages to DevPatternCard
• Documented all 11 new components: demos in _demos/, registry entries with coverage fields

Known remnants (intentional):

• designs/index.vue <pre v-html> — ANSI art renderer, not a code block
• ArchiveArtifactDetail grey back link — different tone than UxBackLink; candidate for a tone prop later
• Small bordered buttons in timeline components ("Clear filters", inspector links) — a "small button" layer gap, noted for a future cycle
• archive/index.vue _shadow-box card — image-card pattern, out of scope
• TimelineOverview micro-pills — canvas-presentation-tuned

Eleven presentational primitives shipped to q-nuxt-layer (ProseCallout, UxCardLink, UxCodeBlock, UxCode, UxBackLink, UxPill, UxFilterGroup, UxTable, UxSelect, DataMetric_Card, plus DevPatternCard moved from the design site), with every design-site call site migrated — 17 callouts, 8 card links, 16 back links, 73 inline code spans, 10 code blocks, 10 tables — and an adoption pass onto the Sentence* family, UxSelect, and DataMetric_Card. All components documented with demos, registry entries, and coverage fields; intentional remnants (ANSI art renderer, grey back link, small bordered buttons) recorded for future cycles. The once-pending 0.6.0 layer release long since shipped (layer at 0.9.x).

• Layer release 0.6.0 (/release-layer) + consumer package.json updates — awaiting review
• Opportunistic h2+p → ProseSectionHeadline size="doc" migration as pages are touched