You are extending kirupa.com, not replacing its design. Keep the shared header/footer and main navigation unchanged. Include the actual head.shtml, header.shtml, and footer.shtml at request time, retaining native chat, search, theme controls, and optional link sounds on the outer page. Treat this as a tutorial section: native title typography, prose, a Design System left-nav item, and Filed under metadata. Keep sections on separate pages with previous/next links and a compact index. Do not add an orange hero. Read head.shtml and kirupa.css in ssi/newDesign/src/. Reuse semantic custom properties, font roles, and source spacing, including style overrides. Keep display, body, code, and utility typography distinct. Choose foreground/background pairs by purpose. Fetch tokens.json only for exact declarations.

Follow WCAG 2.2 AA for new or changed content: semantic HTML, keyboard access, visible focus, readable contrast in every theme, text alternatives, labeled controls, and explicit errors. Support zoom/reflow, respect reduced motion, and keep sound optional. Read /design/sections/accessibility.md for acceptance checks. Report unresolved barriers; automated checks alone do not establish conformance.