UI design system

Identity and layout

The publication uses an off-white light background (#F8FAFC) and charcoal dark background (#0B1220). Surfaces are white / #111827; primary text is #0F172A / #E5E7EB; muted text is #475569 / #CBD5E1; borders are #E2E8F0 / #334155. The sole accent family is teal (#0F766E light, #5EEAD4 dark). Status text supplements color. No third-party fonts or visual evidence generation are used.

System typography is 17px for desktop prose with line height 1.78. Reading width is approximately 49rem; navigation and page contents frame long articles. Spacing follows 4/8/12/16/24/32/48/64px increments. Cards use 8–12px corners and quiet borders. Only the release model adds a subtle shadow. Code uses monospace identifiers and labeled copy controls supplied by Expressive Code.

Homepage

The Hero override uses a two-column desktop layout: release question and primary routes on the left, a four-stage decision model on the right. It collapses to a continuous single-column mobile page. Source → publication → delivery → verification → evidence appears beneath the hero. Three reading routes and two dated case cards connect the question to deeper articles. Historical status is always dated and described as recorded.

Articles and diagrams

Starlight provides one H1, left sidebar and right table of contents on wider screens. A mobile menu and compact contents replace these at smaller widths. Article paragraphs remain continuous rather than individually card-wrapped. Tables and code scroll internally; identifiers wrap. Heading targets use header-aware scroll padding. Previous/next and related-reading links provide paths through the publication.

Static SVGs use dark text on a neutral light canvas in both themes. Every diagram has a descriptive title/description and nearby prose. It remains readable at a mobile width because its source uses stacked steps rather than dense wide diagrams. Direct SVG links support enlargement without JavaScript. Diagrams are source-derived explanations, never live telemetry.

Maintainer and related projects

The static ProjectFooter override preserves Starlight’s default footer, then adds a maintainer block and a labeled related-project navigation landmark. It names Satyam Agnihotri (devSatym) with the owner-published headline “DevOps & Cloud Engineer,” as recorded in the pinned handbook author metadata. It links the public GitHub/LinkedIn profiles and Resilience Gate implementation source.

Related navigation links the available GCP Security Architecture Handbook and the public Azure AKS GitOps Observability source. It makes no availability claim for the planned portfolio or AKS documentation hostname. Link groups wrap on small screens, inherit theme/focus styles, and work without JavaScript. The block adds no images and is excluded from Pagefind with data-pagefind-ignore.

This footer was added after the 6acf0b first-publication checkpoint. That earlier hosted pass does not verify the new component; its later build and publication require separate receipts.

Evidence and outcomes

Evidence category and observed outcome are independent fields. EvidenceCard prints both, along with window and scope. Unknown result is unavailable. Gallery cards do not infer success: configuration snapshots, historical dashboard windows and raw scorecard outcomes have different evidential roles. The normalized view model preserves all source metadata while adding derivative/original locations and derivative hashes.

Gallery filters use two labeled native selects and a reset button. The live count and no-match message provide feedback. With JavaScript absent filters remain hidden and all captures/original links remain useful. Image enlargement uses native dialog.showModal(), Escape, a visible close button, a direct original link and focus restoration.

Accessibility and interaction contract

Landmarks, skip link, accessible controls and theme persistence come from supported Starlight components. Project controls have visible focus outlines, text labels and keyboard behavior. Initial theme follows the system; reader selection persists. Reduced-motion preference disables project motion. Links wrap rather than causing viewport overflow. The gallery never requires hover to expose metadata.

The initial monorepo audits covered representative widths of 360, 390, 768, 1280 and 1536px, dark/light themes, navigation, dialog focus and search. They remain under migration-evidence/monorepo-audit/; repository-separation checks remain under docs/website/audit/migration/. The earlier Workers checks remain under docs/website/audit/cloudflare/; current Pages root-base/local-asset and hosted checks have separate receipts under docs/website/audit/cloudflare-pages/. Hosting changes preserve this reader interaction contract; earlier scans do not certify a new served build. Axe results are a measured sample, not a conformance certificate. Read the audit report for observed findings and exact coverage.