--- prompt-id: "05" name: Pattern components — page-level patterns per archetype status: live mcp: none model: Sonnet 4.6 environment: Claude.ai or Claude Code inputs: - output/tokens.css - output/components/foundation.css - output/components/composite.css - specs/governance.spec.md - specs/.spec.md outputs: - output/components/patterns.css chains: [3, 9] prereqs: ["03", "04"] documented-in: Ch07 — Pattern Components --- # Prompt 05 — Pattern components Generates archetype-aware page patterns — repeatable compositions of foundation + composite components that encode "how things are laid out" for each archetype. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run before generating any CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Claude Code: save automatically to output/components/patterns.css Claude.ai: provide copy-paste instructions at save point. STEP -1 — CONTEXT CHECK output/tokens.css → REQUIRED output/components/foundation.css → REQUIRED output/components/composite.css → REQUIRED specs/governance.spec.md → REQUIRED specs/.spec.md → REQUIRED output/chain-state.md → read if present ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 05 — PATTERN COMPONENT CSS YOUR ROLE You are a design-system layout engineer. You produce patterns.css — layout-level compositions that encode the archetype's spatial logic. Patterns are not new primitives; they are named grid and flex arrangements that combine foundation + composite components into repeatable, ready-to-use page regions. Every pattern ships with archetype-specific variants. The same pattern name ("data-table-pattern") looks and behaves differently across Harbor, Sentinel, Current, Lattice, and Meridian. Read the archetype spec's LAYOUT, SPACING, and TYPOGRAPHY sections to derive these differences. PATTERN SET — generate all of these: 1. hero — above-the-fold opener 2. feature-row — text + media side by side 3. card-grid — responsive grid of content cards 4. data-table-pattern — table with filter bar + pagination 5. list-detail — left list + right detail panel 6. sidebar-layout — fixed sidebar + scrollable content 7. settings-layout — grouped settings sections 8. form-page — full-page form with progress 9. article-body — long-form reading layout 10. dashboard-grid — widget grid for data overviews 11. empty-page — zero-state full-page layout 12. error-page — 404 / 500 error page layout HERO (pattern 1) — SPECIFIC RULES — Centred or edge-to-edge depending on archetype: Harbor: full-width dark background, text left-aligned, large editorial headline Sentinel: white bg, left-aligned CTA block, chart/image right Current: full-viewport, centred, CTA below headline Lattice: terminal-style, monospace headline, code block right Meridian: max-width reading column, generous top padding — Responsive: stack to single column below --breakpoint-md FEATURE-ROW (pattern 2) — SPECIFIC RULES — Two-column flex: 50/50 or 60/40 split per archetype spec — Alternating layout variant: image flips sides on even rows — Gap: --spacing-xl or archetype equivalent — Mobile: stack, image first or last per archetype convention CARD-GRID (pattern 3) — SPECIFIC RULES — CSS grid, auto-fill columns, min-width from governance — Gap: --spacing-md — Load-more / pagination control at bottom — Filter bar above grid (uses foundation Input + Badge) DATA-TABLE-PATTERN (pattern 4) — SPECIFIC RULES — Filter bar: Input (search) + select dropdowns + Badge count — Bulk-action bar: appears when rows selected — Table: full-width, foundation table component — Pagination footer — Lattice variant: full-width, compact density, monospace — Sentinel variant: bordered, status badges in rows, no shadow LIST-DETAIL (pattern 5) — SPECIFIC RULES — Fixed-width list panel (280px or --sidebar-width token) — Detail panel fills remaining width, scrollable — Mobile: list and detail are full-width separate pages (annotate: toggle class controls which is visible) — Selected list item: --color-primary-subtle background SIDEBAR-LAYOUT (pattern 6) — SPECIFIC RULES — Fixed left sidebar + scrollable main content area — Sidebar width: --sidebar-width token — Collapsed state: icon-only sidebar (48px wide) — Mobile: sidebar becomes Drawer (composite component) SETTINGS-LAYOUT (pattern 7) — SPECIFIC RULES — Sidebar nav listing settings sections (left) — Main area: one section at a time, with heading + form groups — Section dividers: --color-border horizontal rules — Destructive actions (delete account) isolated at page bottom FORM-PAGE (pattern 8) — SPECIFIC RULES — Full-page centred form with max-width from governance — Top: Stepper showing progress through multi-step forms — Each step: form fieldset + CTA row (Back / Continue) — Final step: summary + Submit CTA — Inline error summary above the form on validation fail ARTICLE-BODY (pattern 9) — SPECIFIC RULES — Reading column: max-width --prose-width (68ch, per governance) — Centred in the viewport, generous top/bottom padding — Pull-quote variant: --font-size-xl, left border accent — Code block: full-width break-out (wider than prose column) — Meridian is the canonical archetype for this pattern DASHBOARD-GRID (pattern 10) — SPECIFIC RULES — CSS grid with named areas for widget placement — Widget: Card shell, fixed aspect-ratio or min-height token — Responsive: 4-col → 2-col → 1-col grid breakpoints — Drag-to-reorder annotated as JS responsibility — Lattice and Sentinel are the canonical archetypes EMPTY-PAGE (pattern 11) — SPECIFIC RULES — Full-viewport centred layout — Uses Empty state component at the centre — Optional illustration slot (SVG, archetype icon) — CTA below the empty state message ERROR-PAGE (pattern 12) — SPECIFIC RULES — Centred layout, error code large (--font-size-display) — Headline + subtext + Back to home CTA — No sidebar or nav chrome on error pages OUTPUT FORMAT /* ── 05 PATTERN COMPONENTS ────────────────────────────────── */ /* ── hero ───────────────────────────────────────────────────── */ ... One continuous CSS file. No HTML, no JS, no @import. All values must trace to tokens. Flag gaps in a comment block. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAVE INSTRUCTION Save as: output/components/patterns.css CHAIN-STATE LOG Append to output/chain-state.md: ## Prompt 05 — Pattern components Date: Archetype: Patterns generated: hero, feature-row, card-grid, data-table-pattern, list-detail, sidebar-layout, settings-layout, form-page, article-body, dashboard-grid, empty-page, error-page Output: output/components/patterns.css HANDOFF "Pattern components done. Next → Prompt 06 — Chrome (global header, navigation, sidebar, footer). Paste governance spec + archetype spec + all CSS files before running Prompt 06." ```