--- prompt-id: "06" name: Chrome — global header, nav, sidebar, footer, skip links 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/chrome.css chains: [3, 9] prereqs: ["03", "04"] documented-in: Ch08 — Chrome --- # Prompt 06 — Chrome Generates the chrome layer — the persistent structural shell that wraps every page: global header, top navigation, sidebar nav, breadcrumbs, footer, and accessibility skip links. --- ``` ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-HEADER — run before generating any CSS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ STEP -2 — DETECT ENVIRONMENT Claude Code: save automatically to output/components/chrome.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 (Drawer, Popover used inside chrome) specs/governance.spec.md → REQUIRED specs/.spec.md → REQUIRED output/chain-state.md → read if present ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ MAIN PROMPT BODY ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PROMPT 06 — CHROME CSS YOUR ROLE You are building the persistent shell of the UI — the chrome layer. Chrome sits above all other components in z-index and spatial prominence. It must be cohesive with the archetype but never compete with page content. CHROME COMPONENT SET 1. Skip nav — accessibility first, visually hidden until focused 2. Top bar — horizontal bar at top; contains logo slot, nav links, and action cluster 3. Primary nav — top-level navigation items 4. Dropdown nav — mega-menu or simple dropdown from primary nav 5. Sidebar nav — vertical nav tree for app layouts 6. Breadcrumb — current location trail 7. Page header — title + meta row below top bar 8. Footer — global footer with links + legal SKIP NAV — SPECIFIC RULES — position:absolute, moved to top-left when :focus-within — High z-index (--z-overlay or higher) — High contrast background: --color-cta-bg / --color-cta-text — Targets: #main-content and #main-nav TOP BAR — SPECIFIC RULES — position:fixed top:0 left:0 right:0 — Height: 56px (or governance CHROME height token) — z-index: --z-topbar token — Background and border-bottom depend on archetype: Harbor: dark surface (--color-surface-raised), 1px border-bottom in subtle teal Sentinel: white bg, strong 1px border-bottom Current: white bg, no border, subtle shadow Lattice: near-black bg, 1px border-bottom (--color-border) Meridian: white bg, no border, generous height (64px) — Logo slot: left-aligned, max-height 32px — Nav items: horizontal list, right of logo — Action cluster: right-aligned (avatar, notifications, CTA) — Mobile: hide nav items, show hamburger trigger (Drawer) PRIMARY NAV — SPECIFIC RULES — Horizontal list of top-level items inside the top bar — Active item: --color-primary underline (2px) or bg — Hover: --color-surface-hover — Keyboard: arrow keys move focus between items (annotate: requires roving tabIndex, JS responsibility) DROPDOWN NAV — SPECIFIC RULES — Triggered by hover (desktop) or click (mobile/touch) — Uses Popover shell from composite.css — Columns: 1-col simple list or 2-3 col mega-menu (mega-menu variant annotated for data-density archetypes) — Dismiss on Escape, click-outside, or focus-out SIDEBAR NAV — SPECIFIC RULES — position:fixed left:0 top:[top-bar-height] bottom:0 — Width: --sidebar-width token — Sections: expandable groups with chevron — Active item: left border accent (--color-primary), bg: --color-surface-hover — Collapsed state: icon-only, 48px width, tooltip on hover — Mobile: becomes Drawer (off-canvas, slide-in left) — Lattice variant: full-height terminal sidebar, monospace labels, green active indicator BREADCRUMB — SPECIFIC RULES — Horizontal list with separator (/ or chevron icon) — Current page: not a link, --color-text-primary — Ancestor links: --color-text-secondary, underline on hover — Overflow: truncate in the middle with ellipsis for deep paths — Mobile: show only parent + current page PAGE HEADER — SPECIFIC RULES — Below top bar, above page content — Contains: page title (--font-size-xl or heading token), optional subtitle, optional action buttons (right-aligned) — Background: same as top bar or transparent (archetype choice) — Border-bottom: --color-border (for Sentinel; none for Harbor) FOOTER — SPECIFIC RULES — position: static (not fixed — scrolls with page) — Background: --color-surface-raised or archetype dark floor — Columns: logo + tagline, nav links, social/legal — Legal line: --font-size-xs, --color-text-tertiary — Mobile: stack columns, links as full-width rows ARCHETYPE SUMMARY Harbor: dark top bar; teal nav-active indicator; large logo Sentinel: white top bar; orange CTA button in action cluster; bold borders throughout Current: bottom nav bar instead of sidebar (mobile-first); top bar clean white; tabs as primary nav Lattice: dark full-height sidebar; monospace everything; green active state Meridian: minimal top bar; no sidebar; breadcrumb + page header carry the orientation weight; generous padding OUTPUT FORMAT /* ── 06 CHROME ──────────────────────────────────────────────── */ /* ── Skip nav ───────────────────────────────────────────────── */ ... One continuous CSS file. All values via tokens. Flag gaps. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ META-FOOTER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SAVE INSTRUCTION Save as: output/components/chrome.css CHAIN-STATE LOG Append to output/chain-state.md: ## Prompt 06 — Chrome Date: Archetype: Components: skip nav, top bar, primary nav, dropdown nav, sidebar nav, breadcrumb, page header, footer Output: output/components/chrome.css HANDOFF "Chrome done. Next → Prompt 07 — Domain components (your product-specific, net-new components). You'll describe each domain component in 2 sentences before running Prompt 07." ```