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