Complex System Blueprint (HTML/CSS)
Best for: a whole system that is too large for one component per layer — six bands with every
component named, and wings that group the concerns serving all of them into labelled functions. Use it
when the reader has to place a component rather than just see the shape
Avoid when: five bands and a flat wing list will do → use layered-with-wings.md; the extra density
costs legibility and has to buy something
Answers: what the layers are, what specifically runs in each one, and which groups of concerns wrap
around all of them
Data Shape
A three-column grid — wing, core, wing. The core is six layer bands, each a grid of named components with the job that component does underneath. Each wing is a stack of group panels, so a wing reads as several labelled functions rather than one long list; both wings stretch to the core's height, because that stretch is the message — a concern that spans every layer is drawn spanning every layer.
Six bands is the ceiling. At five components a band's boxes are already about 120 px wide; a seventh band pushes each one under a readable width. Layer order runs top to bottom in dependency order: channels call the edge, the edge calls services, services reach async and data, and all of them run on platform.
Key Options
| Option | Effect |
|---|---|
212px wings rather than a single-panel wing's 208px |
A grouped wing carries group headings and items; the extra width keeps four items per group on one line |
| Group panels inside the wing | Turns one list into labelled functions — the difference between "what supports the stack" and "who does what" |
| A sub-label on every component | Names the job, which is what lets a dense band be read without a legend |
align-items: stretch on the three-column grid |
The wings take the core's height for free; any other value and they float, which reads as "this applies to one layer" |
| A tint per layer band | Six bands need six distinguishable fills; the ramp exists for this and keeps every band light enough for ink |
ink rather than muted inside a band |
The tint already lowers contrast, and the palette contract allows muted only on the page |
A 2px border on the wings vs 1px on the bands |
The wings are a different kind of thing, and line weight says so without a legend |
| A heavier border on the one entry box | Marks where traffic enters, which is usually the figure's real subject |
Pitfalls
- ❌ Reaching for this when five bands and a flat wing list will do → ✅
layered-with-wings.md; the extra density costs legibility and has to buy something - ❌ Sub-labels that restate the component name → ✅ the sub-label says what the component does
(
Ledger/double entry, notLedger/the ledger) - ❌ A sixth component in a band → ✅ five columns is the ceiling; a sixth box wraps or squeezes the row under 110 px
- ❌ A seventh layer band → ✅ group the layers or split the figure; the bands stop being readable
- ❌ A wing group that applies to one layer only → ✅ that is a component of the layer, not a wing
- ❌ Letting the wings float to their own content height → ✅
align-items: stretch, or the figure says the opposite of what it means - ❌ A different hue per component → ✅ hue encodes the layer; every component inside a band is
surface-0 - ❌
mutedorink-softtext inside a tinted band → ✅ink; both are page-only tokens in the contract
Alternatives
| Variant | Use instead |
|---|---|
| Five layers, one panel per wing | layered-with-wings.md |
| No wings — the layers alone | layer-stack.md |
| One rail rather than two | operations-overview.md |
| The layers plus who calls whom | request-paths.md |
| Equal-weight inventory with no layers | service-catalog.md |
| The same system placed across regions and zones | nested-zones.md |