← Back to Overview

Template System & Page Anatomy

Module structure, hero variants, and the building blocks of every generated page

On this page
01Module Structure 02Hero Variants 03Background Alternation 04Interactive Elements 05Responsive Patterns
01

Module Structure

Every page consists of identically structured modules. There are no bare sections. The hierarchy is strict: .module contains .module-content, which wraps the header and body.

Nested Page Anatomy

.module-number — large faded number (e.g. "01", opacity: .15)
.module-title — section heading
Content: text, visualizations, cards, quizzes, code blocks, ...
// Minimal module skeleton <section class="module" id="section-N"> <div class="module-content"> <header class="module-header animate-in"> <span class="module-number">0N</span> <h2 class="module-title">Title</h2> </header> <div class="module-body"> <section class="screen animate-in"> <p>Content here ...</p> </section> </div> </div> </section> // Rules: // 1. Every module has min-height: 100dvh // 2. Scroll-snap-align: start // 3. Padding-top accounts for the fixed navigation // 4. .animate-in triggers via IntersectionObserver

Structure rule: Every section is wrapped in a full-viewport-height module. The module contains a centered content area (max 820px), within it a header with a large faded number and title, followed by the body with any number of screens. Screens hold the actual content — text, visualizations, cards, or code blocks.

02

Hero Variants

There are exactly two hero types. The L0 hero is the landing page with audience switching. All deeper levels (L1–L3) use the deep hero with level dots, back button, and a mandatory page overview.

L0 Hero (Landing Page)
BADGE
Title
Subtitle
Decision Maker End User Developer
Centered title, subtitle, badge, audience switch. No level dots, no back button.
L1–L3 Hero (Deep Dive)
← Back
Title
On this page
01 Section 02 Section
Level dots, back button, title, and PAGE OVERVIEW (mandatory!). The page overview lists all sections as anchor links.

Hard rule: An L1–L3 hero without a page overview is an error. The section list with anchor links is mandatory on all deep-dive pages. It serves as both a table of contents and an orientation aid.

03

Background Alternation

Modules systematically alternate between two background colors. This pattern creates visual rhythm and improves orientation while scrolling.

Module Color Scheme

Hero Deep Blue Gradient — #000077 → #0000AA
Odd Warm Gray — #F3EFEB
Even White — #FFFFFF
Odd Warm Gray — #F3EFEB
// Background assignment <section class="module module-hero"> // Deep Blue (always) <section class="module" style="background:var(--color-bg-warm)"> // #F3EFEB <section class="module" style="background:var(--color-bg)"> // #FFFFFF <section class="module" style="background:var(--color-bg-warm)"> // #F3EFEB <section class="module" style="background:var(--color-bg)"> // #FFFFFF // Rule: Hero is ALWAYS Deep Blue. // Then modules alternate: warm → white → warm → white // Text on Warm Gray: var(--color-text) = #1A1A2E — contrast 10.2:1 // Text on White: var(--color-text) = #1A1A2E — contrast 15.4:1

Alternation: The hero area always uses the deep blue gradient. After that, modules alternate between Warm Gray (#F3EFEB) and White (#FFFFFF). The text color (#1A1A2E) achieves WCAG AAA contrast on both backgrounds. White text on light backgrounds is never used.

04

Interactive Elements

Every page offers at least one interactive element. The four core types: quizzes, code toggles, glossary tooltips, and file tree visualizations.

Quiz (Click-to-Answer)
✏️ Mini Example

Which HTML attribute determines the correct answer?

class="correct"
data-correct="N" on the .quiz container
id="answer"
Code ↔ Plain Text Toggle
// Code view: technical details .code-toggle-wrap .code-toggle-btn // Toggle button top-right .code-toggle-code // Default view .code-toggle-plain // Alternative plain text view

Plain text view: Every code block has an alternative explanation in simple language. The toggle switches between technical and readable presentation.

Glossary Tooltips

Technical terms like Helpfulness Score or IntersectionObserver get a dashed underline. A popup with the definition appears on hover.

File Tree Visualization
output/ l1/ orchestrator_dev_en.html templates_dev_en.html l2/ hero-module-patterns_dev_en.html
05

Responsive Patterns

Three breakpoints control the layout. On small screens, multi-column layouts convert to single column, navigation text hides, and deep-dive links stack vertically.

🖥️
Desktop
Above 768px width. Multi-column grids, horizontal sibling nav, full text display in navigation.
> 768px
📱
Tablet
481–768px. Cards become single-column. Viz flows switch to vertical. Arrows rotate 90°.
481–768px
📲
Mobile
Under 480px. Reduced padding, deep-dive links centered and stacked. .nav-link-text is hidden.
≤ 480px
// Breakpoint overview @media (max-width: 768px) .cards-grid // → grid-template-columns: 1fr .viz-flow // → flex-direction: column .viz-flow-arrow // → transform: rotate(90deg) :root font-sizes // → text-4xl/5xl/6xl reduced @media (max-width: 480px) .module padding // → space-8 instead of space-16 .deep-dive-link // → flex-direction: column; text-align: center .nav-link-text // → display: none .sibling-nav-items // → flex-direction: column

Responsive strategy: On tablets, card grids and flow diagrams become single-column. On mobile, smaller padding, stacked deep-dive links, and hidden navigation text are added. The sibling navigation switches to a vertical column. All breakpoints use the same CSS variables — only the layouts change.

✏️ Quick Check

What's wrong with an L1 hero that only shows the title and back button?

The level dots at the top are missing
Missing page overview — the section list is mandatory on L1–L3
The background should be warm gray
Deep Dive Hero Module Patterns in Detail → All hero variants, their CSS classes, and the exact embedding rules
→
More deep-dive pages for Developers
01 Orchestrator 02 Helpfulness Scoring 03 Pipelines 04 Design System 05 Navigation 06 Templates 07 Quality Assurance