Every module is a card on the page: the shell paints the surface (--module-surface, radius-4, 8px padding), an optional header row — muted title left, CTA slot right — and a borderless variant for full-bleed media modules. Because every module shares this one frame, colour profiles re-skin the whole portal by remapping a handful of semantic slots.
Rules
01Every module composes ModuleShell — never a bespoke card.
02The surface is --module-surface and carries data-dep-surface so profile text remaps apply.
03Header title paints --module-fg-muted at size 1 medium; the right slot takes a Badge or small Button.
04Full-bleed media modules use the borderless variant and draw their own media edge-to-edge.
05No module-specific surface colours — profiles own the paint.
In practice
Standard shellSurface + header row (muted title · CTA slot) wrapping the content stack.
Module titleCTA slot
Module content
Borderless variantNo surface or padding — full-bleed media modules (Product, Gallery) draw edge to edge.