Level 1 — Deep Dive

HTML Course Pipeline

Phase 0 through Phase 6: From bootstrap through helpfulness scoring to interactive HTML courses with depth maps.

On this page

Phase 0: Bootstrap — Audiences + integration mode
Phase 1-2: Analysis & Curriculum — Create depth map
Phase 3: Foundation — CSS design system, fonts, colors
Phase 4: Build — Audience pipelines in parallel
Phase 5-6: Polish & Depth Map — Cross-level links

Phase 0: Bootstrap

Setting the course: audiences and integration mode

Phase 0 determines the base configuration. Which audiencesThree predefined audiences: Users (max L2, threshold HS>=7), Developers (max L3, threshold HS>=6), Decision Makers (max L1, threshold HS>=8). should be served? Is the pipeline running in standalone mode or integrated with KG data?

# Phase 0: Bootstrap config
audiences:
  users:       { max_depth: L2, hs_threshold: 7 }
  developers:  { max_depth: L3, hs_threshold: 6 }
  executives:  { max_depth: L1, hs_threshold: 8 }
integration:
  mode: "standalone" | "integrated"

Each audience has a max depth and HS threshold. Developers get the most depth (up to L3), executives only L1 but with a higher quality bar.

Phase 1-2: Analysis & Curriculum

Understand codebase, helpfulness scoring, create depth map

Phase 1 analyzes the codebase. Phase 2 creates the curriculum via Helpfulness ScoringHS = Complexity(0-3) + Relevance(0-3) + Learning Value(0-2) + Independence(0-2). Maximum: 10. Topics above the threshold get their own sub-pages., which autonomously decides the depth structure.

Helpfulness Scoring — Interactive

HS = Complexity(0-3) + Relevance(0-3) + Learning Value(0-2) + Independence(0-2)

Complexity: 2

Relevance: 2

Learning Value: 1

Independence: 1

Helpfulness Score: 6 / 10

Developer: Own page | User: No deep dive

Phase 3: Foundation

CSS design system, Google Fonts, color palette

Phase 3 creates the CSS foundation. The energy company design is defined as :root custom properties. Google Fonts are included via preconnect links. The CSS is embedded inline in every HTML file — no external build process needed.

/* Phase 3: CSS Custom Properties */
:root {
  --color-deep-blue:     #000099;
  --color-impulse-orange: #FE8F11;
  --color-warm-gray:     #E4DAD4;
  --font-display: 'Bricolage Grotesque';
  --font-body:    'DM Sans';
  --font-mono:    'JetBrains Mono';
}

Phase 4: Build

Audience pipelines in parallel, HS thresholds, level generation

Phase 4 is the main build phase. Each audience runs an independent sub-pipeline generating all pages. Topics and languages (DE/EN) are built in parallel within each sub-pipeline.

Parallel Audience Pipelines

CUR

Curriculum

➔

USR

Users

L0-L2, HS>=7

➔

DEV

Developers

L0-L3, HS>=6

➔

EXE

Executives

L0-L1, HS>=8

➔

OUT

HTML

Phase 5-6: Polish & Depth Map

Cross-level links, transparency report, quality control

Phase 5 adds cross-level links, sibling navigation, and language toggle links (DE/EN). Phase 6 generates the transparency report showing which topics received which HS score and whether they became standalone pages or embedded paragraphs.

# Depth map (transparency report excerpt)
L0 index_dev_en.html
  Skill Architecture     HS=9  -> L1 skill-architecture_dev_en.html
  Agent Pipeline         HS=9  -> L1 agent-pipeline_dev_en.html
  Design System          HS=7  -> L1 design-system_dev_en.html
  Extensibility          HS=5  -> Paragraph on L0 (below threshold 6)

Deep Dive: HTML Templates