The same build-queue List four ways — the anatomy cards ARE Lists: a List frames itself in its own Card, so `card` takes the Card's surface props. Flush and divided keep the rows on the card surface (rows undivided, so only the card's section hairlines show); inset turns the card's background into a shell with one inset panel inside a size-derived gutter; the last card adds the List's own row hairlines (`divided`). The content region is always edge to edge (`content.padding: none`) — the rows pad themselves and publish their inset (`--card-content-row-inset`), so on the flush cards the header, footer and status badges line up with the row text, and on the inset cards the header and footer sit on the panel's outer edge (no padding of their own; the shell gutter is the only spacing) while the rows stay indented inside the panel. The branch sha is the description in the monospace family (`descriptionFont: mono`). Second row: the same queue as a hand-written Card holding a bare List (`card={false}`) — flush, divided and inset. In the Card's padded content region the rows drop their own inline padding, so the row text lands on the content's text edge (no double indent): on the flush cards it lines up with the header text, on the inset card with the panel's own padding.
Card sizes 2xs → lg on an inset card, each at its natural height (no stretch) so the gutter growth is visible. Each size publishes its gutter (4xs, 3xs, 2xs, xs, sm) and the panel corner comes from the radii.inner.md.<gutter> token. The footer reads back the rendered outer radius R, inner radius r and gutter: at radius md the token floors at 4px from xs up (R − gap ≤ 4), so on the larger sizes the ring of shell is thicker at the corner than along the edges — see 03 for rounder cards, where the corners do stay concentric.
Card radius md → 2xl at size md (gutter xs). The inset panel takes radii.inner.<radius>.xs, so a rounder card gets a rounder panel and the ring of shell between them keeps an even thickness at the corners. Read-back in the footer.
content.padding is independent of the card size, and a List's `card.content.padding` overrides its edge-to-edge default: none (the List default), 2xs, sm or lg. The rows keep their own padding inside the padded panel; on these inset cards the header and footer sit on the panel's outer edge whatever the padding, so only the content text moves with content.padding while the hairlines inset with the panel padding. Values (the short sha, `valueFont: mono`) share one right-aligned column across rows.
Rows are the five feedback palettes, columns four ways to pair a coloured shell with its inset panel: a secondary (tinted) shell whose panel inherits the palette, the same shell with a neutral panel, a primary (filled) shell with a secondary panel, and a tertiary shell (neutral surfaces, accent border and text). Header text flips to contrast on the filled shell.
Secondary shell
panel inherits the palette
Secondary · neutral panel
content.feedback: neutral
Primary · secondary panel
content.emphasis: secondary
Tertiary shell
neutral surfaces, accent ring
A neutral shell with the palette moved into the panel: content.feedback × content.emphasis. Top row secondary (tinted panel, the shell stays gray), bottom row primary (a filled panel as the card's focal point). Progress and text inside the panel follow its palette via panel.* tokens.
Rows are the shell background, columns the inset panel's, across the terrain ladder peak → ground. The badge counts terrain steps (0 merges, 1 is faint, 2+ reads); the figure under it is the shell↔panel contrast ratio measured from the rendered colours. Measured, the ladder is evenly spaced (≈1.02:1 per step in both themes), so any pairing one step apart is faint by construction — the default recommendation is a shell two or more steps below a peak panel (valley/ground shell), or a base shell with a border.
content peak
content hill
content base
content valley
content ground
shell peak
shell hill
shell base
shell valley
shell ground
Eyebrow + heading + subheading with a leading Stamp (accent fill); trailing chrome as a segmented Choice, a Badge + icon Button pair, a lone Badge and a Badge + secondary Button; footers with leading text, a ghost action, a trailing primary action or trailing text. All four bodies are List-framed cards (the chrome rides the List's forwarded `card-*` slots): API latency (route · p95, each row's traffic share a labelled Progress bar in its `<id>:description` slot; FINDING (List): the row's description (Banner subheading) is content-sized, so a block-level rich description needs `passThrough.description` flex 1 to take the row's free width), On-call rotation (name · team · window, `content.padding: xs`), Launch gates (size sm rows with leading status Stamps, in an md card; the cleared gates are `muted` — the solved muted text token, not an opacity fade — against the open gate's warning `feedback` tint) and Nightly backups (db · time · size + status Badge). Two elements in one header-trailing slot (Badge + Button on Nightly backups and On-call rotation) sit an xs apart — the same gap CardFrame puts between resolved entries (the header/footer flanks and each entry box carry it, so a multi-element Astro `card-trailing` slot spaces too). Footer strings render at body size (larger than the sm body copy used here) — worth a look as a default.
rhythm on an inset card, as compact as the non-rhythm shell: the card pads half a raster line, sections sit half a line apart and the panel pads half a line, so the outer box lands on whole lines (a two-section card pads ¾ line top and bottom to stay whole). With a footer, on a feedback shell, and a size sm card. The bodies are Lists in `rhythm` mode (the List's own Card follows it): rows pad nothing and measure whole raster lines (one line per text row at sm, at least two at md) and the divided hairlines take no block space, so every row is a whole number of lines. Each card has an ODD number of rows (3, 1 and 3) — whole-line rows don't need an even count to land the card on the raster. The Hosts card adds divided rows and md rows with a description. The CARD chips must stay green. Row chips: on the three-section card (header + panel + footer) the rows chip green (h 1, whole-line y). Expected ambers/reds, not bugs: in a two-section card the panel starts a quarter line down (the ¾-line card padding that keeps the card whole), so its rows read y n.25; and a divided row's box includes the 1px hairline it pulls back over the row above (-1px margin), so it measures h 2.04 while the row PITCH stays on whole lines.
measuring…Components that now frame themselves in a Card, each on a different palette: an incident Table on a danger-tinted shell (caption → heading, global filter → header trailing, pagination → footer), a region ListBox on success, a runbook TreeView on warning and a release Calendar on primary (period label moves to the subheading because a heading is set; view tabs + nav in the header, Today/Reset in the footer). Every inset panel pins content.feedback=neutral so the data reads on plain peak; the table footer pins feedback=neutral so pagination text isn't red (note: a feedback-only footer override counts as a distinct surface, so the footer regains its top padding). Last: a flush table (the default, divided) for contrast with the inset one. Sizing: a framed ListBox and Calendar keep their intrinsic width (max-content / fit-content) inside a Card; Calendar has fullWidth, the ListBox needs card.passThrough.root.style width — a candidate for a fullWidth prop.
The Dialog renders its title, body and actions in a transparent Card inside the <dialog> panel: a danger dialog (feedback on the panel, a danger-tinted inset body) and a neutral inset dialog, both with footer actions in the new footer slots. Their bodies are bare Lists (`card={false}`, size sm): what the delete takes with it as pairs, the key's consumers as stacked rows; the dialog content is `padding: none` so the rows' own padding is the only inset. The inset dialog header and footer sit on the panel edge; the rows pad themselves inside it (a bare List publishes no row inset to its host). The command palette puts its search in the dialog header, the list edge to edge in the inset panel and the key hints in the footer.
List as a card-based component across its surface. Flush vs inset: the same service list on a peak card and on a valley shell with a peak panel — leading ghost Stamps, a tabular value column, status Badges, an icon Button in the header, a ghost action in the footer; flush rows line up with the header text; on the inset card the header and footer sit on the panel edge. Feedback palettes: a success shell whose panel inherits the palette, a danger shell with a neutral panel (header count Badge, danger footer action), a warning flush card whose rows inherit it (card `divided`). Stacked vs pairs: a horizontal pairs card (a note under Next charge) and a vertical pairs grid in 3 columns (hairlines between grid rows). Link rows: an inset settings list (chevron Stamps, a count Badge, a value, and a trailing Button that stays its own control above the stretched link) and a flush divided incident list — hover tints the row, focus rings inside it. Sizes sm / md / lg: row padding, type and the leading Stamp box scale together, and the card takes the list's size. Value column: only the renewing certificate has a trailing Badge, and the other rows' values still end on the row edge (`valueColumn: independent`, the default) instead of being pulled in by the badge width. Pairs: Seats carries a per-pair trailing Button (a trailing `<dd>`), the build grid's Cache hit term is rich (an `<abbr>` in its `<id>:term` slot) and its commit is monospace (`item.valueFont`). FINDING (List, pairs): a horizontal pair's note shares the term's grid column, so a long note (Next charge) widens that column and squeezes the value — in a narrow card `$4,320.00` wraps; the note should not size the term column (or the value should not wrap). REMAINING LIMIT (Astro): `<id>:region` slotted children can't be emitted from a `.map()` (the compiler hoists them out of the callback scope → ReferenceError), so rich per-row content is written out row by row.