Matches the same card-grid/card-body pattern rationale.md already uses for
its "Sources" and "four rules" sections, instead of reading as generic
prose. Needed one small addition to card.css: .card-body only styled its
p child (secondary color, smaller size) since no page had put a list in a
content tile before — extended the same treatment to ul.

Verified in a local build + Playwright screenshot in both themes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CUag8hbfEiMpyQ9gxxSzv5

diff --git a/_sass/components/card.css b/_sass/components/card.css
index e0281b3..0c08c60 100644
--- a/_sass/components/card.css
+++ b/_sass/components/card.css
@@ -67,10 +67,11 @@
 .card > li > a:only-child:hover { background: var(--gl-color-surface-fill); }
 
 /* Documentation-only extras: a body/footer pair and a responsive grid, used
-   by the prose pages (rationale.md, index.md) to show a Card as a plain
-   content tile rather than a data row. Neither is part of Card's props —
-   they exist because a content tile's inner layout has no element of its
-   own to hang a selector on. */
+   by the prose pages (rationale.md, index.md, refusals.md) to show a Card
+   as a plain content tile rather than a data row. Neither is part of
+   Card's props — they exist because a content tile's inner layout has no
+   element of its own to hang a selector on. .card-body ul is the same idea
+   applied to a checklist tile (refusals.md) instead of a single paragraph. */
 .card-body {
   display: flex;
   flex-direction: column;
@@ -78,7 +79,9 @@
   padding: var(--gl-space-m);
 }
 .card-body h3 { margin: 0; font: 600 var(--gl-step-0)/1.3 var(--gl-font-sans); }
-.card-body p { margin: 0; color: var(--gl-color-text-secondary); font-size: var(--gl-step--1); }
+.card-body p,
+.card-body ul { margin: 0; color: var(--gl-color-text-secondary); font-size: var(--gl-step--1); }
+.card-body ul { padding-left: 1.125em; }
 .card-footer {
   display: flex;
   flex-wrap: wrap;
diff --git a/refusals.md b/refusals.md
index 187586d..5e8f4dc 100644
--- a/refusals.md
+++ b/refusals.md
@@ -15,66 +15,68 @@ them in one place, so a new screen can be checked against the whole list at
 once instead of five pages in sequence. These are laws, not preferences: a
 screen that breaks one is off-system.
 
-## Surface & elevation
+<div class="card-grid">
+<article class="card">
+<div class="card-body">
+<h3>Surface &amp; elevation</h3>
+<ul>
+<li>No cream or beige page. The stock is warm but held close to neutral.</li>
+<li>No side-accent bar on a card, no four-sided border, no bordered card at all.</li>
+<li>No hairline border and soft shadow on the same element. One or the other.</li>
+<li>No decorative grid, stripe field, or radial glow. Flat color only.</li>
+<li>No radius above <code>--gl-radius-lg</code> on a card, no custom corner value outside the token scale.</li>
+<li>No dark theme with colored glows.</li>
+</ul>
+</div>
+</article>
+<article class="card">
+<div class="card-body">
+<h3>Type &amp; hierarchy</h3>
+<ul>
+<li>No kicker or eyebrow above a heading. A heading is already the top of its own hierarchy.</li>
+<li>Uppercase and tracking stay on <code>type-label</code>. Never on body copy, never on a heading.</li>
+<li>No gradient text. No italic serif display headline.</li>
+<li>Adjacent steps in the type scale are 1.2&ndash;1.25 apart &mdash; not enough contrast on their own. Skip a step between a heading and the body under it.</li>
+<li>A heading gets more space above it than below it.</li>
+</ul>
+</div>
+</article>
+<article class="card">
+<div class="card-body">
+<h3>Layout &amp; structure</h3>
+<ul>
+<li>No card inside a card. One level, then spacing and rules do the rest.</li>
+<li>A grid of cards is fine when each card is a real, distinct object. What's refused is the decorative version &mdash; identical icon-and-heading cards standing in for a list. Repeated, uniform items belong on a <a href="<%= relative_url('/components/card-row/') %>">CardRow</a> list.</li>
+<li>No icon tile stacked above a heading. An icon sits beside its label, in flow.</li>
+<li>No decorative numbered section labels. A number appears only when it's real data.</li>
+</ul>
+</div>
+</article>
+<article class="card">
+<div class="card-body">
+<h3>Motion</h3>
+<ul>
+<li>No pulsing status dot. Status is a <a href="<%= relative_url('/components/badge/') %>">Badge</a> &mdash; tone plus mono uppercase text, on no background. It never animates on its own.</li>
+<li>No blinking cursor in non-editable copy, no marquee, no bounce or elastic easing.</li>
+<li>No hover scale on imagery. Animate <code>transform</code> and <code>opacity</code>, never <code>width</code> or <code>height</code>.</li>
+</ul>
+</div>
+</article>
+<article class="card">
+<div class="card-body">
+<h3>Copy</h3>
+<ul>
+<li>At most two em-dashes in a passage. Commas, colons, and periods carry the same joins without the cadence.</li>
+<li>No &ldquo;not X, a Y&rdquo; aphorisms, and no manufactured contrast as a closing line. State the thing once.</li>
+<li>Nothing gets dismissed as &ldquo;theater.&rdquo; Say plainly what a thing does or does not do.</li>
+</ul>
+</div>
+</article>
+</div>
 
-- **No cream or beige page.** The stock is warm but held close to neutral —
-  see [Color](<%= relative_url('/foundations/color/') %>).
-- **No side-accent bar on a card, no four-sided border, no bordered card at
-  all.** [Card](<%= relative_url('/components/card/') %>) is a hairline
-  border plus `--gl-radius-lg`, nothing else.
-- **No hairline border and soft shadow on the same element.** One or the
-  other — see [Elevation](<%= relative_url('/foundations/elevation/') %>).
-- **No decorative grid, stripe field, or radial glow.** Flat color only.
-- **No radius above `--gl-radius-lg` on a card, no custom corner value
-  outside the token scale.** `--gl-radius-full` stays reserved for true
-  pills — [Switch](<%= relative_url('/components/switch/') %>)'s track and
-  thumb, the avatar chip — not a general-purpose corner.
-- **No dark theme with colored glows.** Dark mode repoints the same aliases
-  at the inverted neutral ramp; nothing else changes.
-
-## Type & hierarchy
-
-- **No kicker or eyebrow above a heading.** A heading is already the top of
-  its own hierarchy; stacking a tracked uppercase label over it invents a
-  second, redundant one.
-- **Uppercase and tracking stay on `type-label`.** Never on body copy, never
-  on a heading — see [Typography](<%= relative_url('/foundations/typography/') %>).
-- **No gradient text. No italic serif display headline.**
-- **Adjacent steps in the type scale are 1.2–1.25 apart — not enough
-  contrast on their own.** Skip a step between a heading and the body under
-  it, or the hierarchy reads flat.
-- **A heading gets more space above it than below it.** The gap says what
-  belongs to what.
-
-## Layout & structure
-
-- **No card inside a card.** One level, then spacing and rules do the rest.
-- **A grid of cards is fine when each card is a real, distinct object.**
-  What's refused is the decorative version — identical icon-and-heading
-  cards standing in for a list. Repeated, uniform items belong on a
-  [CardRow](<%= relative_url('/components/card-row/') %>) list, not a card
-  grid.
-- **No icon tile stacked above a heading.** An icon sits beside its label,
-  in flow.
-- **No decorative numbered section labels.** A number appears only when
-  it's real data.
-
-## Motion
-
-- **No pulsing status dot.** Status is [Badge](<%= relative_url('/components/badge/') %>) —
-  tone plus mono uppercase text, on no background. It never animates on its
-  own; only data that's actually changing does — see
-  [Motion](<%= relative_url('/foundations/motion/') %>).
-- **No blinking cursor in non-editable copy, no marquee, no bounce or
-  elastic easing.**
-- **No hover scale on imagery.** Animate `transform` and `opacity`, never
-  `width` or `height`.
-
-## Copy
-
-- **At most two em-dashes in a passage.** Commas, colons, and periods carry
-  the same joins without the cadence.
-- **No "not X, a Y" aphorisms, and no manufactured contrast as a closing
-  line.** State the thing once.
-- **Nothing gets dismissed as "theater."** Say plainly what a thing does or
-  does not do. See the Voice section in `SKILL.md`.
+Each rule above is already enforced on its own foundation or component
+page — [Color](<%= relative_url('/foundations/color/') %>),
+[Elevation](<%= relative_url('/foundations/elevation/') %>),
+[Typography](<%= relative_url('/foundations/typography/') %>), and
+[Motion](<%= relative_url('/foundations/motion/') %>) — and in the Voice
+section of `SKILL.md`. This page only collects them into one list.