Layered With Wings (HTML/CSS)
Best for: the default architecture figure — a layered core in the middle, with the things that serve
every layer in a column down each side. This is the most-used shape in the set, and the one to reach for
when nothing more specific is called for
Avoid when: the wings are not really system-wide → use operations-overview.md (one wing) or
layer-stack.md (no wings); a wing that only applies to one layer is a component of that layer, not a wing
Answers: what the layers are, what runs in each of them, and which systems wrap around all of them
Data Shape
A three-column grid: wing, core, wing. The core is a stack of layer bands; each wing is a single panel that stretches to the core's full height, because that stretch is the whole message — a concern that spans every layer is drawn spanning every layer.
Layer names run top to bottom in dependency order: experience depends on services, services on async and data, everything on infrastructure. The reader should be able to read one wing and get "this applies throughout".
Key Options
| Option | Effect |
|---|---|
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 | Five layers need five distinguishable fills; the ramp exists for exactly this, and the tint keeps the band light enough for ink text |
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 footer line inside each wing | Says who owns it and whether it is on the request path — the two questions a wing always raises |
| A caption under the grid | Names the relationship explicitly; a reader who misses the full-height cue still gets it |
| A heavier border on the one entry point | Marks where traffic enters, which is usually the figure's real subject |
Pitfalls
- ❌ Wings that only apply to one layer → ✅ that is a component of that layer; put it in the band, or the full-height stretch becomes a lie
- ❌ Letting the wings float to their content height → ✅
align-items: stretch, or the figure says the opposite of what it means - ❌ More than six layers → ✅ the bands become unreadable and the wings stretch into thin strips; group layers or split the figure
- ❌ Putting supporting systems inside the infrastructure band → ✅ infrastructure is what the stack runs on, support systems are what runs alongside it; merging them is the most common mistake in this figure
- ❌ A different hue per component → ✅ hue encodes the layer, not the component; components inside a band
are all
surface-1 - ❌ Drawing the wings as arrows into the stack → ✅ a wing is a scope, not a call; arrows belong in
request-paths.md
Alternatives
| Variant | Use instead |
|---|---|
| One wing rather than two | operations-overview.md |
| No wings — the layers alone | layer-stack.md |
| The layers plus who calls whom | request-paths.md |
| The same layers placed across regions and zones | nested-zones.md |
| Six layers with every component named, and wings grouped by function | complex-system-blueprint.md |