Goal: system architecture
Reader: Architects and engineers showing a whole system on one page. Meta cluster: B — process & systems Scenarios: 8 · Examples: 8
Scenarios
| Scenario | Tier | Engines | Example files |
|---|---|---|---|
| complex system blueprint | T1 | html-css | complex-system-blueprint.md |
| layer stack | T1 | html-css | layer-stack.md |
| layered with wings | T1 | html-css | layered-with-wings.md |
| nested zones | T1 | html-css | nested-zones.md |
| operations overview | T1 | html-css | operations-overview.md |
| pipeline stages | T1 | html-css | pipeline-stages.md |
| request paths | T1 | html-css | request-paths.md |
| service catalog | T1 | html-css | service-catalog.md |
Reading order
Decide what the figure is about first — the layers, the zones, the order, or the calls. Then pick the shape that carries it: a stack, a nesting, a row, a grid, or a connector overlay.
Engines in this goal
- HTML/CSS — system architecture diagrams, cards and page-level layouts (no fence)
Details, limits and anti-patterns: ../engines/html-css.md.
Palette
Every figure takes its colours from a theme. Pick one in
../styles/palette.md — the token contract, the theme index and the
per-engine blocks all start there.
Most figures in this set want Default. Depart from it for the medium, not the topic: Print when it may be photocopied, Contrast for low vision or large-print handouts, Vivid when it will be projected, Accessible when colour must not be the only cue, Editorial for long-form reading, Slate for technical reference, Pastel when the figure sits inside gentle prose, Nord for a cool Nordic register. Every theme is designed for a light ground — the set has no dark page.
Don't
- Arrows on top of containment → nesting already means reachability; pick one
- Diagonal or curved connectors → right angles only, or it reads as a sketch
- Equal-weight cards for a system with a clear hierarchy → use a stack
- Using colour alone for tier or health → the tier is an edge, the health is a chip with words