Status: Phase 3 mature (DEC-0020). Static + Playwright enforcement matures further in Phase 5 per §8.1.

Statement

Every interactive element meets a minimum hit-target. The visual size of the element may be smaller; the hit area (padding, ::before overlay, parent-row delegation) extends to the minimum.

Tier	Surface	Minimum
Tier 1	Touch-canonical (mobile-first per P-1)	44 × 44 CSS px (WCAG 2.5.5 AAA / Apple HIG)
Tier 2	Desktop pointer-canonical, dense data UIs	24 × 24 CSS px (WCAG 2.5.8 AA)
Tier 3	Documented exceptions	see below

The audit found 18 mobile-layout interactives below 44 × 44. Each was usable by a user with steady hands and good eyes. Each was hostile to users without those.

Tier 1 — Touch surface (default)

44 × 44 CSS px applies to:

Every standalone <button>, <a>, <input type="checkbox|radio">, <select>, role=button/menuitem/tab/option.
Modal close-X (≥ 40 × 40 per audit 1974 — explicitly upgraded inline by DEC-0016).
Mobile FAB (compose '+' audit 1319, 1672) — visual 24 × 24 acceptable IF the FAB has ≥ 8px gutter on all sides AND the parent has padding extending the hit area to 44 × 44.
Conversation rows with role="button" tabindex="0" (audit 1292, 1316) — the row IS the hit-target; min-height 64px exceeds the floor.

Tier 2 — Pointer surface

24 × 24 applies only when:

The surface is genuinely desktop-only (operator dashboards, diagnostic data tables — /diagnostics/*, /admin/* if present).
The surface has no touch-fallback render path.
The reduced size is justified by information density.

Tier 2 is a CARVE-OUT, not a default. New code targets Tier 1 unless the parent surface is documented as Tier 2.

Tier 3 — Documented exceptions

Five carve-outs from Tier 1, each tied to a specific architectural pattern:

Inline-edit pencil within a 64px parent row — visual 28 × 28 acceptable (audit 1933) because the parent row is the 64px hit-target via <RowAction.Container> event delegation. Primitive: <RowAction> (DEC-0020).
Disabled-state buttons retain hit-area at Tier 1 (audit 71-? line 2812). The visual cue (opacity / cursor) signals state; the 44 × 44 area persists so users tabbing through a form land on the same physical target.
Toast dismiss via swipe — the entire toast body is the hit-area, not the X icon (DEC-0017).
Focus ring renders against the hit-area boundary — not the visual boundary (DEC-0019). Padding-extended hit areas show the ring at the outer edge so the user sees the actual clickable region.
Single-density policy (DEC-0012) — hit-area minimums are NEVER reduced for "compact" or "dense" variants. Only Tier 2 is a legitimate density reduction, and it requires the surface-level conditions above.

Why

Visually-small affordances are sometimes a content choice — a delete button shouldn't be huge. But hit area and visible area are different properties. A 16 × 16 visible icon can ship with a 44 × 44 hit area by extending its padding or using a ::before overlay. The audit's 18 violations were 18 cases where this was not done.

How

Primitive defaults (Phase 3)

Primitive	Visible	Hit-area	Source
`<Button>` (`size="md"`)	min-h-[48px]	48 × content	DEC-0014 / Ledger lines 99–101
`<Button>` (`size="sm"`)	min-h-[44px]	44 × content	A-3 Tier 1 floor (mandatory)
`<IconButton>`	24px icon	44 × 44 via padding	DEC-0010 Tier C contract
`<RowAction>`	28 × 28 chip	28 × 28 (chip) + 64 × full-row (parent)	DEC-0020 Tier 3 #1
`<RowAction.Container>`	n/a	min-h-[64px]	DEC-0020
Modal close-X	24px icon	≥ 40 × 40	DEC-0016 + audit 1974
Toast action button	n/a	≥ 44 × 44	DEC-0017
`<Kbd>` chip	20 × 20	n/a (presentational, never interactive)	DEC-0018

Compound contracts

DEC-0010 establishes that every <IconButton> ships 44 × 44 hit + required aria-label. DEC-0020 establishes that 28 × 28 chips inside a 64px row are valid via parent-row delegation. The audit's "14th unlabelled-lock + sub-44" case (line 2082) is a compound DEC-0010 + DEC-0020 fix.

Static enforcement

Phase 3: PRs cite A-3 manually in the swap-in body and add data-hit-area annotations where Tier 3 exceptions apply.
Phase 4: ESLint plugin scans for <button> / <a> / role=button elements and flags absent min-h-[44px] / h-11 / equivalent — unless the element is wrapped in a known Tier 3 parent (.row, <RowAction.Container>).
Phase 4 Playwright sweep: post-fix screenshot suite measures getBoundingClientRect() for every Tab-reachable element on Tier A surfaces; asserts width ≥ 44 AND height ≥ 44 except for elements within a documented Tier 3 ancestor (matched by data-hit-area="row" etc).
Phase 5: the Playwright assertion becomes a CI gate — a single Tier 1 violation fails the build.

Runtime guard (Phase 3 dev mode)

<IconButton> (DEC-0010) includes a dev-mode runtime check: in process.env.NODE_ENV !== 'production', it console.errors if getBoundingClientRect() < 44 in either dimension. The check runs once per mount; production bundles tree-shake it.

Audit Issues Closed

Hit-area citations: lines 89, 256, 319, 340, 405, 1207, 1319, 1672, 1974, 2050, 2227, 2607 → resolved by Tier 1 minimums codified in <Button> / <IconButton>.
Line 2082 (14th unlabelled-lock + sub-44) → DEC-0010 Tier C + DEC-0020 Tier 1 compound.
Line 1933 (28px rename pencil within row) → Tier 3 #1 codified via <RowAction>.
Line 53-N modal close → Tier 1 modal-close 40 × 40 rule (DEC-0016).
Pattern compose '+' 24×24 (audit 1319, 1672) → Tier 1 mobile FAB rule with ≥ 8px gutter.

Interlocks

DEC-0009 Tier 1/2 confirm-modal buttons respect Tier 1 minimums.
DEC-0010 every <IconButton> ships 44 × 44 hit + aria-label.
DEC-0011 truncation does not shrink interactive elements below Tier 1.
DEC-0014 disabled-state buttons retain hit-area (audit 71-? line 2812).
DEC-0016 modal close button ≥ 40 × 40 per audit 1974.
DEC-0017 toast action button ≥ 44 × 44; toast dismiss area = full toast body.
DEC-0018 every keyboard-reachable element respects hit-area minimums.
DEC-0019 focus ring renders against the hit-area boundary, not the visual boundary.
DEC-0012 single-density policy → no Tier 2 reduction outside documented surfaces.

Phase 5 Maturation

Phase 5 will:

Replace this document's Tier 3 list with the per-primitive specification table generated from the running Storybook fixture suite.
Promote the Phase 4 Playwright sweep to a CI gate.
Add audit counter-examples (annotated screenshots showing violation → fix) for each closed issue.
Document the automated measurement harness API.