# Layouts ## Agent Instructions You are choosing or extending a kirupa.com page layout. Read /design/layouts.json and the relevant record in /design/sections/layouts.md. Reuse its real source page, regions, navigation, shared includes, and responsive rules; subject or color changes do not create a new layout family. Current articles use the native tutorial shell. Specialized tools and spatial applications have separate requirements. Archived content may use the current shell; legacy shells and the Discourse/Substack companion sites are explicitly labeled and are not new-page templates. Screenshots are fixed captures with recorded appearance, viewport, date, URL, and scroll state. Never pretend to restyle them with CSS filters. Keep capture selection local and preserve full-size image access. Update design/layouts.source.json, run tools/capture_design_layouts.mjs for changed capture definitions, then build the design system. Do not submit forms, quiz answers, chat messages, subscriptions, or plot claims during capture, and never capture private account or visitor data. Deployment requires separate authorization. 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. ## Reference Page layouts with screenshots, live examples, and reuse guidance. ## Layout inventory Page-layout families and structural variants found through the site's navigation, section indexes, source templates, and public pages. Content-only differences share a record. This is a maintained family inventory, not a census of every historical HTML file or tutorial demo. Review the shared header/footer and Learn destinations, compare the representative pages and their SSI/CSS regions, and capture the public result. Check specialized catalogs, applications, archive indexes, and the forum/newsletter separately. A different subject, title, illustration, or color does not create a new layout. [Layout records](/design/layouts.json) / [Capture metadata](/design/layouts/captures.json). 26 references in 9 families, with 61 captures. Source baseline: `98c81538e65081e23abaa78bc86586d38e6aec2e`. - Published override `87b8d16c`: Modernized Lab pages and left_lab.shtml. Published and verified by the Lab owner before capture, but not merged into the source baseline. Lab source links are pinned to this release rather than the older files on main. Anonymous Chromium captures in isolated contexts. No form submissions, quiz answers, subscriptions, chat messages, or plot claims. Presence and tracking requests are blocked. Screenshots retain their captured appearance; local selectors only switch actual images. Public member artwork and third-party screenshots retain their owners' rights. ### Scope exclusions - Tutorial exercises, downloadable projects, isolated embedded demos, and old shell backups are not separate site-layout recommendations. - Redirects such as tutorials.htm, apps/index.htm, and Lab example.htm/experiments.htm are destinations to resolve, not layouts to capture. - Private account history, administration, authentication flows, visitor records, and error/redirect endpoints are outside the public capture inventory. - External retail and social-network pages are not cataloged. The forum and newsletter are included as explicitly separate companion experiences. - Legacy coverage is representative. An old article's subject or directory does not prove that its current page still uses a legacy shell. ### Grouped examples - [https://www.kirupa.com/lab/index.htm](https://www.kirupa.com/lab/index.htm) uses [topic-index](/design/layouts.htm#layout-topic-index): The published Lab landing uses the same grouped, icon-led topic-list structure. - [https://www.kirupa.com/mcp/](https://www.kirupa.com/mcp/) uses [tutorial](/design/layouts.htm#layout-tutorial): A current reading column with endpoint/copy controls; those are content components, not a new outer layout. - [https://www.kirupa.com/developer/mx2004/motion_tween.htm](https://www.kirupa.com/developer/mx2004/motion_tween.htm) uses [tutorial](/design/layouts.htm#layout-tutorial): Archived Flash content now uses the current article shell and a legacy-content notice. ## Homepage ID: `home` / family: `home` / Current shell. The main entry point, with a welcome feature and the latest articles, newsletter issues, and interviews. ![KIRUPA homepage with the welcome video above the Latest content cards and the shared navigation.](/design/layouts/home-desktop.png?v=f3af10b33c00) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/) / [Full-size screenshot](/design/layouts/home-desktop.png?v=f3af10b33c00) / [Catalog entry](/design/layouts.htm#layout-home). Regions: Shared site header and theme controls; Centered welcome feature; Latest-content groups; Shared newsletter and footer. Reuse: Use for the site front door. Section indexes should use the topic or reference-directory layout instead of copying the welcome feature. Responsive: The content groups reflow into a narrow column. The desktop capture is 1600px wide; narrower intermediate widths can reserve space for the shared rail even when this page has no topic links. Captures: - [Desktop](/design/layouts/home-desktop.png?v=f3af10b33c00): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/). - [Phone](/design/layouts/home-phone.png?v=a2de157236c1): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/). - [Shared footer](/design/layouts/home-footer.png?v=7b1009769020): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1892px, 2026-10-21. [Captured page](https://www.kirupa.com/). Sources: - [index.html](https://github.com/kirupa/kirupaWWW/blob/main/index.html) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) - [ssi/newDesign/src/footer.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/footer.shtml) ## Tutorial landing ID: `learn-hub` / family: `directory` / Current shell. The cross-topic learning hub, with category links followed by recent content. ![The Learn landing page with two columns of illustrated learning-category links beside the wide-screen forum rail.](/design/layouts/learn-hub-desktop.png?v=d16e3a3b97e7) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/learn/index.htm) / [Full-size screenshot](/design/layouts/learn-hub-desktop.png?v=d16e3a3b97e7) / [Catalog entry](/design/layouts.htm#layout-learn-hub). Regions: Shared header; Section title and introduction; Two-column Learning Categories list; Latest-content section; Optional wide-screen forum rail. Reuse: Use for a broad entry point spanning several subjects. Keep individual lessons in their topic index. Responsive: The shared .row/.column lists stack below 800px. The right-hand forum rail is omitted at narrower widths; the header uses its compact navigation. Captures: - [Desktop](/design/layouts/learn-hub-desktop.png?v=d16e3a3b97e7): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/learn/index.htm). - [Phone](/design/layouts/learn-hub-phone.png?v=f37fd97ed27a): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/learn/index.htm). Sources: - [learn/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/learn/index.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) - [ssi/newDesign/latest.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/latest.shtml) ## Topic index ID: `topic-index` / family: `directory` / Current shell. A subject's lessons grouped by learning stage or topic. ![The data structures and algorithms topic index, with Getting Started and Data Structures groups of icon-led lesson links.](/design/layouts/topic-index-desktop.png?v=b84d697b291a) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/data_structures_algorithms/index.htm) / [Full-size screenshot](/design/layouts/topic-index-desktop.png?v=b84d697b291a) / [Catalog entry](/design/layouts.htm#layout-topic-index). Regions: Section title and introduction; Named topic groups; Icon-led article links; Shared shell and optional forum rail. Reuse: Use for subject indexes such as data structures, JavaScript, or the modernized Lab landing. Preserve the existing articleList links and group hierarchy. Responsive: The reading region narrows with the shared shell. Lists remain in document order; optional desktop rails disappear instead of becoming additional content columns. Captures: - [Desktop](/design/layouts/topic-index-desktop.png?v=b84d697b291a): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/data_structures_algorithms/index.htm). - [Phone](/design/layouts/topic-index-phone.png?v=c6a83126462e): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 734px, 2026-10-21. [Captured page](https://www.kirupa.com/data_structures_algorithms/index.htm). Sources: - [data_structures_algorithms/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/data_structures_algorithms/index.htm) - [javascript_basics/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/javascript_basics/index.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/index.htm](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/index.htm) ## Tutorial article ID: `tutorial` / family: `article` / Current shell. The standard reading layout for explanations, code, diagrams, and embedded examples. ![A current tutorial with the left topic rail, blue article title and byline, introductory text, and video example.](/design/layouts/tutorial-desktop.png?v=bde968ad6e23) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/html5/building_your_first_web_page.htm) / [Full-size screenshot](/design/layouts/tutorial-desktop.png?v=bde968ad6e23) / [Catalog entry](/design/layouts.htm#layout-tutorial). Regions: Scrollable topic rail; Article title, byline, and Filed under metadata; Reading column with media and code; Article navigation and footer; Optional wide-screen forum rail. Reuse: Start from an adjacent current tutorial. Keep the SSI head/header/footer, tutorialInformation, authorText, tutorialInfo, and topic navigation. About pages and MCP documentation also use this reading structure. Responsive: The native rail hides at 1420px and the reading region becomes one column at 1200px. Images shrink within the column and previous/next links stack. Preserve contained code scrolling. Captures: - [Desktop](/design/layouts/tutorial-desktop.png?v=bde968ad6e23): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/html5/building_your_first_web_page.htm). - [Phone](/design/layouts/tutorial-phone.png?v=35e2ad52d077): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/html5/building_your_first_web_page.htm). Sources: - [html5/building_your_first_web_page.htm](https://github.com/kirupa/kirupaWWW/blob/main/html5/building_your_first_web_page.htm) - [ssi/newDesign/left_js.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/left_js.shtml) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) - [ssi/kirupa_sig.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/kirupa_sig.shtml) - [mcp/index.php](https://github.com/kirupa/kirupaWWW/blob/main/mcp/index.php) ## Reference directory ID: `reference-index` / family: `directory` / Current shell. A section directory with descriptive rows and direct links to agent-readable documentation. ![The Design System index with its section navigation, agent entry block, and two-part directory rows.](/design/layouts/reference-index-desktop.png?v=54db5870eca0) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/design/) / [Full-size screenshot](/design/layouts/reference-index-desktop.png?v=54db5870eca0) / [Catalog entry](/design/layouts.htm#layout-reference-index). Regions: Section rail; Native title and metadata; Agent entry links; Icon/title and description rows; Previous/next navigation. Reuse: Use for a documentation index whose entries need short explanations. Keep section links and Markdown/JSON discovery generated from the same source. Responsive: At 600px the title/icon and description in each row stack. The Design section adds a collapsed section list when its native rail is unavailable. Captures: - [Desktop](/design/layouts/reference-index-desktop.png?v=54db5870eca0): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/design/). - [Directory rows](/design/layouts/reference-index-rows.png?v=57e6cace352a): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1085px, 2026-10-21. [Captured page](https://www.kirupa.com/design/). - [Phone](/design/layouts/reference-index-phone.png?v=92c833f3c40d): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1374px, 2026-10-21. [Captured page](https://www.kirupa.com/design/). Sources: - [design/system.source.json](https://github.com/kirupa/kirupaWWW/blob/main/design/system.source.json) - [design/template.htm](https://github.com/kirupa/kirupaWWW/blob/main/design/template.htm) - [design/design.css](https://github.com/kirupa/kirupaWWW/blob/main/design/design.css) - [tools/build_design_system.mjs](https://github.com/kirupa/kirupaWWW/blob/main/tools/build_design_system.mjs) ## Reference catalog ID: `reference-catalog` / family: `article` / Current shell. A reference article containing indexed specimens, local controls, and source or markup disclosures. ![The Components reference page with native documentation navigation, agent instructions, and contextual examples.](/design/layouts/reference-catalog-desktop.png?v=d0eb0e719a0a) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/design/components.htm) / [Full-size screenshot](/design/layouts/reference-catalog-desktop.png?v=d0eb0e719a0a) / [Catalog entry](/design/layouts.htm#layout-reference-catalog). Regions: Documentation rail; Native title and reference copy; Independently controlled specimens; Catalog index; Source and usage disclosures. Reuse: Use the Design generator and catalog data. This is an article-body variant; do not replace the shared shell with an application dashboard. Responsive: Controls wrap and preview frames fit the reading column. Long code stays in its own scroll container; the narrow page exposes the section list above the article. Captures: - [Desktop](/design/layouts/reference-catalog-desktop.png?v=d0eb0e719a0a): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/design/components.htm). - [Local specimen](/design/layouts/reference-catalog-specimen.png?v=684003542943): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1450px, 2026-10-21. [Captured page](https://www.kirupa.com/design/components.htm). - [Phone](/design/layouts/reference-catalog-phone.png?v=668dc28c88b2): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1956px, 2026-10-21. [Captured page](https://www.kirupa.com/design/components.htm). Sources: - [design/components.source.json](https://github.com/kirupa/kirupaWWW/blob/main/design/components.source.json) - [design/design.js](https://github.com/kirupa/kirupaWWW/blob/main/design/design.js) - [design/design.css](https://github.com/kirupa/kirupaWWW/blob/main/design/design.css) - [tools/build_design_system.mjs](https://github.com/kirupa/kirupaWWW/blob/main/tools/build_design_system.mjs) ## Interview catalog ID: `podcast-index` / family: `directory` / Current shell. A visual interview library with current episodes and an older interview archive. ![The interview catalog with a left interview rail and a grid of guest and episode thumbnails.](/design/layouts/podcast-index-desktop.png?v=b1ef58c8ceed) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/podcast/index.htm) / [Full-size screenshot](/design/layouts/podcast-index-desktop.png?v=b1ef58c8ceed) / [Catalog entry](/design/layouts.htm#layout-podcast-index). Regions: Interview rail; Section introduction; Episode thumbnail grid; Classic interview archive; Shared footer. Reuse: Use for an episode collection. Keep the cards linked to full episode pages and retain the archive as a separate group. Responsive: The card grid reduces its columns as the content region narrows. The topic rail is removed by the shared shell's smaller-screen rules. Captures: - [Desktop](/design/layouts/podcast-index-desktop.png?v=b1ef58c8ceed): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/podcast/index.htm). - [Phone](/design/layouts/podcast-index-phone.png?v=c05429a75514): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 908px, 2026-10-21. [Captured page](https://www.kirupa.com/podcast/index.htm). Sources: - [podcast/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/podcast/index.htm) - [ssi/newDesign/left_podcast.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/left_podcast.shtml) - [interviews/interviews.css](https://github.com/kirupa/kirupaWWW/blob/main/interviews/interviews.css) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) ## Interview episode ID: `podcast-episode` / family: `article` / Current shell. A media-led article with a conversation summary, text-only chapter bands, and a speaker-labeled transcript. ![An interview episode with the interview rail, guest title, byline, and introductory links.](/design/layouts/podcast-episode-desktop.png?v=ae514be6c1af) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-11-06. [Live example](https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm) / [Full-size screenshot](/design/layouts/podcast-episode-desktop.png?v=ae514be6c1af) / [Catalog entry](/design/layouts.htm#layout-podcast-episode). Regions: Interview rail and article title; Guest introduction and media; Chapter bands and playback links; Speaker portraits, timestamp pills, and transcript turns; Related navigation. Reuse: Use the podcast renderer and episode data. Keep chapter times linked to the recording and distinguish the transcript from editorial summary. Responsive: Media follows the reading-column width. Chapter bands are text only and span the transcript column at every width. Speaker headers wrap; the shared interview rail disappears on narrow screens. Captures: - [Desktop](/design/layouts/podcast-episode-desktop.png?v=ae514be6c1af): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-11-06. [Captured page](https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm). - [Media and summary](/design/layouts/podcast-episode-media.png?v=715ee4de5951): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1341px, 2026-11-06. [Captured page](https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm). - [Chapter band](/design/layouts/podcast-episode-chapter.png?v=ca0d8c47a0a4): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 6462px, 2026-11-06. [Captured page](https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm). - [Transcript](/design/layouts/podcast-episode-transcript.png?v=e7eda0477e48): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 6721px, 2026-11-06. [Captured page](https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm). - [Phone](/design/layouts/podcast-episode-phone.png?v=ff75227a2064): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 10090px, 2026-11-06. [Captured page](https://www.kirupa.com/podcast/amit_chopra_life_after_nine_to_five.htm). Sources: - [podcast/amit_chopra_life_after_nine_to_five.htm](https://github.com/kirupa/kirupaWWW/blob/main/podcast/amit_chopra_life_after_nine_to_five.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) - [ssi/newDesign/left_podcast.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/left_podcast.shtml) ## Video library ID: `video-library` / family: `directory` / Current shell. A featured video followed by a thumbnail-led list of earlier videos. ![The video library with a large featured video above a list of earlier video thumbnails.](/design/layouts/video-library-desktop.png?v=fff52eb5d7e4) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/learn/videos.htm) / [Full-size screenshot](/design/layouts/video-library-desktop.png?v=fff52eb5d7e4) / [Catalog entry](/design/layouts.htm#layout-video-library). Regions: Section introduction; Featured media container; More Videos list; Optional forum rail; Shared footer. Reuse: Use for the site's video index. Keep a featured item distinct from the rest of the list; a player alone does not require a new shell. Responsive: The featured media fits the content column. The list remains below it and the shared side regions disappear on small screens. Captures: - [Desktop](/design/layouts/video-library-desktop.png?v=fff52eb5d7e4): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/learn/videos.htm). - [Phone](/design/layouts/video-library-phone.png?v=daa1c38ac7ec): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 596px, 2026-10-21. [Captured page](https://www.kirupa.com/learn/videos.htm). Sources: - [learn/videos.htm](https://github.com/kirupa/kirupaWWW/blob/main/learn/videos.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) ## Book catalog ID: `book-index` / family: `directory` / Current shell. A product collection organized into current releases and older books. ![The Books catalog with cover images, descriptions, and purchase or source actions arranged in rows.](/design/layouts/book-index-desktop.png?v=7e829ab3c330) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/book/index.htm) / [Full-size screenshot](/design/layouts/book-index-desktop.png?v=7e829ab3c330) / [Catalog entry](/design/layouts.htm#layout-book-index). Regions: Section introduction; Book-cover and description rows; Purchase/source actions; Archive section; Shared shell. Reuse: Use for a book collection. Keep each cover beside its own summary and actions, with links to the appropriate detail page or retailer. Responsive: Rows fit the narrow content region and actions wrap. Preserve the association between a cover, title, description, and its links. Captures: - [Desktop](/design/layouts/book-index-desktop.png?v=7e829ab3c330): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/book/index.htm). - [Phone](/design/layouts/book-index-phone.png?v=392741180f8d): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 849px, 2026-10-21. [Captured page](https://www.kirupa.com/book/index.htm). Sources: - [book/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/book/index.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) ## Book detail ID: `book-detail` / family: `product` / Current shell. A single book's cover, description, purchase action, contents, and FAQs. ![The HTML5 Canvas book detail with its cover beside the title and purchase link, followed by description and contents.](/design/layouts/book-detail-desktop.png?v=01d565ed4b14) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm) / [Full-size screenshot](/design/layouts/book-detail-desktop.png?v=01d565ed4b14) / [Catalog entry](/design/layouts.htm#layout-book-detail). Regions: Cover and title feature; Purchase link; Book description and contents; Questions and author information; Shared footer. Reuse: Use as the existing product-detail reference. Its page-local cover positioning and fixed colors are specific to this book, not new site-wide tokens. Responsive: At 1024px the cover moves above the title and description. The two contents columns become a single flow. Captures: - [Desktop](/design/layouts/book-detail-desktop.png?v=01d565ed4b14): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm). - [Phone](/design/layouts/book-detail-phone.png?v=ecbbb8f5414d): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/book/html5_canvas_noob_to_ninja.htm). Sources: - [book/html5_canvas_noob_to_ninja.htm](https://github.com/kirupa/kirupaWWW/blob/main/book/html5_canvas_noob_to_ninja.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) ## Quiz catalog ID: `quiz-index` / family: `directory` / Current shell. A subject- and topic-grouped directory of mastery quizzes with links to lessons and saved results. ![The mastery quiz catalog with collapsible subject navigation, section cards, topic links, and quiz cards.](/design/layouts/quiz-index-desktop.png?v=abb101688a16) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/quizzes/) / [Full-size screenshot](/design/layouts/quiz-index-desktop.png?v=abb101688a16) / [Catalog entry](/design/layouts.htm#layout-quiz-index). Regions: Collapsible subject navigation rail; Catalog introduction and result links; Subject cards and topic anchors; Quiz-card grids with question counts; Shared footer. Reuse: Extend the quiz catalog generator and data rather than writing a second quiz directory. Keep lesson and result navigation beside the catalog. Responsive: The auto-fit grid reduces to one column when cards no longer fit. Navigation actions wrap and the shared rail is removed. Captures: - [Desktop](/design/layouts/quiz-index-desktop.png?v=abb101688a16): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/quizzes/). - [Phone](/design/layouts/quiz-index-phone.png?v=2cd61db4e4a3): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1468px, 2026-10-21. [Captured page](https://www.kirupa.com/quizzes/). Sources: - [quizzes/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/index.htm) - [quizzes/catalog.shtml](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/catalog.shtml) - [quizzes/navigation.shtml](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/navigation.shtml) - [quizzes/quiz.css](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/quiz.css) ## Quiz question ID: `quiz-runner` / family: `application` / Current shell. A focused question stage with progress, question context, answer controls, and feedback. ![An Arrays quiz showing progress, a code question, and answer choices within the quiz stage.](/design/layouts/quiz-runner-desktop.png?v=c26f4811d1d7) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/quizzes/arrays_data_structure.htm) / [Full-size screenshot](/design/layouts/quiz-runner-desktop.png?v=c26f4811d1d7) / [Catalog entry](/design/layouts.htm#layout-quiz-runner). Regions: Quiz rail and title; Lesson/catalog/results links; Question progress; Question and answer stage; Working and error messages. Reuse: Use the quiz runtime and question-bank schema. Keep one active question stage and preserve native answer labels, status, and error behavior. Responsive: The stage stays single-column. Code is contained within the question; navigation and answer controls fit the narrow stage. Capture limitation: Anonymous first-question state. No answer or attempt submission was made. Captures: - [Desktop](/design/layouts/quiz-runner-desktop.png?v=c26f4811d1d7): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/quizzes/arrays_data_structure.htm). - [Phone](/design/layouts/quiz-runner-phone.png?v=202717d6916e): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 604px, 2026-10-21. [Captured page](https://www.kirupa.com/quizzes/arrays_data_structure.htm). Sources: - [quizzes/arrays_data_structure.htm](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/arrays_data_structure.htm) - [quizzes/quiz.js](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/quiz.js) - [quizzes/quiz.css](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/quiz.css) - [quizzes/navigation.shtml](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/navigation.shtml) ## Saved results ID: `quiz-results` / family: `application` / Current shell. An account-oriented history page with a forum-connection boundary. ![The guest view of My Mastery Quiz Results with a forum-account connection prompt and no private score data.](/design/layouts/quiz-results-desktop.png?v=181ff92f29b5) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/quizzes/results.htm) / [Full-size screenshot](/design/layouts/quiz-results-desktop.png?v=181ff92f29b5) / [Catalog entry](/design/layouts.htm#layout-quiz-results). Regions: Quiz navigation; Results title and return links; Connection status/action; Saved-attempt region. Reuse: Reuse the history view in quiz.js. Show a clear guest state before requesting access to private scores. Responsive: Status and history occupy one reading column. Actions wrap inside the page and the desktop rail is hidden. Capture limitation: Guest state only. No account was connected and no private result history was inspected. Captures: - [Desktop](/design/layouts/quiz-results-desktop.png?v=181ff92f29b5): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/quizzes/results.htm). - [Phone](/design/layouts/quiz-results-phone.png?v=77d13ee496fa): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/quizzes/results.htm). Sources: - [quizzes/results.htm](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/results.htm) - [quizzes/quiz.js](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/quiz.js) - [quizzes/quiz.css](https://github.com/kirupa/kirupaWWW/blob/main/quizzes/quiz.css) ## Asset browser ID: `asset-browser` / family: `application` / Specialized current surface. A standalone search-and-filter workspace for a large visual asset collection. ![Pixel Icon Gallery with its blue pixel heading, style tabs, download buttons, icon stats with a Free or Pro? link, search, and category filters.](/design/layouts/asset-browser-desktop.png?v=7d66eb0a8110) Icon Gallery default / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-11-05. [Live example](https://www.kirupa.com/tools/icon_gallery_pixel.htm) / [Full-size screenshot](/design/layouts/asset-browser-desktop.png?v=7d66eb0a8110) / [Catalog entry](/design/layouts.htm#layout-asset-browser). Regions: Tool header; Search field; Category and format controls; Result count and asset grid; Per-asset actions. Reuse: Use the existing Icon Gallery browser for emoji and icon discovery. Its style tabs, search panel, and per-icon downloads are separate from the standard article layout. Responsive: Filters wrap and the asset grid reduces its columns. Preserve the per-asset labels and actions instead of shrinking a desktop grid to fit. Captures: - [Desktop](/design/layouts/asset-browser-desktop.png?v=7d66eb0a8110): Icon Gallery default / Light / 1600 x 1200 CSS px / page top, 2026-11-05. [Captured page](https://www.kirupa.com/tools/icon_gallery_pixel.htm). - [Phone](/design/layouts/asset-browser-phone.png?v=b388bbdff025): Icon Gallery default / Light / 390 x 844 CSS px / scrolled 991px, 2026-11-05. [Captured page](https://www.kirupa.com/tools/icon_gallery_pixel.htm). Sources: - [tools/icon_gallery_template.htm](https://github.com/kirupa/kirupaWWW/blob/main/tools/icon_gallery_template.htm) - [tools/icon_gallery_pixel.htm](https://github.com/kirupa/kirupaWWW/blob/main/tools/icon_gallery_pixel.htm) - [tools/cleanedUpTwemoji.js](https://github.com/kirupa/kirupaWWW/blob/main/tools/cleanedUpTwemoji.js) ## Visitor globe ID: `visitor-dashboard` / family: `application` / Specialized current surface. A visualization-led page pairing a large globe with an activity table. ![The visitor page's title, explanation, and globe stage; live presence requests are blocked for this reference capture.](/design/layouts/visitor-dashboard-desktop.png?v=98fa351e0681) Pixel / Blue / Light / 1600 x 1500 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/whos-online/) / [Full-size screenshot](/design/layouts/visitor-dashboard-desktop.png?v=98fa351e0681) / [Catalog entry](/design/layouts.htm#layout-visitor-dashboard). Regions: Native title and explanation; Globe stage; Online/recent-arrivals table; Status announcements and privacy information. Reuse: Reuse the globe page's visualization and table regions for this experience. A dashboard needs explicit loading, empty, and failure states. Responsive: The globe scales with its stage and the table follows below it. Keep any necessary table scrolling local to the table region. Capture limitation: Presence requests were blocked for privacy. The capture documents the page structure, not current visitor locations or activity. Captures: - [Desktop](/design/layouts/visitor-dashboard-desktop.png?v=98fa351e0681): Pixel / Blue / Light / 1600 x 1500 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/whos-online/). - [Phone](/design/layouts/visitor-dashboard-phone.png?v=8f8c30204ae4): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 672px, 2026-10-21. [Captured page](https://www.kirupa.com/whos-online/). Sources: - [whos-online/index.php](https://github.com/kirupa/kirupaWWW/blob/main/whos-online/index.php) - [whos-online/clay-globe.css](https://github.com/kirupa/kirupaWWW/blob/main/whos-online/clay-globe.css) - [whos-online/clay-globe.js](https://github.com/kirupa/kirupaWWW/blob/main/whos-online/clay-globe.js) ## Spatial application ID: `spatial-app` / family: `application` / Specialized current surface. A full-viewport community map with its own exploration and editing controls. ![kirupaVille's full-viewport pixel city with the dock toolbar, zoom controls, and minimap.](/design/layouts/spatial-app-desktop.png?v=1998200fb805) Pixel site chrome / kirupaVille default / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/lab/kville/main.htm) / [Full-size screenshot](/design/layouts/spatial-app-desktop.png?v=1998200fb805) / [Catalog entry](/design/layouts.htm#layout-spatial-app). Regions: Shared site header; Pannable city viewport; Dock toolbar; Minimap and zoom controls; Drawers, inspector, and dialogs. Reuse: Use this structure only for a spatial workspace. Keep navigation, viewport gestures, selection, and editor state separate from article scrolling. Responsive: The world remains pannable rather than collapsing into a content list. The dock and overlays adapt to the available screen; inspect both desktop and touch-sized captures. Capture limitation: Public exploration view. The welcome dialog was dismissed with Escape; no plot was selected, claimed, or edited. Captures: - [Desktop](/design/layouts/spatial-app-desktop.png?v=1998200fb805): Pixel site chrome / kirupaVille default / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/lab/kville/main.htm). - [Phone](/design/layouts/spatial-app-phone.png?v=38a7d51b8ae8): Pixel site chrome / kirupaVille default / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/lab/kville/main.htm). Sources: - [lab/kville/main.htm](https://github.com/kirupa/kirupaWWW/blob/main/lab/kville/main.htm) ## Live ranked list ID: `ranked-list` / family: `directory` / Specialized current surface. A time-windowed content ranking with an update timestamp and explicit empty state. ![What's Popular with its 24-hour window, update metadata, and the actual result state at capture time.](/design/layouts/ranked-list-desktop.png?v=ca0935072535) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/popular.php) / [Full-size screenshot](/design/layouts/ranked-list-desktop.png?v=ca0935072535) / [Catalog entry](/design/layouts.htm#layout-ranked-list). Regions: Shared shell; Ranking explanation; Time-window/update metadata; Ranked results or empty state. Reuse: Treat this as the existing dynamic-list reference. Preserve its time-window label and empty state; do not infer its server implementation from the screenshot. Responsive: The public page keeps the ranking in one narrow content column while the shared header and side regions adapt. Captures: - [Desktop](/design/layouts/ranked-list-desktop.png?v=ca0935072535): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/popular.php). - [Phone](/design/layouts/ranked-list-phone.png?v=85fdee4f342b): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/popular.php). Evidence is the public rendered page. popular.php's server source was not present in the reviewed checkout. Source evidence: the linked public page; implementation is not in this checkout. ## Anchored archive ID: `archive-directory` / family: `directory` / Archive content / current shell. A long categorized link archive with an in-page table of contents. ![The Design Center archive with an anchor-based category rail and categorized tutorial links in the current shell.](/design/layouts/archive-directory-desktop.png?v=689b92a91971) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/design/archive.htm) / [Full-size screenshot](/design/layouts/archive-directory-desktop.png?v=689b92a91971) / [Catalog entry](/design/layouts.htm#layout-archive-directory). Regions: Anchor-based section rail; Native archive title; Category headings and link lists; Links back to current sections. Reuse: Use for retained content that still needs an organized entry point. The content is historical; this page's shell is current. Responsive: The archive lists remain one reading column. The desktop anchor rail is hidden on small screens, while the same section headings remain in the document. Captures: - [Desktop](/design/layouts/archive-directory-desktop.png?v=689b92a91971): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/design/archive.htm). - [Phone](/design/layouts/archive-directory-phone.png?v=453a5179fe54): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/design/archive.htm). Sources: - [design/archive.htm](https://github.com/kirupa/kirupaWWW/blob/main/design/archive.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) ## Embedded experiment ID: `experiment-article` / family: `article` / Archive content / current shell. An archived interactive experiment presented inside the current article shell. ![The Comet experiment with the current Lab rail, archive notice, and a Ruffle player inside the reading column.](/design/layouts/experiment-article-desktop.png?v=7ef58bb69d98) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/lab/comet.htm) / [Full-size screenshot](/design/layouts/experiment-article-desktop.png?v=7ef58bb69d98) / [Catalog entry](/design/layouts.htm#layout-experiment-article). Regions: Lab navigation rail; Article title and author; Archive notice; Aspect-ratio player; Instructions and source/download context. Reuse: Use the published Lab wrapper for preserved SWF experiments. Keep the Ruffle player, fallback, attribution, and archive notice together. Responsive: The player fits its container while retaining the source aspect ratio. The article follows the shared rail and reading-column breakpoints. Captures: - [Desktop](/design/layouts/experiment-article-desktop.png?v=7ef58bb69d98): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/lab/comet.htm). - [Phone](/design/layouts/experiment-article-phone.png?v=94712691a496): Pixel / Blue / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/lab/comet.htm). Published Lab release 87b8d16c, not the older Lab files in the inventory baseline. Sources: - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/comet.htm](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/comet.htm) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/ssi/newDesign/left_lab.shtml](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/ssi/newDesign/left_lab.shtml) ## Artwork gallery ID: `image-gallery` / family: `gallery` / Archive content / current shell. A responsive collection of community images with creator credits. ![The pixelPeople gallery with a multi-column grid of pixel characters and creator captions beside the Lab rail.](/design/layouts/image-gallery-desktop.png?v=df8f354e847c) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/lab/pixelPeople.htm) / [Full-size screenshot](/design/layouts/image-gallery-desktop.png?v=df8f354e847c) / [Catalog entry](/design/layouts.htm#layout-image-gallery). Regions: Lab rail and article introduction; Image grid; Per-entry captions and credits; Shared footer. Reuse: Reuse labGrid and its small, wide, or banner variants. Preserve original aspect ratios, creator attribution, and pixelArt treatment for pixel artwork. Stamps and other Lab image collections share this family. Responsive: The grid uses auto-fill/minmax rather than fixed column counts. Small pixel entries use a 110px minimum; wide and banner variants use their own source rules. Captures: - [Desktop](/design/layouts/image-gallery-desktop.png?v=df8f354e847c): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/lab/pixelPeople.htm). - [Phone](/design/layouts/image-gallery-phone.png?v=527f69e38fad): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 637px, 2026-10-21. [Captured page](https://www.kirupa.com/lab/pixelPeople.htm). Published Lab release 87b8d16c. These are archived contributions in the current shell. Sources: - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/pixelPeople.htm](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/pixelPeople.htm) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/kirupaStamps.htm](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/kirupaStamps.htm) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css) ## Contest entries ID: `contest-archive` / family: `gallery` / Archive content / current shell. A competition archive combining rules, attribution, and a collection of interactive entries. ![FXpression's current article shell with its contest introduction and rules.](/design/layouts/contest-archive-desktop.png?v=8b128a46a630) Pixel / Blue / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/lab/fxpression.htm) / [Full-size screenshot](/design/layouts/contest-archive-desktop.png?v=8b128a46a630) / [Catalog entry](/design/layouts.htm#layout-contest-archive). Regions: Lab rail and contest introduction; Contest details and rules; Stacked player entries; Entry attribution and result context. Reuse: Keep competition context above its entries. Reuse labGridPlayers for the player collection; image-based battles use the same current shell with inline entry images and winner badges. Responsive: The source defines a centered single-column player grid. The 390px capture exposes horizontal overflow in some entries despite the source sizing rules. This is a live limitation, not a recommended phone treatment. Captures: - [Desktop](/design/layouts/contest-archive-desktop.png?v=8b128a46a630): Pixel / Blue / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/lab/fxpression.htm). - [Player entries](/design/layouts/contest-archive-entries.png?v=e4df94d4ec27): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 1230px, 2026-10-21. [Captured page](https://www.kirupa.com/lab/fxpression.htm). - [Phone](/design/layouts/contest-archive-phone.png?v=189df11b3c81): Pixel / Blue / Light / 390 x 844 CSS px / scrolled 1540px, 2026-10-21. [Captured page](https://www.kirupa.com/lab/fxpression.htm). - [Image battle variant](/design/layouts/contest-archive-battles.png?v=de13eba46cfd): Pixel / Blue / Light / 1600 x 1200 CSS px / scrolled 553px, 2026-10-21. [Captured page](https://www.kirupa.com/lab/battles.htm). Published Lab release 87b8d16c. The image-based battle variant is included as a separate capture. Sources: - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/fxpression.htm](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/fxpression.htm) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/battles.htm](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/battles.htm) - [https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css](https://github.com/kirupa/kirupaWWW/blob/87b8d16c/lab/lab.css) ## Legacy multi-column shell ID: `legacy-modular` / family: `legacy` / Legacy shell. A retained older section index with compact navigation, a narrow link column, and a promotional sidebar. ![The older Blend/WPF index with its compact header, narrow left navigation, dense tutorial list, and right promotional column.](/design/layouts/legacy-modular-desktop.png?v=bc3a7e03787a) Legacy shell / default appearance / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.com/blend_wpf/index.htm) / [Full-size screenshot](/design/layouts/legacy-modular-desktop.png?v=bc3a7e03787a) / [Catalog entry](/design/layouts.htm#layout-legacy-modular). Regions: Older header/search module; Left navigation module; Compact subject list; Right promotion column; Older footer modules. Reuse: Historical reference only. For a new index, use the current topic layout; do not import this shell's spacing or module CSS. Responsive: This layout predates the current responsive shell. The phone capture documents its actual scaled or constrained presentation, not a recommended mobile pattern. Captures: - [Desktop](/design/layouts/legacy-modular-desktop.png?v=bc3a7e03787a): Legacy shell / default appearance / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/blend_wpf/index.htm). - [Phone](/design/layouts/legacy-modular-phone.png?v=837467950c3b): Legacy shell / default appearance / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.com/blend_wpf/index.htm). Sources: - [blend_wpf/index.htm](https://github.com/kirupa/kirupaWWW/blob/main/blend_wpf/index.htm) - [ssi/header_module.shtml](https://github.com/kirupa/kirupaWWW/blob/main/ssi/header_module.shtml) ## Forum topic list ID: `forum-list` / family: `community` / Companion site. The public Discourse community's topic browser. ![The public forum with category navigation, topic filters, and topic rows containing authors and activity metadata.](/design/layouts/forum-list-desktop.png?v=a53af7e1fd1e) Forum default / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://forum.kirupa.com/) / [Full-size screenshot](/design/layouts/forum-list-desktop.png?v=a53af7e1fd1e) / [Catalog entry](/design/layouts.htm#layout-forum-list). Regions: Forum header and account actions; Category sidebar; Search and list tabs; Topic rows with activity metadata. Reuse: Change this through the forum's Discourse theme and components. Its layout and account controls are not kirupa.com SSI templates. Responsive: The mobile forum uses compact navigation and rearranged topic metadata. The separately captured phone view is the evidence for this platform behavior. Captures: - [Desktop](/design/layouts/forum-list-desktop.png?v=a53af7e1fd1e): Forum default / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://forum.kirupa.com/). - [Phone](/design/layouts/forum-list-phone.png?v=f90494c564e8): Forum default / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://forum.kirupa.com/). Public Discourse rendering. The deployed forum theme configuration is outside this repository. Source evidence: the linked public page; implementation is not in this checkout. ## Forum conversation ID: `forum-topic` / family: `community` / Companion site. A threaded public discussion with author identity, posts, actions, and timeline navigation. ![A public forum topic with its title, author identities, code-containing posts, and a right-hand timeline.](/design/layouts/forum-topic-desktop.png?v=f9af83598e8b) Forum default / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792) / [Full-size screenshot](/design/layouts/forum-topic-desktop.png?v=f9af83598e8b) / [Catalog entry](/design/layouts.htm#layout-forum-topic). Regions: Forum header and sidebar; Topic title and category; Post stream; Author and post actions; Topic timeline. Reuse: Use Discourse's topic view for discussions. Do not reproduce a forum thread as a native article or initialize a posting action inside a design preview. Responsive: The post stream takes the narrow viewport while desktop sidebar/timeline controls change position or collapse. Code remains within each post. Captures: - [Desktop](/design/layouts/forum-topic-desktop.png?v=f9af83598e8b): Forum default / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792). - [Phone](/design/layouts/forum-topic-phone.png?v=c206fe7669f0): Forum default / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://forum.kirupa.com/t/spot-the-bug-180-save-button-click/683792). Public Discourse rendering. Only anonymous, read-only topic access was used. Source evidence: the linked public page; implementation is not in this checkout. ## Newsletter publication ID: `newsletter` / family: `publication` / Companion site. The separately hosted newsletter's public article archive. ![The KIRUPA newsletter archive on Substack with publication navigation, list tabs, and article previews.](/design/layouts/newsletter-desktop.png?v=3334b3a73267) Substack publication default / Light / 1600 x 1200 CSS px / page top. Fixed capture, 2026-10-21. [Live example](https://www.kirupa.chat/archive) / [Full-size screenshot](/design/layouts/newsletter-desktop.png?v=3334b3a73267) / [Catalog entry](/design/layouts.htm#layout-newsletter). Regions: Publication header and subscription controls; Latest/Top/Discussions tabs; Article rows with thumbnails and metadata; Publication navigation. Reuse: Use Substack's publication interface for the newsletter archive. The kirupa.com newsletter promotion links to this experience; it does not share the site's article shell. Responsive: The publication header becomes compact and archive rows fit the phone viewport. Substack controls this behavior independently of kirupa.com styles. Captures: - [Desktop](/design/layouts/newsletter-desktop.png?v=3334b3a73267): Substack publication default / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.chat/archive). - [Phone](/design/layouts/newsletter-phone.png?v=a8fe9f057bda): Substack publication default / Light / 390 x 844 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.chat/archive). - [First-visit subscribe page](/design/layouts/newsletter-welcome.png?v=49ae2aebda6c): Substack publication default / Light / 1600 x 1200 CSS px / page top, 2026-10-21. [Captured page](https://www.kirupa.chat/). Public Substack rendering at kirupa.chat. Its template is not stored in this repository. Source evidence: the linked public page; implementation is not in this checkout. ## Adding or refreshing a layout Edit `design/layouts.source.json`. Group content-only differences; add a record for a distinct structure or a capture for a material variant. Record the public URL, anatomy, reuse guidance, responsive behavior, sources, and evidence limits. Capture anonymously and inspect every image before building. Use `DESIGN_PLAYWRIGHT_PATH` if Playwright is installed outside this checkout. ```sh node tools/capture_design_layouts.mjs --only home node tools/build_design_system.mjs node --test tools/design_system.test.mjs ``` The command above refreshes `home`; use the changed layout's ID. Capture definitions and image hashes are checked by the builder. With the read-only preview running (`php -S 127.0.0.1:8876 -t . design/index.php`), run `node tools/design_layouts.browser.mjs` for local selectors, routes, keyboard access, failure states, and responsive/theme checks. Do not fabricate missing views, restyle a bitmap, or deploy without separate authorization. ## Sources - [design/layouts.source.json](https://github.com/kirupa/kirupaWWW/blob/main/design/layouts.source.json) - [tools/capture_design_layouts.mjs](https://github.com/kirupa/kirupaWWW/blob/main/tools/capture_design_layouts.mjs) - [tools/design_layouts.mjs](https://github.com/kirupa/kirupaWWW/blob/main/tools/design_layouts.mjs) - [design/template.htm](https://github.com/kirupa/kirupaWWW/blob/main/design/template.htm) - [ssi/newDesign/src/kirupa.css](https://github.com/kirupa/kirupaWWW/blob/main/ssi/newDesign/src/kirupa.css) [Section page and specimens](/design/layouts.htm) | [Instruction index](/design/index.md) | [Plain prompt](/design/agent/layouts.txt)