04d · Motif / Side-box

Side-box.

The flat rectangle that flanks a hex-prism diagram. Sources go on the left; consumers go on the right; integrations sit anywhere a prism would feel wrong. The shape difference is the hierarchy: prisms = apps you can install. Side-boxes = everything else.

Three sizes, one anatomy

White panel · cobalt-200 stroke · mono-uppercase chip header · icon+label rows. Don't add an outer shadow, don't fill the panel, don't make it bigger than the prisms it sits next to.

Default, input side. Reads as "things that flow into the platform."

.sidebox · 220 × auto

Output side, what the platform produces, where it lands.

.sidebox · 220 × auto

Compact, when the diagram is dense and you need a tight column. Trailing "+ N more" instead of a long list.

.sidebox--compact

Where the rectangle pulls its weight

The shape difference between hex and rectangle is doing real work. Don't muddy it.

Do

Use a side-box for anything not built by Conduction: data sources, identity providers, downstream APIs, third-party SaaS, your customers, citizens, regulators. The rectangle says "external."

Don't

Don't put a Conduction app inside a side-box because the diagram got crowded. If the cluster won't fit, swap the radial cluster for the horizontal pipeline-flow variant.

Do

Cap rows at 5. If you need more, use the compact variant with a "+ N more" footer, or split into two side-boxes labeled by sub-category.

Don't

Don't switch the side-box stroke to KNVB orange to "highlight" it. Side-boxes are intentionally quieter than the prisms, that's the whole hierarchy.