default (bordered white) for interactive containers, list rows, and clickable tiles on any page surface — the workhorse. filled (bg-card-filled) for non-interactive informational tiles, grouped content, and calm secondary surfaces. Don’t add extra bg-card-inset blocks inside a filled card unless you truly need a third surface level.

Don’t use filled on a gray-bg page or sheet — gray on gray disappears. Don’t use filled for clickable list items — the recessed look kills affordance.

Wrap top-level sections on landings — centers content, applies responsive max-width and horizontal padding. The default outer wrapper for marketing surfaces.

Don’t use inside a flow, modal, or detail panel — FlowSheet already handles width. Not for forms or content reads where a max-w-md / max-w-2xl is the right constraint.

Use raw max-w-* classes on top-level landing sections — use Container.

Connected list of rows in a single rounded card with hairline dividers. Settings rows, document slots, transaction lists, sub-screens of a flow. Use focusOnChild for stacked input groups (replaces StackedInput).

For independent cards in a grid, use Card directly. For lists without a card chrome (transparent on a page bg), use a bare ul with divide-y.

Mix wildly different row heights or alignment styles — Stack expects uniform rows. Wrap a Stack in another Card — pick one container.

Stacked navigational rows, settings cells, picker entries, and labeled detail rows with leading/trailing slots. Use inside Stack when each row is part of one grouped shelf.

Don’t use for freeform card layouts or dense table-like data. If the content is just icon + short text inside a non-row layout, IconLabel is usually enough.