Should flag

Cramped body in cards

14px body, 4px padding all sides
This text is crammed against the border with only 4px padding. It feels claustrophobic and hard to read because the eye has nowhere to rest.
14px body, 2px padding all sides
Two pixels of padding is essentially nothing — body text needs room to breathe inside its container, especially across multiple lines.
16px body, 4px padding, background only
A colored background containment with only 4px padding around 16px body text. The colored edge feels like it's pressing in.

Asymmetric cramping

1px vertical / 16px horizontal, 14px body
Generous horizontal padding doesn't save you when the vertical padding is just one pixel. Lines stack on top of each other against the container edge.
12px vertical / 4px horizontal, 14px body
Comfortable vertical padding can't fix horizontal text running right up against the side edges. Words feel like they're falling off the container.

Currently missed: cramped large text

24px heading, 8px padding (passes the 8px floor but is too tight for the text size)
Tight Heading Container Label
32px hero, 6px vertical / 16px horizontal padding
Hero Section With Tight Vertical Padding

Cramped multi-line code block

<pre>, 2px padding, 14px monospace
function example() {
  const value = "cramped";
  return value;
}

Should pass

Small inline pills

.detection-cmd replica: 13px font, 6px / 14px padding (the homepage case) npx impeccable detect src/
small badge: 11px font, 4px / 8px padding FEATURED ITEM BADGE
tag chip: 12px font, 4px / 10px padding design system tag chip

Cards at current standards

16px body, 8px padding (the original 8px floor)
Standard card with 8px padding around 16px body text. Comfortable and within current conventions.
14px body, 16px padding (generous)
Generous 16px padding around 14px body text. The eye has plenty of room from the container edge.
18px body, 12px padding (proportional)
Larger body text gets proportionally more padding. 12px around 18px text feels balanced.

Comfortable code blocks

multi-line <pre>, 8px padding, 14px font
function example() {
  const value = "ok";
  return value;
}
multi-line <pre>, 12px padding, 14px font
function example() {
  const value = "comfortable";
  return value;
}

Interactive elements

button: 14px font, 8px / 16px padding
form input: 16px font, 8px / 12px padding

Big text with proportional padding

24px heading, 16px padding
Heading With Room To Breathe
32px hero, 20px / 32px padding
Hero With Big Padding